/* ============================================================================
   KOREVRA DeLaw — Design Tokens & Theming
   Live-themeable via CSS custom properties (Branding & Customization module
   writes to :root at runtime). Light-first with a full dark theme.
   ============================================================================ */

:root {
  /* ---- Brand (overridable by Branding module) ---- */
  --brand-h: 244;                 /* hue   */
  --brand-s: 62%;                 /* sat   */
  --brand-ink: #101935;           /* sidebar / deep brand */
  --brand-ink-2: #161f42;
  --brand-ink-3: #1d2750;
  --brand-50:  #eef0fb;
  --brand-100: #dfe2f8;
  --brand-200: #c2c7f1;
  --brand-300: #9aa1e8;
  --brand-400: #6e76dd;
  --brand-500: #4b50e6;           /* primary interactive */
  --brand-600: #3a3fb6;
  --brand-700: #2f3492;
  --brand-800: #262a73;
  --brand-900: #14123a;

  /* ---- Gold / "justice" accent (overridable) ---- */
  --gold-300: #e6d29a;
  --gold-400: #d8bd6f;
  --gold-500: #c9a24b;
  --gold-600: #866a1f;           /* gold TEXT ink: 5.1 on white (was #a9842f, 3.48) */
  --gold-700: #6e5618;

  /* ---- Semantic ---- */
  /* the -600 steps are TEXT-ONLY inks (never fills): deepened for AA — #0f8557
     measured 4.50 on --surface-2 and #c2740d only 3.29 on --warn-50. */
  /* the -500 fills carry white text (buttons, solid badges): #0d7f54 / #c4780e / #cf2f2f / #2a6cd6 measured
     5.0 / 3.5 / 5.1 / 5.0 under white; warn stays amber, so white on it is for LARGE text only — small
     text on a warn fill uses --ink (see ui.css .btn-warn) */
  --success-50:#e7f7ef; --success-500:#0d7f54; --success-600:#0c7a50; --success-700:#0b6e48;
  --warn-50:#fdf3e2;    --warn-500:#c4780e;    --warn-600:#9a5f06;
  --danger-50:#fdecec;  --danger-500:#cf2f2f;  --danger-600:#bd2727;
  /* soft accent "washes" for gradient callout cards — theme-aware so they never go light-on-light in dark mode */
  --wash-violet:#f1eafc; --wash-red:#fdecec; --wash-gold:#fdf6e8; --wash-green:#e9f7f0;
  --info-50:#e8f1fe;    --info-500:#2a6cd6;    --info-600:#1f5bc0;
  /* text-only inks: what words and icons use when they are brand/semantic coloured. In the light
     theme they are the -600 inks (AA on every light surface); the dark theme swaps them for light
     tints. Fills (buttons, badges, bars) keep the -500/-600 tokens in both themes. */
  --brand-text: var(--brand-600); --brand-text-strong: var(--brand-700); --brand-accent: var(--brand-500);
  --success-text: var(--success-600); --warn-text: var(--warn-600); --danger-text: var(--danger-600); --info-text: var(--info-600);
  --gold-text: var(--gold-600);
  --teal-500:#119a9a;   --violet-500:#7c4ddb;  --pink-500:#d4519a;

  /* ---- Neutral / canvas (light) ---- */
  --bg:        #f5f6fb;
  --bg-tint:   #eef0f7;
  --surface:   #ffffff;
  --surface-2: #fafbfe;
  --surface-3: #f3f4fa;
  --hover:     #f1f2f9;
  --line:      #e6e8f0;
  --line-2:    #eef0f6;
  --ink:       #0f1729;   /* primary text */
  --ink-2:     #44506b;   /* secondary */
  /* muted/faint inks are calibrated against the DARKEST light surface they land
     on, not #fff: #5d6884 measured only 4.48 on the brand-tinted row (228,229,249)
     and #6f7892 only 3.92 on the notification hover tint (241,241,253). */
  --ink-3:     #56617c;   /* muted  — 4.97 on (228,229,249), 6.18 on #fff */
  --ink-4:     #616b86;   /* faint  — 4.73 on (241,241,253), 5.32 on #fff */
  --on-brand:  #ffffff;
  --chrome-muted: #9ba4cc;        /* muted text on the sidebar chrome: 5.6 on #161f42, 4.6 on the emerald #0a2c22 */

  /* ---- Effects ---- */
  --radius-xs: 6px;
  --radius-sm: 9px;
  --radius:    13px;
  --radius-lg: 18px;
  --radius-xl: 26px;
  --shadow-xs: 0 1px 2px rgba(16,25,53,.06);
  --shadow-sm: 0 1px 3px rgba(16,25,53,.08), 0 1px 2px rgba(16,25,53,.04);
  --shadow:    0 6px 22px -8px rgba(16,25,53,.18), 0 2px 6px rgba(16,25,53,.06);
  --shadow-lg: 0 24px 60px -18px rgba(16,25,53,.32), 0 8px 20px -12px rgba(16,25,53,.18);
  --shadow-gold: 0 8px 26px -10px rgba(201,162,75,.5);
  --ring: 0 0 0 3px hsla(var(--brand-h),80%,62%,.28);

  /* ---- Type ---- (Inter, Fraunces and JetBrains Mono are self-hosted since v104: assets/css/fonts.css, loaded
     before this file and written by tools/fetch-fonts.mjs) */
  --font-ui: "Inter","Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-display: "Fraunces","Spectral",Georgia,"Times New Roman",serif;
  --font-mono: "JetBrains Mono","SFMono-Regular",ui-monospace,Menlo,Consolas,monospace;
  /* Type scale (17 Oct 2026 visual audit: 25 CSS + 27 template font sizes and 9 weights before).
     Every font-size in ui/app/motion.css and the module templates maps onto one of these nine steps;
     2xs is the floor for dense chrome only (calendar chips, mini-day labels, table footnotes). */
  --fs-2xs: 10px;  --fs-xs: 11px;  --fs-sm: 12.5px;  --fs-base: 14px;  --fs-md: 15px;
  --fs-lg: 17px;   --fs-xl: 20px;  --fs-2xl: 24px;   --fs-3xl: 30px;
  --lh-tight: 1.15; --lh-normal: 1.5;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
  /* Tinted "tone" pairs (wash + ink) for KPI icon tiles, notification icons and coloured values —
     the dark theme swaps the washes and inks below so no template needs a per-theme hex. */
  --teal-50:#e2f6f6;   --teal-text:#0c7676;
  --violet-50:#f1eafc; --violet-text:#6a3fc0;
  --pink-50:#fbe7f1;   --pink-text:#a3306f;

  /* ---- Layout ---- */
  --sidebar-w: 264px;
  --sidebar-w-collapsed: 76px;
  --topbar-h: 62px;
  --maxw: 1320px;

  --speed: 180ms;
  --ease: cubic-bezier(.4,0,.2,1);
}

