/* =========================================================================
   Design tokens.

   Three layers, and the middle one is what makes new themes cheap:

   1. PRIMITIVES  -- the raw palette. Named for what they *are* (`--teal-600`),
      never for where they are used. Identical in every theme.
   2. SEMANTIC    -- named for what they *mean* (`--surface`, `--text-muted`,
      `--brand`). Every theme must define the whole set. This is the only
      layer components are allowed to reference.
   3. SCALES      -- spacing, radius, type, elevation, motion. Theme-independent.

   A component that reaches past the semantic layer to a primitive is a bug:
   it will look correct in the theme it was written against and wrong in
   every other, which is exactly the failure the indirection prevents.

   Adding a theme: copy a `[data-theme]` block, restate the semantic set, and
   add a row to `core/theming.py`. No component changes.
   ========================================================================= */

:root {
  /* ---- 1. PRIMITIVES ------------------------------------------------- */

  /* Emerald Abyss, the supplied brand ramp. */
  --mist:    #C4CFCE;
  --teal:    #1A998F;
  --sea:     #187F87;
  --deep:    #155665;
  --abyss:   #102E3C;

  /* Tints and shades derived from the ramp, so hovers, borders and washes
     stay in-family instead of drifting to a generic grey. */
  --mist-50:  #F2F5F5;
  --mist-100: #E4EAEA;
  --mist-200: #D4DDDC;
  --teal-300: #6FC4BC;
  --teal-400: #35AFA5;
  --teal-600: #14837B;
  /* #187F87 as supplied is 4.33:1 on the Daylight canvas -- just under AA
     for the 13px link text these tables are made of. --sea-600 is the same
     hue two steps down, used for --brand; --sea itself stays for fills. */
  --sea-600:  #16767E;
  --sea-700:  #146A71;
  --deep-800: #113F4C;
  --abyss-900: #0B2028;
  --abyss-950: #071519;

  /* Status hues. Chosen to sit beside the teals without clashing -- a pure
     red next to #1A998F vibrates; these are desaturated to match. */
  --amber-100: #FBF0DC; --amber-500: #B0761A; --amber-300: #E8B457;
  --amber-600: #8F6014;  /* amber-500 is 3.85:1 on white; this is 5.45:1 */
  --rose-100:  #FAE7E4; --rose-500:  #B3453A; --rose-300:  #E08a80;
  --green-100: #E1F1E7; --green-500: #1F7A46; --green-300: #5CB683;

  --white: #FFFFFF;

  /* ---- Renascent house palette --------------------------------------
     Sampled from RWM_Logo.png. The purple here is the exact value of the
     logo's edge rules (#67307B) and the amber sits beside the emblem's gold,
     which is why a UI built from this ramp stops fighting the letterhead. */
  --ink:    #2C3868;   /* deep indigo    */
  --steel:  #377DB2;   /* steel blue     */
  --gold:   #FFBE3D;   /* amber          */
  --plum:   #67307B;   /* purple         */
  --ash:    #EEEEEE;   /* light neutral  */

  /* Derived ramp, so hovers, borders and washes stay in-family. */
  --ink-50:  #F2F3F8; --ink-100: #E3E6F0; --ink-200: #C8CDE1;
  --ink-300: #97A0C2; --ink-600: #242D54; --ink-700: #1C2342;
  --ink-800: #141A31; --ink-900: #0E1225; --ink-950: #080B17;
  --steel-200: #C3DCEE; --steel-300: #8FBFE0; --steel-400: #5C9FD1;
  --steel-600: #2F6B99; --steel-700: #27587D;
  --gold-100: #FFF3D6; --gold-200: #FFE6AC; --gold-300: #FFD478;
  --gold-600: #B4801B; --gold-700: #8A6113;
  --plum-200: #E0CCE8; --plum-300: #B98FC7; --plum-400: #9963AD;
  --plum-600: #55276A; --plum-700: #431E54;

  /* ---- 3. SCALES ----------------------------------------------------- */

  /* 4px base. Every margin and padding in the app comes from here, which is
     what stops the "1.15rem here, 18px there" drift that reads as amateur. */
  --sp-1: 0.25rem; --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;

  --radius-sm: 5px; --radius: 9px; --radius-lg: 14px; --radius-pill: 999px;

  --text-xs: 0.75rem;  --text-sm: 0.8125rem; --text-base: 0.9375rem;
  --text-md: 1.0625rem; --text-lg: 1.3125rem; --text-xl: 1.75rem;
  --text-2xl: 2.25rem;

  --font-sans: "Inter var", "Inter", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  /* Tabular figures for money, dates and counts, so columns align. */
  --numeric: "tnum" 1, "lnum" 1;

  /* Fluid where it earns it. A stat number that is 2.25rem on a 27" monitor
     and 2.25rem on a phone is wrong in one of the two places; these scale
     with the viewport and stop at both ends. */
  --text-display: clamp(1.5rem, 1.05rem + 1.6vw, 2.25rem);
  --text-stat:    clamp(1.5rem, 1.2rem + 1.1vw, 2rem);
  --text-hero:    clamp(1.3125rem, 1.05rem + 0.9vw, 1.75rem);

  /* Shell metrics. Overridden per breakpoint at the bottom of base.css --
     declared here so there is one place to read the shell's geometry. */
  --sidebar-w: 15.5rem;
  --rail-w: 4.25rem;
  --topbar-h: 3.75rem;
  --content-max: 82rem;
  --gutter: var(--sp-5);

  /* Motion. One curve and three durations, referenced everywhere. */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 110ms; --dur: 200ms; --dur-slow: 380ms;
}

