/* ============================================================================
   Little Rascal — app.css
   Chroma Studio palette. Dark defaults, [data-theme="light"] overrides.
   ============================================================================ */


/* --------------------------------------------------------------------------
   Tokens
-------------------------------------------------------------------------- */
:root {
    /* Palette (theme-invariant) */
    --palette-1: #2B6CB0;
    --palette-2: #B06F2B;
    --palette-3: #75A0CC;
    --palette-4: #C6D3E1;
    --palette-5: #0D2D4E;

    --color-surface:    #C6D3E1;
    --color-ink:        #0D2D4E;
    --gradient-primary: linear-gradient(135deg, var(--palette-1), var(--palette-3));

    /* Structural */
    --radius:     22px;
    --r-card:     4px;
    --transition: 0.35s ease;

    --font-heading: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-body:    'Maven Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --space-2xs: 4px;
    --space-xs:  8px;
    --space-sm:  12px;
    --space-md:  16px;
    --space-lg:  24px;
    --space-xl:  32px;
    --space-2xl: 48px;
    --space-3xl: 64px;
    --space-4xl: 96px;

    /* --- Dark theme (default) --- */
    --color-primary:   #B06F2B;
    --color-secondary: #2B6CB0;
    --color-accent:    #75A0CC;

    --bg:     #0D2D4E;
    --bg-alt: #123A62;
    --gradient-bg: linear-gradient(135deg, #081E37, var(--palette-5), #143A61, var(--palette-5));

    --text:       #F7FAFC;
    --text-muted: #C6D3E1;

    --surface:        rgba(198, 211, 225, 0.08);
    --surface-hover:  rgba(198, 211, 225, 0.14);
    --surface-border: rgba(198, 211, 225, 0.18);

    --nav-bg:    rgba(13, 45, 78, 0.70);
    --band-tint: rgba(198, 211, 225, 0.04);
    --stat-bg:   rgba(198, 211, 225, 0.06);
    --scrim:     rgba(3, 12, 25, 0.55);

    --shadow:         0 25px 70px rgba(0, 0, 0, 0.30);
    --glow-btn:       0 10px 25px rgba(43, 108, 176, 0.25);
    --glow-btn-hover: 0 18px 40px rgba(43, 108, 176, 0.35);
    --glow-icon:      0 6px 16px rgba(43, 108, 176, 0.25);
    --ambient-alpha:  1;

    /* Hero canvas grid-pulse tokens (dark theme). Copper picks up the
       .logo accent; dots use the light surface tone at ~10% alpha so
       they don't compete with foreground text. Read by /js/hero-bg.js
       via getComputedStyle — MUST be rgb()/rgba() strings, not hex. */
    --grid-dot:   rgba(198, 211, 225, 0.10);
    --grid-pulse: rgba(176, 111, 43, 0.85);
    --grid-halo:  rgba(176, 111, 43, 0.24);
}

/* --- Light theme --- */
:root[data-theme="light"] {
    --color-primary:   #8B5624;
    --color-secondary: #1E4F8A;
    --color-accent:    #1E4F8A;

    --bg:     #F5F5F2;
    --bg-alt: #ECEBE5;
    --gradient-bg: linear-gradient(135deg, #F0F2F5, #F5F5F2, #EAEDEF, #F5F5F2);

    --text:       #0D2D4E;
    --text-muted: #4A5568;

    --surface:        rgba(13, 45, 78, 0.04);
    --surface-hover:  rgba(13, 45, 78, 0.08);
    --surface-border: rgba(13, 45, 78, 0.14);

    --nav-bg:    rgba(255, 255, 255, 0.78);
    --band-tint: rgba(13, 45, 78, 0.03);
    --stat-bg:   rgba(13, 45, 78, 0.04);
    --scrim:     rgba(13, 45, 78, 0.35);

    --shadow:         0 12px 40px rgba(13, 45, 78, 0.12);
    --glow-btn:       0 8px 20px rgba(43, 108, 176, 0.18);
    --glow-btn-hover: 0 14px 32px rgba(43, 108, 176, 0.24);
    --glow-icon:      0 4px 12px rgba(43, 108, 176, 0.18);
    --ambient-alpha:  0.35;

    /* Hero canvas grid-pulse tokens (light theme). Navy accent so
       pulses carry enough contrast against the near-white background;
       dots use navy at ~14% alpha (WCAG-safe against .card surface). */
    --grid-dot:   rgba(13, 45, 78, 0.14);
    --grid-pulse: rgba(30, 79, 138, 0.85);
    --grid-halo:  rgba(30, 79, 138, 0.22);
}


/* --------------------------------------------------------------------------
   Fonts (TYP-002, TYP-009)
-------------------------------------------------------------------------- */
@font-face {
    font-family: 'Nunito';
    src: url('../fonts/nunito-var.woff2') format('woff2-variations');
    font-weight: 200 1000;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Maven Pro';
    src: url('../fonts/maven-pro-var.woff2') format('woff2-variations');
    font-weight: 400 900;
    font-style: normal;
    font-display: swap;
}