/*
 * base.css — LegacyFusion Design System
 * Updated: Batch 02 — Design System Foundation
 *
 * SINGLE SOURCE OF TRUTH for all visual tokens.
 * All other files build on this layer.
 *
 * Load order: base.css → page-specific CSS
 *
 * ADDITIVE: all original --ctrl-* tokens preserved.
 * New LF design system layered alongside.
 */

/* ============================================================
   GOOGLE FONTS IMPORT
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100..900;1,100..900&family=Orbitron:wght@400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700&family=Questrial&display=swap');

/* ============================================================
   ALFARN FONT — @font-face stub
   (swap src url when asset is available)
   ============================================================ */
@font-face {
    font-family: 'Alfarn';
    src: local('Alfarn'),
         url('../fonts/alfarn.woff2') format('woff2'),
         url('../fonts/alfarn.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ============================================================
   CSS CUSTOM PROPERTIES — ROOT TOKENS
   ============================================================ */
:root {

    /* ----------------------------------------------------------
       BACKGROUND — ABYSS GRADIENT
    ---------------------------------------------------------- */
    --bg-abyss-start:       #020b12;
    --bg-abyss-mid:         #051622;
    --bg-abyss-end:         #030e1a;
    --bg-gradient:          linear-gradient(160deg, var(--bg-abyss-start) 0%, var(--bg-abyss-mid) 55%, var(--bg-abyss-end) 100%);

    /* ----------------------------------------------------------
       SURFACE COLORS — GLASS & DARK
    ---------------------------------------------------------- */
    --surface-glass:        rgba(255, 255, 255, 0.05);
    --surface-glass-hover:  rgba(255, 255, 255, 0.09);
    --surface-glass-border: rgba(255, 255, 255, 0.10);
    --surface-dark:         rgba(5, 22, 34, 0.80);
    --surface-dark-2:       rgba(3, 14, 26, 0.90);
    --surface-card:         rgba(8, 28, 46, 0.72);
    --surface-card-hover:   rgba(10, 34, 56, 0.82);
    --surface-overlay:      rgba(2, 11, 18, 0.70);

    /* ----------------------------------------------------------
       CYAN ACCENT — #00e5ff FULL SCALE
    ---------------------------------------------------------- */
    --cyan-50:              #e0fafe;
    --cyan-100:             #b3f4fd;
    --cyan-200:             #7eedfb;
    --cyan-300:             #47e6f9;
    --cyan-400:             #1addf7;
    --cyan-500:             #00e5ff;   /* brand primary */
    --cyan-600:             #00c8e0;
    --cyan-700:             #00a8bc;
    --cyan-800:             #008898;
    --cyan-900:             #005f6b;
    --cyan-alpha-10:        rgba(0, 229, 255, 0.10);
    --cyan-alpha-20:        rgba(0, 229, 255, 0.20);
    --cyan-alpha-30:        rgba(0, 229, 255, 0.30);
    --cyan-alpha-50:        rgba(0, 229, 255, 0.50);

    /* ----------------------------------------------------------
       GOLD ACCENT — #FDA929 FULL SCALE
    ---------------------------------------------------------- */
    --gold-50:              #fff8ec;
    --gold-100:             #feeece;
    --gold-200:             #fddfa0;
    --gold-300:             #fdce6e;
    --gold-400:             #fdbb46;
    --gold-500:             #FDA929;   /* brand gold */
    --gold-600:             #e09120;
    --gold-700:             #be7716;
    --gold-800:             #9b5e0e;
    --gold-900:             #6e4009;
    --gold-alpha-10:        rgba(253, 169, 41, 0.10);
    --gold-alpha-20:        rgba(253, 169, 41, 0.20);
    --gold-alpha-30:        rgba(253, 169, 41, 0.30);
    --gold-alpha-50:        rgba(253, 169, 41, 0.50);

    /* ----------------------------------------------------------
       BLUE FOUNDATION
    ---------------------------------------------------------- */
    --blue-deep:            #020b12;
    --blue-navy:            #051622;
    --blue-mid:             #0a2a46;
    --blue-steel:           #134160;
    --blue-muted:           rgba(19, 65, 96, 0.35);
    --blue-tint:            rgba(19, 65, 96, 0.60);

    /* ----------------------------------------------------------
       TEXT COLOR SCALE
    ---------------------------------------------------------- */
    --text-primary:         #eaf2f7;
    --text-secondary:       #9bbecf;
    --text-muted:           #5a8099;
    --text-dim:             #3a5a70;
    --text-inverse:         #020b12;
    --text-gold:            var(--gold-500);
    --text-cyan:            var(--cyan-500);

    /* ----------------------------------------------------------
       FONT STACKS
    ---------------------------------------------------------- */
    --font-display:         'Orbitron', 'Alfarn', sans-serif;
    --font-heading:         'Exo 2', 'Inter', sans-serif;
    --font-body:            'Inter', 'Questrial', system-ui, sans-serif;
    --font-accent:          'Questrial', sans-serif;
    --font-mono:            'JetBrains Mono', 'Fira Code', monospace;

    /* ----------------------------------------------------------
       TYPOGRAPHY SCALE
    ---------------------------------------------------------- */
    --text-xs:              0.688rem;   /* 11px */
    --text-sm:              0.813rem;   /* 13px */
    --text-base:            0.938rem;   /* 15px */
    --text-md:              1.063rem;   /* 17px */
    --text-lg:              1.25rem;    /* 20px */
    --text-xl:              1.5rem;     /* 24px */
    --text-2xl:             1.875rem;   /* 30px */
    --text-3xl:             2.25rem;    /* 36px */
    --text-4xl:             2.813rem;   /* 45px */
    --text-5xl:             3.5rem;     /* 56px */

    --weight-light:         300;
    --weight-regular:       400;
    --weight-medium:        500;
    --weight-semibold:      600;
    --weight-bold:          700;
    --weight-extrabold:     800;
    --weight-black:         900;

    --leading-tight:        1.15;
    --leading-snug:         1.35;
    --leading-normal:       1.55;
    --leading-relaxed:      1.75;

    --tracking-tight:      -0.03em;
    --tracking-normal:      0em;
    --tracking-wide:        0.05em;
    --tracking-wider:       0.10em;
    --tracking-widest:      0.18em;

    /* ----------------------------------------------------------
       BORDER RADIUS SYSTEM
    ---------------------------------------------------------- */
    --radius-full:          999px;
    --radius-lg:            18px;
    --radius-md:            12px;
    --radius-sm:            8px;
    --radius-xs:            4px;

    /* ----------------------------------------------------------
       SPACING SCALE
    ---------------------------------------------------------- */
    --space-section-y:      80px;
    --space-section-x:      40px;
    --space-card-gap:       24px;
    --space-inner-lg:       32px;
    --space-inner-md:       20px;
    --space-inner-sm:       12px;
    --space-inner-xs:       8px;

    /* ----------------------------------------------------------
       GLASS CARD PATTERN
    ---------------------------------------------------------- */
    --glass-bg:             rgba(255, 255, 255, 0.05);
    --glass-bg-hover:       rgba(255, 255, 255, 0.08);
    --glass-border:         rgba(255, 255, 255, 0.10);
    --glass-border-hover:   rgba(255, 255, 255, 0.18);
    --glass-blur:           blur(20px);
    --glass-shadow:         0 8px 32px rgba(0, 0, 0, 0.45),
                            0 2px 8px rgba(0, 0, 0, 0.30),
                            inset 0 1px 0 rgba(255, 255, 255, 0.08);

    --glass-dark-bg:        rgba(5, 22, 34, 0.82);
    --glass-dark-border:    rgba(0, 229, 255, 0.12);
    --glass-dark-shadow:    0 12px 40px rgba(0, 0, 0, 0.60),
                            0 2px 10px rgba(0, 0, 0, 0.40),
                            inset 0 1px 0 rgba(0, 229, 255, 0.06);

    /* ----------------------------------------------------------
       NEON GLOW SHADOWS
    ---------------------------------------------------------- */
    --glow-cyan-sm:         0 0 8px rgba(0, 229, 255, 0.40);
    --glow-cyan-md:         0 0 16px rgba(0, 229, 255, 0.50),
                            0 0 40px rgba(0, 229, 255, 0.20);
    --glow-cyan-lg:         0 0 24px rgba(0, 229, 255, 0.60),
                            0 0 60px rgba(0, 229, 255, 0.25),
                            0 0 100px rgba(0, 229, 255, 0.10);

    --glow-gold-sm:         0 0 8px rgba(253, 169, 41, 0.40);
    --glow-gold-md:         0 0 16px rgba(253, 169, 41, 0.50),
                            0 0 40px rgba(253, 169, 41, 0.20);
    --glow-gold-lg:         0 0 24px rgba(253, 169, 41, 0.60),
                            0 0 60px rgba(253, 169, 41, 0.25),
                            0 0 100px rgba(253, 169, 41, 0.10);

    /* ----------------------------------------------------------
       BUTTON BASE TOKENS
    ---------------------------------------------------------- */
    --btn-primary-bg:       var(--gold-500);
    --btn-primary-bg-hover: var(--gold-400);
    --btn-primary-fg:       #020b12;
    --btn-primary-shadow:   var(--glow-gold-sm);
    --btn-primary-shadow-hover: var(--glow-gold-md);

    --btn-secondary-bg:     transparent;
    --btn-secondary-bg-hover: var(--cyan-alpha-10);
    --btn-secondary-fg:     var(--cyan-500);
    --btn-secondary-border: var(--cyan-500);
    --btn-secondary-shadow: var(--glow-cyan-sm);
    --btn-secondary-shadow-hover: var(--glow-cyan-md);

    --btn-radius:           var(--radius-full);
    --btn-pad-y:            12px;
    --btn-pad-x:            28px;
    --btn-font:             var(--font-heading);
    --btn-weight:           var(--weight-semibold);
    --btn-tracking:         var(--tracking-wide);
    --btn-transition:       all 0.22s ease;

    /* ----------------------------------------------------------
       SEMANTIC STATUS COLORS
    ---------------------------------------------------------- */
    --color-positive:       #00c864;   /* green — positive cash flow, opportunity */
    --color-positive-bg:    rgba(0, 200, 100, 0.10);
    --color-positive-border: rgba(0, 200, 100, 0.28);
    --color-negative:       #ff4842;   /* red — risk, negative values */
    --color-negative-bg:    rgba(255, 72, 66, 0.10);
    --color-negative-border: rgba(255, 72, 66, 0.22);
    --color-warning:        var(--gold-400);
    --color-purple:         rgba(180, 140, 255, 1);
    --color-purple-bg:      rgba(147, 100, 255, 0.10);
    --color-purple-border:  rgba(147, 100, 255, 0.28);
    --color-purple-accent:  rgba(147, 100, 255, 0.90);

    /* ----------------------------------------------------------
       ORIGINAL --ctrl-* TOKENS — PRESERVED (additive constraint)
    ---------------------------------------------------------- */

    /* Input control dimensions */
    --ctrl-pad-y:           12px;
    --ctrl-pad-x:           16px;
    --ctrl-radius:          999px;

    /* Input control colors */
    --ctrl-fg:              #eaf2f7;
    --ctrl-bg1:             rgba(255, 255, 255, 0.06);
    --ctrl-bg2:             rgba(255, 255, 255, 0.02);
    --ctrl-tint:            rgba(19, 65, 96, 0.35);

    /* Input control borders & focus ring */
    --ctrl-border:          rgba(253, 169, 41, 0.45);
    --ctrl-border-hover:    rgba(253, 169, 41, 0.75);
    --ctrl-ring:            rgba(253, 169, 41, 0.25);

    /* Input control disabled state */
    --ctrl-disabled:        .6;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: var(--weight-regular);
    line-height: var(--leading-normal);
    color: var(--text-primary);
    background: var(--bg-gradient);
    background-attachment: fixed;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   SCROLLBAR STYLING — DARK + CYAN THUMB
   ============================================================ */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(2, 11, 18, 0.80);
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb {
    background: var(--cyan-700);
    border-radius: var(--radius-full);
    border: 2px solid rgba(2, 11, 18, 0.80);
    transition: background 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--cyan-500);
    box-shadow: var(--glow-cyan-sm);
}

::-webkit-scrollbar-corner {
    background: transparent;
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--cyan-700) rgba(2, 11, 18, 0.80);
}

/* ============================================================
   ANIMATION KEYFRAMES
   ============================================================ */

/* Gold neon pulse — for primary buttons */
@keyframes btnNeonPulse {
    0%   { box-shadow: var(--glow-gold-sm); }
    50%  { box-shadow: var(--glow-gold-md); }
    100% { box-shadow: var(--glow-gold-sm); }
}

/* Float — subtle vertical oscillation */
@keyframes float {
    0%   { transform: translateY(0px); }
    50%  { transform: translateY(-8px); }
    100% { transform: translateY(0px); }
}

/* Bars — loading / EQ animation */
@keyframes bars {
    0%, 100% { transform: scaleY(0.4); }
    50%       { transform: scaleY(1.0); }
}

/* Sheen — shimmer sweep across surface */
@keyframes sheen {
    0%   { background-position: -200% center; }
    100% { background-position:  200% center; }
}

/* Scroll reveal — fade + lift in */
@keyframes scrollReveal {
    0% {
        opacity: 0;
        transform: translateY(24px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Cyan pulse — for secondary / accent elements */
@keyframes cyanPulse {
    0%   { box-shadow: var(--glow-cyan-sm); }
    50%  { box-shadow: var(--glow-cyan-md); }
    100% { box-shadow: var(--glow-cyan-sm); }
}

/* Fade in */
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ============================================================
   UTILITY CLASSES
   ============================================================ */

/* --- Glass Cards --- */
.glass-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-shadow);
    border-radius: var(--radius-lg);
    transition: background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.glass-card:hover {
    background: var(--glass-bg-hover);
    border-color: var(--glass-border-hover);
}

.glass-dark {
    background: var(--glass-dark-bg);
    border: 1px solid var(--glass-dark-border);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-dark-shadow);
    border-radius: var(--radius-lg);
    transition: background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.glass-dark:hover {
    border-color: var(--cyan-alpha-30);
    box-shadow: var(--glass-dark-shadow), var(--glow-cyan-sm);
}

/* --- Eyebrow Badge --- */
.eyebrow-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 14px;
    background: var(--cyan-alpha-10);
    border: 1px solid var(--cyan-alpha-30);
    border-radius: var(--radius-full);
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-widest);
    color: var(--cyan-500);
    text-transform: uppercase;
}

/* --- Metric Card --- */
.metric-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: var(--space-inner-md);
    background: var(--surface-card);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: border-color 0.22s ease, box-shadow 0.22s ease;
}