/* =========================================================================
   2. SEMANTIC -- theme: Daylight
   ========================================================================= */
[data-theme="light"] {
  color-scheme: light;

  --canvas:          var(--mist-50);
  --surface:         var(--white);
  --surface-raised:  var(--white);
  --surface-sunken:  var(--mist-100);
  --surface-hover:   var(--mist-50);
  --surface-inverse: var(--abyss);

  --text:            var(--abyss);
  --text-muted:      #5A6F75;
  --text-subtle:     #82969C;
  --text-inverse:    var(--white);
  --text-on-brand:   var(--white);
  --text-on-danger:  var(--white);

  --border:          var(--mist-200);
  --border-strong:   var(--mist);
  --border-focus:    var(--sea);

  --brand:           var(--sea-600);
  --brand-hover:     var(--teal-600);
  --brand-active:    var(--sea-700);
  --brand-wash:      #E8F3F3;
  --brand-contrast:  var(--abyss);

  --accent:          var(--teal);
  --accent-cool:     var(--deep);

  --ok:      var(--green-500);   --ok-wash:      var(--green-100);
  --warn:    var(--amber-600);   --warn-wash:    var(--amber-100);
  --danger:  var(--rose-500);    --danger-wash:  var(--rose-100);
  --info:    var(--deep);        --info-wash:    #E8F0F3;

  --shadow-sm: 0 1px 2px rgb(16 46 60 / 0.06), 0 1px 1px rgb(16 46 60 / 0.04);
  --shadow:    0 2px 4px rgb(16 46 60 / 0.05), 0 8px 20px -8px rgb(16 46 60 / 0.12);
  --shadow-lg: 0 8px 24px -6px rgb(16 46 60 / 0.16), 0 24px 48px -12px rgb(16 46 60 / 0.18);

  --sidebar-bg:      var(--abyss);
  --sidebar-text:    #A8BFC4;
  --sidebar-active:  var(--white);
  --sidebar-hover:   rgb(255 255 255 / 0.06);
  --sidebar-border:  rgb(255 255 255 / 0.08);

  --skeleton:        var(--mist-100);
  --skeleton-shine:  var(--white);
  --overlay:         rgb(16 46 60 / 0.45);
}

