/* ============================================================================
   krillos-theme.css — KrillOS design-system token foundation
   ----------------------------------------------------------------------------
   The reusable theme the dashboard, landing page, and future Krill products
   inherit. STEP 2: token DEFINITIONS ONLY. No component rules read these yet,
   so loading this file changes nothing visually.

   THEME MECHANISM — note the attribute:
     KrillOS uses its OWN attribute `data-krill-theme` (NOT `data-theme`).
     `data-theme` is owned by the loaded Pico CSS; setting it to "dark" would
     activate Pico's dark color-scheme and alter the page. Decoupling keeps Pico
     on light (identical rendering today) while KrillOS defaults to dark.

   DARK is the PRIMARY/DEFAULT context (brand: dark is primary) → it lives on
   :root. LIGHT is the secondary override (explicit data-krill-theme="light", or
   the OS preference when the user hasn't pinned a theme).

   Brand anchors (authoritative): Orange #E85F2A · Black #050505 · Night #0B0B0B
   · White #FAFAFA. Orange is the ONLY saturated structural color — reserved for
   action/focus/emphasis; all structure is WARM grayscale (Q2: warm in both
   modes). Depth in dark = layered near-blacks + deepened shadow + a 1px top
   highlight (--elevation-highlight), never flat black.
   ============================================================================ */

/* ─────────────────────────────────────────────────────────────────────────
   DARK — PRIMARY / DEFAULT
   ───────────────────────────────────────────────────────────────────────── */
:root {
  /* Surfaces — elevation reads LIGHTER as it raises (layered near-blacks) */
  --bg:                       #050505;   /* app canvas (brand Black) */
  --surface-subtle:           #0A0908;   /* recessed fills: input wells, table strips, hovers */
  --surface:                  #0F0E0B;   /* default panels / sidebar (warm Night) */
  --surface-raised:           #181611;   /* cards (3px orange border), modals, dropdowns, popovers */

  /* Text — warm */
  --text:                     #FAFAF7;   /* primary (brand White, warm) */
  --text-muted:               #AEA99E;   /* secondary */
  --text-subtle:              #767066;   /* faint / placeholder / captions */
  --text-inverse:             #1C1A15;   /* text on an inverted/light chip */

  /* Borders — hairlines lighter than surface */
  --border:                   #221F19;
  --border-strong:            #343029;

  /* Accent — brand orange, the only saturated structural color */
  --accent:                   #E85F2A;
  --accent-hover:             #F26A33;   /* brighten on dark hover */
  --accent-contrast:          #1A1A1A;   /* Q1: near-black text on orange (small UI labels, WCAG AA) */
  --accent-contrast-display:  #FAFAFA;   /* Q1: white on orange for logo / large display only */
  --accent-ink:               #F26A33;   /* link/small-text orange — legible on near-black */
  --accent-subtle:            rgba(232, 95, 42, 0.12);  /* orange tint fills (active wash, badges) */

  /* Semantic states — the only allowed non-orange hues (status communication) */
  --success:                  #34D399;
  --success-bg:               #0C2A20;
  --warning:                  #FBBF24;
  --warning-bg:               #2A2008;
  --danger:                   #F87171;
  --danger-bg:                #2C1212;
  --info:                     #60A5FA;
  --info-bg:                  #0E1E33;
  --success-border:           #1F5C46;
  --warning-border:           #574311;
  --danger-border:            #5E2222;
  --info-border:              #244B6E;

  /* categorical palette — distinct hues for loan types / categories (own ramp,
     NOT semantic). solid = border/dot/accent/badge-text; -bg = badge wash. DARK. */
  --cat-blue:   #60A5FA;  --cat-blue-bg:   #11233F;
  --cat-green:  #34D399;  --cat-green-bg:  #0C2A20;
  --cat-amber:  #FBBF24;  --cat-amber-bg:  #2A2008;
  --cat-red:    #F87171;  --cat-red-bg:    #2C1212;
  --cat-purple: #C4B5FD;  --cat-purple-bg: #281C45;
  --cat-teal:   #2DD4BF;  --cat-teal-bg:   #0B2E2B;
  --cat-orange: #FDBA74;  --cat-orange-bg: #38240F;
  --cat-pink:   #F9A8D4;  --cat-pink-bg:   #3A1228;
  --cat-cyan:   #67E8F9;  --cat-cyan-bg:   #0A2E38;
  --cat-indigo: #A5B4FC;  --cat-indigo-bg: #1E1B4B;

  /* Sidebar — existing tokens, dark warm values (active item = orange accent) */
  --sidebar-bg:               #0F0E0B;
  --sidebar-border:           #221F19;
  --sidebar-fg:               #CBC7BC;
  --sidebar-fg-muted:         #8E8A7E;
  --sidebar-hover-bg:         #16140F;
  --sidebar-active-bg:        #221F19;
  --sidebar-section-fg:       #767066;

  /* Shadows — DEEPEN in dark (pure black, high alpha) so cards still separate */
  --shadow-sm:                0 1px 3px rgba(0, 0, 0, 0.60);
  --shadow-md:                0 6px 16px rgba(0, 0, 0, 0.70);
  --shadow-lg:                0 24px 70px rgba(0, 0, 0, 0.85);
  --overlay:                  rgba(0, 0, 0, 0.70);   /* modal backdrop */
  --focus-ring:               rgba(232, 95, 42, 0.45);  /* orange focus ring (both modes) */

  /* Dark-depth convention: raised surfaces carry a 1px top highlight, because a
     pure drop-shadow is near-invisible on #050505 — depth = lighter surface +
     deeper ambient shadow + this inset highlight together. */
  --elevation-highlight:      inset 0 1px 0 rgba(255, 255, 255, 0.04);

  /* Scrollbars — quiet, blend into the canvas. Warm dark thumb just above the
     surface (no white/gray separator); track transparent. Brightens on hover. */
  --scrollbar-thumb:          #2A2722;
  --scrollbar-thumb-hover:    #3A352D;
}