/* ====================== DARK THEME ====================== */
html[data-theme="dark"] {
  --bg:        #0a0e1c;
  --bg-tint:   #0d1227;
  --surface:   #121734;
  --surface-2: #161c3d;
  --surface-3: #1b2247;
  --hover:     #1c2348;
  --line:      #222a4f;
  --line-2:    #1a2046;
  --ink:       #eaecf6;
  --ink-2:     #b3bbd6;
  --ink-3:     #8b95b8;
  --ink-4:     #6a7398;
  --brand-ink: #0c1024;
  --brand-ink-2:#0f1430;
  --brand-ink-3:#141a3c;
  --shadow-xs: 0 1px 2px rgba(0,0,0,.4);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.5);
  --shadow:    0 10px 30px -10px rgba(0,0,0,.6);
  --shadow-lg: 0 30px 70px -20px rgba(0,0,0,.7);
  --success-50:#0f2a20; --warn-50:#2c2310; --danger-50:#2c1414; --info-50:#10203c;
  --brand-50:#161d44;
  /* TEXT inks for dark surfaces (the fills above stay as they are): the light -600 inks measured
     1.9–2.3 on #121734, so text never uses a fill token directly — it uses the -text tokens below */
  --brand-text:#aeb4f2; --brand-text-strong:#c6caf6; --brand-accent:#7d84ee;
  --success-text:#62d4a3; --warn-text:#f2b85c; --danger-text:#f49090; --info-text:#8fbaf8;
  /* UX7-19: --success-700 is only ever a TEXT colour (17 uses, on --success-50 notes); the light value measured 2.43:1
     on the dark --success-50, so on dark surfaces it is the success text ink */
  --success-700: var(--success-text);
  --gold-text:#e6d29a;
  --teal-50:#0e2a2a;   --teal-text:#5cc9c9;
  --violet-50:#221733; --violet-text:#b394ec;
  --pink-50:#331526;   --pink-text:#f0a1cb;
  --ink-4:     #939cbe;   /* faint ink: 5.6 on --hover (was #6a7398, 3.2) */
  --wash-violet:#241a3a; --wash-red:#3a1d21; --wash-gold:#322708; --wash-green:#0e2a1e;
  color-scheme: dark;
}