/* =========================================================================
   2. SEMANTIC -- theme: Emerald Abyss
   Not an inversion. Surfaces step *up* from the canvas as they come forward,
   text contrast is capped below pure white (which glares on a dark field),
   and the brand shifts to the lighter teal because #187F87 on #0B2028 fails
   contrast for small text.
   ========================================================================= */
[data-theme="dark"] {
  color-scheme: dark;

  --canvas:          var(--abyss-950);
  --surface:         var(--abyss-900);
  --surface-raised:  #0F2932;
  --surface-sunken:  #061114;
  --surface-hover:   #12303A;
  --surface-inverse: var(--mist-50);

  --text:            #E4EDEE;
  --text-muted:      #9DB2B7;
  --text-subtle:     #6E868D;
  --text-inverse:    var(--abyss);
  --text-on-brand:   var(--abyss-950);
  --text-on-danger:  var(--abyss-950);

  --border:          #1B3E49;
  --border-strong:   #29525F;
  --border-focus:    var(--teal-400);

  --brand:           var(--teal);
  --brand-hover:     var(--teal-300);
  --brand-active:    var(--teal-400);
  /* Darker than the card, not lighter. #1A998F is a mid-tone, so a wash that
     lifts the background at any alpha drops .pill-brand below AA; the status
     hues here are light enough that they do not have that problem. */
  --brand-wash:      #061A1A;
  --brand-contrast:  var(--white);

  --accent:          var(--teal-300);
  --accent-cool:     var(--teal-400);

  --ok:      var(--green-300);  --ok-wash:      rgb(92 182 131 / 0.14);
  --warn:    var(--amber-300);  --warn-wash:    rgb(232 180 87 / 0.14);
  --danger:  var(--rose-300);   --danger-wash:  rgb(224 138 128 / 0.15);
  --info:    var(--teal-300);   --info-wash:    rgb(111 196 188 / 0.13);

  /* Shadows barely read on a dark canvas, so depth comes mostly from the
     surface ramp; these stay subtle rather than becoming black smudges. */
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow:    0 2px 6px rgb(0 0 0 / 0.35), 0 10px 24px -10px rgb(0 0 0 / 0.5);
  --shadow-lg: 0 12px 32px -8px rgb(0 0 0 / 0.6);

  --sidebar-bg:      #071519;
  --sidebar-text:    #8CA6AC;
  --sidebar-active:  var(--white);
  --sidebar-hover:   rgb(255 255 255 / 0.05);
  --sidebar-border:  rgb(255 255 255 / 0.06);

  --skeleton:        #12303A;
  --skeleton-shine:  #1B3E49;
  --overlay:         rgb(4 12 15 / 0.66);
}

/* =========================================================================
   2. SEMANTIC -- theme: Meridian
   The house palette, straight from the logo: indigo sidebar, steel-blue
   brand, amber for attention. #EEEEEE is used as supplied for the canvas so
   white cards separate from it without needing a border to do the work.

   The brand is `--steel-600`, not `--steel` itself: #377DB2 on white is
   about 3.9:1, which fails AA for the 13px link text that fills these
   tables. The lighter #377DB2 survives as `--accent-cool`, for fills and
   borders where contrast is not the question being asked.
   ========================================================================= */