/* ─────────────────────────────────────────────────────────────────────────
   LIGHT — secondary override (explicit opt-in). Warm neutrals (Q2).
   KEEP IN SYNC with the @media block below.
   ───────────────────────────────────────────────────────────────────────── */
:root[data-krill-theme="light"] {
  --bg:                       #F3F1EB;
  --surface-subtle:           #F7F5EF;
  --surface:                  #FCFBF7;
  --surface-raised:           #FFFFFF;

  --text:                     #1C1A15;
  --text-muted:               #6B6760;
  --text-subtle:              #9A958A;
  --text-inverse:             #FAFAF7;

  --border:                   #E4E1D7;
  --border-strong:            #D0CCBF;

  --accent:                   #E85F2A;
  --accent-hover:             #CF5223;   /* darken on light hover */
  --accent-contrast:          #1A1A1A;
  --accent-contrast-display:  #FAFAFA;
  --accent-ink:               #C2410C;   /* link ink — AA 4.5:1 on warm-white */
  --accent-subtle:            #FBEFE8;

  --success:                  #047857;
  --success-bg:               #ECF7EF;
  --warning:                  #B45309;
  --warning-bg:               #FBF1DD;
  --danger:                   #DC2626;
  --danger-bg:                #FBEAE7;
  --info:                     #2563EB;
  --info-bg:                  #EAF1FC;
  --success-border:           #6EE7B7;
  --warning-border:           #FDE68A;
  --danger-border:            #FCA5A5;
  --info-border:              #7DD3FC;

  /* categorical palette — LIGHT (today's distinct hues). */
  --cat-blue:   #1D4ED8;  --cat-blue-bg:   #DBEAFE;
  --cat-green:  #047857;  --cat-green-bg:  #D1FAE5;
  --cat-amber:  #B45309;  --cat-amber-bg:  #FEF3C7;
  --cat-red:    #B91C1C;  --cat-red-bg:    #FEE2E2;
  --cat-purple: #6D28D9;  --cat-purple-bg: #EDE9FE;
  --cat-teal:   #0E7490;  --cat-teal-bg:   #CCFBF1;
  --cat-orange: #C2410C;  --cat-orange-bg: #FFEDD5;
  --cat-pink:   #BE185D;  --cat-pink-bg:   #FCE7F3;
  --cat-cyan:   #0891B2;  --cat-cyan-bg:   #CFFAFE;
  --cat-indigo: #4338CA;  --cat-indigo-bg: #E0E7FF;

  --sidebar-bg:               #F7F5EF;
  --sidebar-border:           #E4E1D7;
  --sidebar-fg:               #3B382F;
  --sidebar-fg-muted:         #6B6760;
  --sidebar-hover-bg:         #EDEAE0;
  --sidebar-active-bg:        #E4E1D7;
  --sidebar-section-fg:       #6B6760;

  --shadow-sm:                0 1px 3px rgba(20, 16, 8, 0.08);
  --shadow-md:                0 4px 12px rgba(20, 16, 8, 0.12);
  --shadow-lg:                0 20px 60px rgba(20, 16, 8, 0.18);
  --overlay:                  rgba(28, 26, 21, 0.45);
  --focus-ring:               rgba(232, 95, 42, 0.45);
  --elevation-highlight:      inset 0 1px 0 rgba(255, 255, 255, 0.65);

  /* Scrollbars — subtle light-gray thumb that blends on warm-white; not the dark color. */
  --scrollbar-thumb:          #D5D1C7;
  --scrollbar-thumb-hover:    #BFBAAD;
}