.metric-card:hover {
    border-color: var(--cyan-alpha-30);
    box-shadow: var(--glow-cyan-sm);
}

/* --- Buttons --- */
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: var(--btn-pad-y) var(--btn-pad-x);
    background: var(--btn-primary-bg);
    color: var(--btn-primary-fg);
    border: none;
    border-radius: var(--btn-radius);
    font-family: var(--btn-font);
    font-size: var(--text-base);
    font-weight: var(--btn-weight);
    letter-spacing: var(--btn-tracking);
    text-decoration: none;
    cursor: pointer;
    box-shadow: var(--btn-primary-shadow);
    transition: var(--btn-transition);
    animation: btnNeonPulse 3s ease-in-out infinite;
    white-space: nowrap;
    user-select: none;
    -webkit-user-select: none;
}

.btn-primary:hover,
.btn-primary:focus-visible {
    background: var(--btn-primary-bg-hover);
    box-shadow: var(--btn-primary-shadow-hover);
    transform: translateY(-1px);
    outline: none;
}

.btn-primary:active {
    transform: translateY(0);
    animation: none;
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: var(--btn-pad-y) var(--btn-pad-x);
    background: var(--btn-secondary-bg);
    color: var(--btn-secondary-fg);
    border: 1.5px solid var(--btn-secondary-border);
    border-radius: var(--btn-radius);
    font-family: var(--btn-font);
    font-size: var(--text-base);
    font-weight: var(--btn-weight);
    letter-spacing: var(--btn-tracking);
    text-decoration: none;
    cursor: pointer;
    box-shadow: var(--btn-secondary-shadow);
    transition: var(--btn-transition);
    white-space: nowrap;
    user-select: none;
    -webkit-user-select: none;
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
    background: var(--btn-secondary-bg-hover);
    box-shadow: var(--btn-secondary-shadow-hover);
    transform: translateY(-1px);
    outline: none;
}

.btn-secondary:active {
    transform: translateY(0);
}

/* --- Badge Pill --- */
.badge-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 12px;
    border-radius: var(--radius-full);
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    background: var(--gold-alpha-20);
    border: 1px solid var(--gold-alpha-30);
    color: var(--gold-400);
    text-transform: uppercase;
}

/* --- Title Variants --- */
.title-accent {
    font-family: var(--font-display);
    font-weight: var(--weight-black);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
    color: var(--gold-500);
    text-shadow: var(--glow-gold-sm);
}

.title-clean {
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
    color: var(--text-primary);
}

/* --- Data Value --- */
.data-value {
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    font-size: var(--text-2xl);
    color: var(--cyan-500);
    text-shadow: var(--glow-cyan-sm);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
}