[data-theme="indigo"] {
  color-scheme: light;

  --canvas:          var(--ash);
  --surface:         var(--white);
  --surface-raised:  var(--white);
  --surface-sunken:  var(--ink-100);
  --surface-hover:   var(--ink-50);
  --surface-inverse: var(--ink);

  --text:            var(--ink);
  --text-muted:      #565F88;
  --text-subtle:     #7A83A6;
  --text-inverse:    var(--white);
  --text-on-brand:   var(--white);
  --text-on-danger:  var(--white);

  --border:          var(--ink-200);
  --border-strong:   var(--ink-300);
  --border-focus:    var(--steel-600);

  --brand:           var(--steel-600);
  --brand-hover:     var(--steel-700);
  --brand-active:    var(--ink-600);
  --brand-wash:      #E9F2F9;
  --brand-contrast:  var(--ink);

  --accent:          var(--gold);
  --accent-cool:     var(--steel);

  --ok:      var(--green-500);  --ok-wash:      var(--green-100);
  --warn:    var(--gold-700);   --warn-wash:    var(--gold-100);
  --danger:  var(--rose-500);   --danger-wash:  var(--rose-100);
  --info:    var(--plum);       --info-wash:    #F1E8F5;

  --shadow-sm: 0 1px 2px rgb(20 26 49 / 0.07), 0 1px 1px rgb(20 26 49 / 0.04);
  --shadow:    0 2px 4px rgb(20 26 49 / 0.06), 0 8px 20px -8px rgb(20 26 49 / 0.14);
  --shadow-lg: 0 8px 24px -6px rgb(20 26 49 / 0.18), 0 24px 48px -12px rgb(20 26 49 / 0.2);

  --sidebar-bg:      var(--ink);
  --sidebar-text:    #A7AFD2;
  --sidebar-active:  var(--white);
  --sidebar-hover:   rgb(255 255 255 / 0.08);
  --sidebar-border:  rgb(255 255 255 / 0.1);

  --skeleton:        var(--ink-100);
  --skeleton-shine:  var(--white);
  --overlay:         rgb(20 26 49 / 0.46);
}

/* =========================================================================
   2. SEMANTIC -- theme: Nocturne
   The house palette after dark. Same rule as Emerald Abyss: surfaces step up
   from the canvas rather than the text stepping down to pure white, and the
   brand lightens to `--steel-400` because #2F6B99 on #080B17 is unreadable.
   Amber is the one colour that needs no adjustment -- gold on deep indigo is
   the pairing the logo already makes.
   ========================================================================= */
[data-theme="indigo-dark"] {
  color-scheme: dark;

  --canvas:          var(--ink-950);
  --surface:         var(--ink-900);
  --surface-raised:  var(--ink-800);
  --surface-sunken:  #05070E;
  --surface-hover:   var(--ink-700);
  --surface-inverse: var(--ink-50);

  --text:            #E7EAF6;
  --text-muted:      #A2A9CA;
  --text-subtle:     #737BA1;
  --text-inverse:    var(--ink);
  --text-on-brand:   var(--ink-950);
  --text-on-danger:  var(--ink-950);

  --border:          #232B4D;
  --border-strong:   #343D65;
  --border-focus:    var(--steel-400);

  --brand:           var(--steel-400);
  --brand-hover:     var(--steel-300);
  --brand-active:    var(--steel-200);
  --brand-wash:      rgb(92 159 209 / 0.15);
  --brand-contrast:  var(--white);

  --accent:          var(--gold);
  --accent-cool:     var(--steel-300);

  --ok:      var(--green-300);  --ok-wash:      rgb(92 182 131 / 0.15);
  --warn:    var(--gold-300);   --warn-wash:    rgb(255 190 61 / 0.14);
  --danger:  var(--rose-300);   --danger-wash:  rgb(224 138 128 / 0.15);
  --info:    var(--plum-300);   --info-wash:    rgb(185 143 199 / 0.16);

  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.45);
  --shadow:    0 2px 6px rgb(0 0 0 / 0.4), 0 10px 24px -10px rgb(0 0 0 / 0.55);
  --shadow-lg: 0 12px 32px -8px rgb(0 0 0 / 0.65);

  --sidebar-bg:      #05070E;
  --sidebar-text:    #9AA2C4;
  --sidebar-active:  var(--white);
  --sidebar-hover:   rgb(255 255 255 / 0.06);
  --sidebar-border:  rgb(255 255 255 / 0.07);

  --skeleton:        var(--ink-700);
  --skeleton-shine:  #2A3358;
  --overlay:         rgb(4 6 14 / 0.7);
}