/* ============================================================================
   KROS Design System — Colors & Typography
   ----------------------------------------------------------------------------
   Derived from the KROS shadcn_ui kit (August 2025). Light + dark tokens,
   base primitives (slate + brand brown/mauve), semantic roles, and a
   typographic system built on Inter + Geist (no monospace family).
   ========================================================================= */

/* ---------- Fonts ------------------------------------------------------- */
/* Geist = real variable font file shipped in /fonts.                        */
/* Inter = Google Fonts (user has not provided local files).                */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

@font-face {
  font-family: 'Geist';
  src: url('../fonts/Geist-VariableFont_wght.ttf') format('truetype-variations'),
       url('../fonts/Geist-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* ======================= PRIMITIVES — Slate scale ===================== */
  --slate-50:   rgb(248, 250, 252);
  --slate-100:  rgb(241, 245, 249);
  --slate-200:  rgb(226, 232, 240);
  --slate-300:  rgb(203, 213, 225);
  --slate-400:  rgb(148, 163, 184);
  --slate-500:  rgb(100, 116, 139);
  --slate-600:  rgb(89, 105, 128);
  --slate-700:  rgb(51, 65, 85);
  --slate-800:  rgb(30, 41, 59);
  --slate-900:  rgb(15, 23, 42);
  --slate-950:  rgb(2, 6, 23);

  /* ============== PRIMITIVES — Brand (KROS brown/sienna) ================ */
  /* rgb(145,83,53) appears 1157× — the signature KROS brand brown. */
  --brand-50:   rgb(250, 243, 239);
  --brand-100:  rgb(245, 227, 217);
  --brand-200:  rgb(235, 200, 180);
  --brand-300:  rgb(220, 165, 135);
  --brand-400:  rgb(192, 130, 100);
  --brand-500:  rgb(145, 83, 53);   /* primary */
  --brand-600:  rgb(122, 66, 40);
  --brand-700:  rgb(99, 52, 30);
  --brand-800:  rgb(74, 38, 22);
  --brand-900:  rgb(52, 26, 14);

  /* =============== PRIMITIVES — Mauve accent (shadcn base) ============== */
  /* rgb(151,71,255) — purple used in accent/marketing surfaces. */
  --mauve-400:  rgb(168, 85, 247);
  --mauve-500:  rgb(151, 71, 255);
  --mauve-600:  rgb(139, 92, 246);
  --fuchsia-500: rgb(217, 70, 239);

  /* =================== PRIMITIVES — Semantic palettes =================== */
  --red-600:    rgb(216, 0, 39);     /* KROS legacy red — used in charts/alerts */
  --red-700:    rgb(185, 28, 28);    /* destructive */
  --green-600:  rgb(22, 163, 74);    /* success */
  --green-700:  rgb(5, 150, 105);
  --amber-500:  rgb(255, 218, 68);   /* KROS accent yellow */
  --orange-600: rgb(234, 88, 12);
  --blue-600:   rgb(0, 82, 180);     /* KROS corporate blue */
  --blue-500:   rgb(59, 130, 246);
  --sky-600:    rgb(2, 132, 199);

  /* ======================= SEMANTIC — Surfaces ========================== */
  --bg:              var(--slate-50);
  --bg-elevated:     #ffffff;
  --bg-muted:        var(--slate-100);
  --bg-inverse:      var(--slate-950);

  /* Marketing / hero background — mauve radial bloom on cool slate.
     Tokens A/B/C are exposed so consumers can override the gradient. */
  --custom-background-gradient-A: #EDF2F7;
  --custom-background-gradient-B: rgba(139, 92, 246, 0.00);
  --custom-background-gradient-C: rgba(139, 92, 246, 0.20);
  --bg-marketing:
    radial-gradient(
      172.62% 141.42% at 0% 0%,
      var(--custom-background-gradient-C) 0%,
      var(--custom-background-gradient-B) 40%
    ),
    var(--custom-background-gradient-A);

  --fg:              var(--slate-950);
  --fg-muted:        var(--slate-600);
  --fg-subtle:       var(--slate-400);
  --fg-on-brand:     var(--slate-50);
  --fg-on-inverse:   var(--slate-50);

  --border:          var(--slate-300);
  --border-subtle:   var(--slate-200);
  --border-strong:   var(--slate-700);

  --primary:         var(--brand-500);
  --primary-hover:   var(--brand-600);
  --primary-fg:      var(--slate-50);

  /* Brand-coloured TEXT on the page background (links, eyebrows).
     Kept separate from --primary because a colour that works as a fill
     rarely works as text once the canvas flips. */
  --accent-fg:       var(--brand-500);
  --accent-fg-hover: var(--brand-600);

  --secondary:       rgba(2, 6, 23, 0.05);
  --secondary-fg:    var(--slate-900);

  --destructive:     var(--red-700);
  --destructive-fg:  var(--slate-50);
  --success:         var(--green-600);
  --success-fg:      var(--slate-50);
  --warning:         var(--amber-500);
  --warning-fg:      var(--slate-950);

  --ring:            var(--brand-500);
  --focus:           rgba(145, 83, 53, 0.35);

  /* ======================= CHART PALETTE — pastel ======================= */
  /* Six pastel hues used for data visualisation. Solid swatch + gradient
     pair (top→bottom) for filled bars / area charts. Use the SOLID for
     legend chips & line strokes; use the GRADIENT for filled bars. */
  --chart-1:        #FBC4AB;          /* peach   */
  --chart-1-grad:   linear-gradient(180deg, #FBC4AB 0%, #F3A07F 100%); /* @kind color */
  --chart-2:        #C9E4DE;          /* mint    */
  --chart-2-grad:   linear-gradient(180deg, #C9E4DE 0%, #8FCBBE 100%); /* @kind color */
  --chart-3:        #C7CEEA;          /* lavender*/
  --chart-3-grad:   linear-gradient(180deg, #C7CEEA 0%, #8FA0DA 100%); /* @kind color */
  --chart-4:        #F7E1A0;          /* butter  */
  --chart-4-grad:   linear-gradient(180deg, #F7E1A0 0%, #E9C566 100%); /* @kind color */
  --chart-5:        #E5C9F2;          /* lilac   */
  --chart-5-grad:   linear-gradient(180deg, #E5C9F2 0%, #C49BD9 100%); /* @kind color */
  --chart-6:        #B6DDF7;          /* sky     */
  --chart-6-grad:   linear-gradient(180deg, #B6DDF7 0%, #79BCE8 100%); /* @kind color */

  /* "Active highlight" gradient for a single emphasized bar / KPI ring.
     Red→pink→purple, vibrant. Use sparingly (one bar, one ring at a time). */
  --chart-active-grad: linear-gradient(180deg, #F45A6B 0%, #ED4690 50%, #A646E8 100%); /* @kind color */
  --chart-active-glow: 0 8px 22px -6px rgba(237, 70, 144, 0.55); /* @kind shadow */
  --chart-track:       #F1F1F4;        /* muted bar/track grey */

  /* ============================ Shadows ================================= */
  --shadow-xs:   0 1px 2px 0 rgba(2, 6, 23, 0.05);
  --shadow-sm:   0 1px 3px 0 rgba(2, 6, 23, 0.08), 0 1px 2px -1px rgba(2, 6, 23, 0.05);
  --shadow-md:   0 4px 6px -1px rgba(2, 6, 23, 0.08), 0 2px 4px -2px rgba(2, 6, 23, 0.05);
  --shadow-lg:   0 10px 15px -3px rgba(2, 6, 23, 0.10), 0 4px 6px -4px rgba(2, 6, 23, 0.06);
  --shadow-xl:   0 20px 25px -5px rgba(2, 6, 23, 0.10), 0 8px 10px -6px rgba(2, 6, 23, 0.06);

  /* =========================== Radii ==================================== */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;     /* shadcn default */
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-full: 9999px;

  /* ============================ Spacing (4px base) ====================== */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;

  /* ========================= Typography — families ====================== */
  --font-sans: "Inter", "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-display: "Geist", "Inter", ui-sans-serif, system-ui, sans-serif;

  /* ========================= Typography — scale ========================= */
  /* Sizes seen most in the file: 14/12 body, 16/18 lg, 20/24 h3, 30/36 h2, 48/60 display */
  --text-2xs: 11px;
  --text-xs:  12px;
  --text-sm:  14px;
  --text-base: 16px;
  --text-lg:  18px;
  --text-xl:  20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: 36px;
  --text-5xl: 48px;
  --text-6xl: 60px;
  --text-7xl: 72px;

  --lh-tight: 1.1; /* @kind font */
  --lh-snug:  1.25; /* @kind font */
  --lh-normal: 1.5; /* @kind font */
  --lh-relaxed: 1.65; /* @kind font */

  --fw-regular: 400; /* @kind font */
  --fw-medium:  500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold:    700; /* @kind font */
  --fw-extrabold: 800; /* @kind font */

  --tracking-tight: -0.02em; /* @kind font */
  --tracking-snug:  -0.01em; /* @kind font */
  --tracking-normal: 0; /* @kind font */

  /* ========================= Motion ==================================== */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
  --ease-out: cubic-bezier(0, 0, 0.2, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 180ms; /* @kind other */
  --dur-slow: 260ms; /* @kind other */
}

/* ============================ COLOR MODES ==============================
   Light is the default in :root. Dark is applied in two situations:
     1. the OS asks for it and the page has not been pinned to light
     2. the page (or any subtree) is explicitly marked dark
   The two rule bodies below are intentionally identical — KEEP THEM IN SYNC.

     <html>                        → follows the OS
     <html data-theme="light">     → always light
     <html data-theme="dark">      → always dark
     <div class="theme-dark">      → dark island inside a light page
   ===================================================================== */

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --bg:              var(--slate-950);
    --bg-elevated:     rgb(12, 18, 35);
    --bg-muted:        var(--slate-900);
    --bg-inverse:      var(--slate-50);

    --custom-background-gradient-A: #0B1120;
    --custom-background-gradient-B: rgba(139, 92, 246, 0.00);
    --custom-background-gradient-C: rgba(139, 92, 246, 0.22);

    --fg:              var(--slate-50);
    --fg-muted:        var(--slate-400);
    --fg-subtle:       var(--slate-500);
    --fg-on-brand:     var(--slate-950);
    --fg-on-inverse:   var(--slate-950);

    --border:          rgba(255, 255, 255, 0.16);
    --border-subtle:   rgba(255, 255, 255, 0.08);
    --border-strong:   rgba(255, 255, 255, 0.28);

    --primary:         var(--brand-400);
    --primary-hover:   var(--brand-300);
    --primary-fg:      var(--slate-950);
    --accent-fg:       var(--brand-300);
    --accent-fg-hover: var(--brand-200);

    --secondary:       rgba(255, 255, 255, 0.06);
    --secondary-fg:    var(--slate-50);

    --destructive:     rgb(239, 68, 68);
    --destructive-fg:  var(--slate-950);
    --success:         rgb(52, 211, 153);
    --success-fg:      var(--slate-950);
    --warning:         var(--amber-500);
    --warning-fg:      var(--slate-950);

    --ring:            var(--brand-400);
    --focus:           rgba(192, 130, 100, 0.40);

    --chart-track:     rgba(255, 255, 255, 0.07);

    --shadow-xs:   0 1px 2px 0 rgba(0, 0, 0, 0.40);
    --shadow-sm:   0 1px 3px 0 rgba(0, 0, 0, 0.45);
    --shadow-md:   0 4px 6px -1px rgba(0, 0, 0, 0.50);
    --shadow-lg:   0 10px 25px -5px rgba(0, 0, 0, 0.60);
    --shadow-xl:   0 20px 40px -8px rgba(0, 0, 0, 0.70);
  }
}

[data-theme="dark"], .theme-dark {
  color-scheme: dark;

  --bg:              var(--slate-950);
  --bg-elevated:     rgb(12, 18, 35);
  --bg-muted:        var(--slate-900);
  --bg-inverse:      var(--slate-50);

  --custom-background-gradient-A: #0B1120;
  --custom-background-gradient-B: rgba(139, 92, 246, 0.00);
  --custom-background-gradient-C: rgba(139, 92, 246, 0.22);

  --fg:              var(--slate-50);
  --fg-muted:        var(--slate-400);
  --fg-subtle:       var(--slate-500);
  --fg-on-brand:     var(--slate-950);
  --fg-on-inverse:   var(--slate-950);

  --border:          rgba(255, 255, 255, 0.16);
  --border-subtle:   rgba(255, 255, 255, 0.08);
  --border-strong:   rgba(255, 255, 255, 0.28);

  --primary:         var(--brand-400);
  --primary-hover:   var(--brand-300);
  --primary-fg:      var(--slate-950);
  --accent-fg:       var(--brand-300);
  --accent-fg-hover: var(--brand-200);

  --secondary:       rgba(255, 255, 255, 0.06);
  --secondary-fg:    var(--slate-50);

  --destructive:     rgb(239, 68, 68);
  --destructive-fg:  var(--slate-950);
  --success:         rgb(52, 211, 153);
  --success-fg:      var(--slate-950);
  --warning:         var(--amber-500);
  --warning-fg:      var(--slate-950);

  --ring:            var(--brand-400);
  --focus:           rgba(192, 130, 100, 0.40);

  --chart-track:     rgba(255, 255, 255, 0.07);

  --shadow-xs:   0 1px 2px 0 rgba(0, 0, 0, 0.40);
  --shadow-sm:   0 1px 3px 0 rgba(0, 0, 0, 0.45);
  --shadow-md:   0 4px 6px -1px rgba(0, 0, 0, 0.50);
  --shadow-lg:   0 10px 25px -5px rgba(0, 0, 0, 0.60);
  --shadow-xl:   0 20px 40px -8px rgba(0, 0, 0, 0.70);
}

/* Pin back to light (beats the prefers-color-scheme block — same specificity, later). */
[data-theme="light"], .theme-light {
  color-scheme: light;

  --bg:              var(--slate-50);
  --bg-elevated:     #ffffff;
  --bg-muted:        var(--slate-100);
  --bg-inverse:      var(--slate-950);

  --custom-background-gradient-A: #EDF2F7;
  --custom-background-gradient-B: rgba(139, 92, 246, 0.00);
  --custom-background-gradient-C: rgba(139, 92, 246, 0.20);

  --fg:              var(--slate-950);
  --fg-muted:        var(--slate-600);
  --fg-subtle:       var(--slate-400);
  --fg-on-brand:     var(--slate-50);
  --fg-on-inverse:   var(--slate-50);

  --border:          var(--slate-300);
  --border-subtle:   var(--slate-200);
  --border-strong:   var(--slate-700);

  --primary:         var(--brand-500);
  --primary-hover:   var(--brand-600);
  --primary-fg:      var(--slate-50);
  --accent-fg:       var(--brand-500);
  --accent-fg-hover: var(--brand-600);

  --secondary:       rgba(2, 6, 23, 0.05);
  --secondary-fg:    var(--slate-900);

  --destructive:     var(--red-700);
  --destructive-fg:  var(--slate-50);
  --success:         var(--green-600);
  --success-fg:      var(--slate-50);
  --warning:         var(--amber-500);
  --warning-fg:      var(--slate-950);

  --ring:            var(--brand-500);
  --focus:           rgba(145, 83, 53, 0.35);

  --chart-track:     #F1F1F4;

  --shadow-xs:   0 1px 2px 0 rgba(2, 6, 23, 0.05);
  --shadow-sm:   0 1px 3px 0 rgba(2, 6, 23, 0.08), 0 1px 2px -1px rgba(2, 6, 23, 0.05);
  --shadow-md:   0 4px 6px -1px rgba(2, 6, 23, 0.08), 0 2px 4px -2px rgba(2, 6, 23, 0.05);
  --shadow-lg:   0 10px 15px -3px rgba(2, 6, 23, 0.10), 0 4px 6px -4px rgba(2, 6, 23, 0.06);
  --shadow-xl:   0 20px 25px -5px rgba(2, 6, 23, 0.10), 0 8px 10px -6px rgba(2, 6, 23, 0.06);
}

/* ============================= BASE ELEMENTS ============================ */
html, body { font-family: var(--font-sans); color: var(--fg); background: var(--bg); }
body { margin: 0; font-size: var(--text-sm); line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; }

h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  font-size: var(--text-5xl); line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg); margin: 0 0 var(--space-4);
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-4xl); line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-3);
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--text-2xl); line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug); margin: 0 0 var(--space-3);
}
h4, .h4 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--text-xl); line-height: var(--lh-snug);
  margin: 0 0 var(--space-2);
}
h5, .h5 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--text-lg); line-height: var(--lh-snug);
  margin: 0 0 var(--space-2);
}

p, .body {
  font-size: var(--text-sm); line-height: var(--lh-relaxed); color: var(--fg);
  margin: 0 0 var(--space-4);
}
.lead {
  font-size: var(--text-lg); line-height: var(--lh-relaxed); color: var(--fg-muted);
}
.small { font-size: var(--text-xs); color: var(--fg-muted); }
.muted { color: var(--fg-muted); }

blockquote {
  border-left: 2px solid var(--border);
  padding-left: var(--space-4);
  font-style: italic;
  color: var(--fg-muted);
  margin: 0 0 var(--space-4);
}

code, kbd, .mono {
  font-family: var(--font-sans);
  font-size: 0.92em;
  background: var(--bg-muted);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  color: var(--fg);
}

a { color: var(--accent-fg); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--accent-fg-hover); }

hr { border: 0; border-top: 1px solid var(--border-subtle); margin: var(--space-6) 0; }

/* ============================= UTILITIES =============================== */
.ds-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  padding: var(--space-6);
}