/* ─────────────────────────────────────────────────────────────────────────
   OS preference — apply LIGHT only when the user hasn't pinned a theme.
   (Mirror of the [data-krill-theme="light"] block — keep the two in sync.)
   ───────────────────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: light) {
  :root:not([data-krill-theme]) {
    --bg:                       #F3F1EB;
    --surface-subtle:           #F7F5EF;
    --surface:                  #FCFBF7;
    --surface-raised:           #FFFFFF;

    --text:                     #1C1A15;
    --text-muted:               #6B6760;
    --text-subtle:              #9A958A;
    --text-inverse:             #FAFAF7;

    --border:                   #E4E1D7;
    --border-strong:            #D0CCBF;

    --accent:                   #E85F2A;
    --accent-hover:             #CF5223;
    --accent-contrast:          #1A1A1A;
    --accent-contrast-display:  #FAFAFA;
    --accent-ink:               #C2410C;   /* link ink — AA 4.5:1 on warm-white */
    --accent-subtle:            #FBEFE8;

    --success:                  #047857;
    --success-bg:               #ECF7EF;
    --warning:                  #B45309;
    --warning-bg:               #FBF1DD;
    --danger:                   #DC2626;
    --danger-bg:                #FBEAE7;
    --info:                     #2563EB;
    --info-bg:                  #EAF1FC;
    --success-border:           #6EE7B7;
    --warning-border:           #FDE68A;
    --danger-border:            #FCA5A5;
    --info-border:              #7DD3FC;

    /* categorical palette — LIGHT (OS-preference block). */
    --cat-blue:   #1D4ED8;  --cat-blue-bg:   #DBEAFE;
    --cat-green:  #047857;  --cat-green-bg:  #D1FAE5;
    --cat-amber:  #B45309;  --cat-amber-bg:  #FEF3C7;
    --cat-red:    #B91C1C;  --cat-red-bg:    #FEE2E2;
    --cat-purple: #6D28D9;  --cat-purple-bg: #EDE9FE;
    --cat-teal:   #0E7490;  --cat-teal-bg:   #CCFBF1;
    --cat-orange: #C2410C;  --cat-orange-bg: #FFEDD5;
    --cat-pink:   #BE185D;  --cat-pink-bg:   #FCE7F3;
    --cat-cyan:   #0891B2;  --cat-cyan-bg:   #CFFAFE;
    --cat-indigo: #4338CA;  --cat-indigo-bg: #E0E7FF;

    --sidebar-bg:               #F7F5EF;
    --sidebar-border:           #E4E1D7;
    --sidebar-fg:               #3B382F;
    --sidebar-fg-muted:         #6B6760;
    --sidebar-hover-bg:         #EDEAE0;
    --sidebar-active-bg:        #E4E1D7;
    --sidebar-section-fg:       #6B6760;

    --shadow-sm:                0 1px 3px rgba(20, 16, 8, 0.08);
    --shadow-md:                0 4px 12px rgba(20, 16, 8, 0.12);
    --shadow-lg:                0 20px 60px rgba(20, 16, 8, 0.18);
    --overlay:                  rgba(28, 26, 21, 0.45);
    --focus-ring:               rgba(232, 95, 42, 0.45);
    --elevation-highlight:      inset 0 1px 0 rgba(255, 255, 255, 0.65);

    /* Scrollbars — subtle light-gray thumb that blends on warm-white. */
    --scrollbar-thumb:          #D5D1C7;
    --scrollbar-thumb-hover:    #BFBAAD;
  }
}