/* High-contrast accessibility toggle — per theme: the light values darken, the dark values lighten */
html[data-contrast="high"] {
  --line: #b7bdcf;
  --ink-3: #4a5675;
  --shadow: 0 6px 22px -8px rgba(16,25,53,.34);
}
html[data-theme="dark"][data-contrast="high"] {
  --line: #3a4470;
  --ink-3: #aeb6d6;
  --ink-4: #a2abcc;
}

/* Density */
html[data-density="compact"] { --topbar-h: 54px; }
html[data-density="compact"] .card { padding: 14px; }

/* Brand preset helpers (applied by Branding module via data attr fallback) */
html[data-brandpreset="emerald"]{ --brand-500:#0b7f57; --brand-600:#0a6f4b; --brand-700:#0a5c3f; --brand-ink:#08231b; --brand-ink-2:#0a2c22; --brand-ink-3:#0d3a2c; --brand-h:158; }
html[data-brandpreset="royal"]  { --brand-500:#4b50e6; --brand-600:#3a3fb6; --brand-700:#2f3492; --brand-ink:#101935; --brand-h:244; }
html[data-brandpreset="oxblood"]{ --brand-500:#b3344b; --brand-600:#922a3d; --brand-700:#762231; --brand-ink:#2a0f16; --brand-ink-2:#33131b; --brand-ink-3:#401822; --brand-h:348; }
html[data-brandpreset="midnight"]{ --brand-500:#2f6fe0; --brand-600:#2356bd; --brand-700:#1c489b; --brand-ink:#0a1430; --brand-ink-2:#0d1a3d; --brand-ink-3:#11214c; --brand-h:218; }
html[data-brandpreset="ink"]    { --brand-500:#3b4a63; --brand-600:#2c3850; --brand-700:#212c40; --brand-ink:#0d1320; --brand-h:218; }
/* dark theme + brand presets: the preset accents are tuned for white surfaces; on navy they need lighter text inks */
html[data-theme="dark"][data-brandpreset="emerald"]{ --brand-text:#6fd3a8; --brand-text-strong:#9fe2c4; --brand-accent:#3fb98a; }
html[data-theme="dark"][data-brandpreset="oxblood"]{ --brand-text:#f0a1b0; --brand-text-strong:#f6c2cc; --brand-accent:#d96a80; }
html[data-theme="dark"][data-brandpreset="midnight"]{ --brand-text:#9fc0f6; --brand-text-strong:#c4d8fa; --brand-accent:#6f9ced; }
html[data-theme="dark"][data-brandpreset="ink"]{ --brand-text:#bcc6dd; --brand-text-strong:#d6dcea; --brand-accent:#8c9bbb; }
html[data-theme="dark"][data-brandpreset="royal"]{ --brand-text:#aeb4f2; --brand-text-strong:#c6caf6; --brand-accent:#7d84ee; }