/* ============================================================
   MaxV OS v2 -- Design Tokens
   Brand: img media (teal + navy, warm off-white)
   ============================================================ */

:root {
  /* ---- Brand ---- */
  --teal-50:  #eef7f5;
  --teal-100: #d8ece7;
  --teal-200: #a9d6cc;
  --teal-300: #7bc1b2;
  --teal-400: #59ac9a;        /* base teal */
  --teal-500: #3b7d74;        /* teal-dark */
  --teal-600: #2e635c;
  --teal-700: #234944;

  --navy-50:  #edecf2;
  --navy-100: #d3d1e0;
  --navy-200: #a8a5bf;
  --navy-300: #6f6a8e;
  --navy-400: #3e3a66;
  --navy-500: #201f40;        /* base navy */
  --navy-600: #171631;
  --navy-700: #0f0e22;

  /* ---- Surfaces (warm neutrals) ---- */
  --bg:             #f9f6f4;
  --surface:        #ffffff;
  --surface-muted:  #f7f4f0;
  --surface-sunken: #f3efeb;
  /* Row/button hover tint. It was referenced in 10 places in styles.css and
     DEFINED IN NONE — so the five uses with no fallback (including
     `.data-table tbody tr:hover` and `.btn-sm:hover`) were dead declarations and
     no data table in the product highlighted the row under the cursor. Found
     2026-09-05 chasing "sometimes it's hard to know which button corresponds
     with which customer name". The five uses that DID carry a fallback were
     painting cool greys (#eee / #eef2f7 / #f8fafc) into a warm palette; they now
     match. */
  --surface-subtle: #f3efeb;
  /* Same defect, three more tokens, found by the sweep that added the one above:
     .btn-notes / .btn-refresh (Recommendations detail) set `border: none` and a
     background of var(--gray-200) that never resolved, so they rendered as bare
     text with no button surface at all; .btn-rerun and .history-item.current lost
     their teal tint the same way. Aliased onto the warm palette rather than given
     new colours, so nothing new enters the design. */
  --gray-200:       #f3efeb;
  --gray-300:       #d8cfc2;
  --teal-light:     #eef7f5;
  --border:         #ede6dd;
  --border-strong:  #d8cfc2;
  --hover:          #f3efeb;

  /* ---- Text ---- */
  --text:           #201f40;
  --text-muted:     #7a7570;
  --text-subtle:    #a8a39e;
  --text-inverse:   #ffffff;

  /* ---- Semantic ---- */
  --success:        #2f8a4e;
  --success-bg:     #e6f4ea;
  --success-border: #b8dec4;

  --warning:        #b8791a;
  --warning-bg:     #fbf0d7;
  --warning-border: #ecd291;

  --danger:         #c42a1c;
  --danger-bg:      #fbe4e1;
  --danger-border: #f0b5ac;

  --info:           #1a5bb5;
  --info-bg:        #dfeaff;
  --info-border:    #b8cdef;

  --neutral:        #6b6460;
  --neutral-bg:     #ede6dd;
  --neutral-border: #d8cfc2;

  /* Level ladder for recs (L1 easy -> L3 severe) */
  --level-1: var(--success);
  --level-1-bg: var(--success-bg);
  --level-2: var(--warning);
  --level-2-bg: var(--warning-bg);
  --level-3: var(--danger);
  --level-3-bg: var(--danger-bg);

  /* ---- Accent (gradient primary) ---- */
  --accent:        var(--teal-500);
  --accent-hover:  var(--teal-400);
  --accent-bg:     var(--teal-50);

  /* ---- img media brand - official ---- */
  /* Diagonal teal gradient -- signature treatment from agence.imgmedia.ca */
  --brand-gradient:        linear-gradient(135deg, #59ac9a 0%, #3b7d74 100%);
  --brand-gradient-soft:   linear-gradient(135deg, #59ac9a 0%, #3b7d74 100%);
  --brand-gradient-0deg:   linear-gradient(0deg,   #59ac9a 0%, #3b7d74 100%);

  /* Hyperlink blue from brand sheet */
  --link:          #1874e7;
  --link-hover:    #155fbb;

  /* Chart palette -- exact hex from brand sheet, in plotting order */
  --chart-1: #3274e5;   /* blue */
  --chart-2: #981e97;   /* purple */
  --chart-3: #e93323;   /* red */
  --chart-4: #ee8733;   /* orange */
  --chart-5: #f3b43f;   /* amber */
  --chart-6: #5ecb3c;   /* green */
  --chart-7: #59ac9a;   /* teal */
  --chart-8: #201f40;   /* navy */

  /* Vibrant secondary (Secondary 2 from brand sheet) -- for highlights/badges */
  --vibrant-cyan:    #32cce5;
  --vibrant-purple:  #461e97;
  --vibrant-pink:    #ff0066;
  --vibrant-orange:  #ff5200;
  --vibrant-yellow:  #ffe100;
  --vibrant-green:   #00ff42;

  /* ---- Type ---- */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, 'SF Mono', Consolas, monospace;

  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-base: 13px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 20px;
  --fs-2xl: 24px;
  --fs-3xl: 32px;
  --fs-4xl: 40px;

  --lh-tight: 1.2;
  --lh-snug: 1.35;
  --lh-base: 1.5;
  --lh-relaxed: 1.65;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;

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

  /* ---- Radius ---- */
  --r-xs: 3px;
  --r-sm: 5px;
  --r-md: 7px;
  --r-lg: 10px;
  --r-xl: 14px;
  --r-2xl: 20px;
  --r-full: 999px;

  /* ---- Elevation ---- */
  --shadow-xs: 0 1px 2px rgba(32, 31, 64, 0.04);
  --shadow-sm: 0 1px 3px rgba(32, 31, 64, 0.06), 0 1px 2px rgba(32, 31, 64, 0.04);
  --shadow-md: 0 4px 12px rgba(32, 31, 64, 0.08), 0 2px 4px rgba(32, 31, 64, 0.04);
  --shadow-lg: 0 12px 32px rgba(32, 31, 64, 0.12), 0 4px 8px rgba(32, 31, 64, 0.06);
  --shadow-xl: 0 24px 64px rgba(32, 31, 64, 0.18);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;

  /* ---- Layout ---- */
  --rail-w: 56px;
  --sidebar-w: 240px;
  --header-h: 52px;
  --detail-pane-w: 520px;
}

/* ============================================================
   Dark mode (tokens only -- enable via [data-theme="dark"])
   ============================================================ */
[data-theme="dark"] {
  --bg:             #0f0e22;
  --surface:        #1a1933;
  --surface-muted:  #17162c;
  --surface-sunken: #121127;
  --border:         #2a2848;
  --border-strong:  #3e3a66;
  --hover:          #22213f;
  --surface-subtle: #22213f;
  --gray-200:       #22213f;
  --gray-300:       #3e3a66;
  --teal-light:     #1a3d38;
  --text:           #e8e6f0;
  --text-muted:     #9a94b0;
  --text-subtle:    #6f6a8e;
  --accent-bg:      #1a3d38;
  --success-bg: #1a3a28;
  --success-border: #2a5a42;
  --warning-bg: #3a2d15;
  --warning-border: #5a4525;
  --danger-bg:  #3a1f1d;
  --danger-border: #5a3330;
  --info-bg:    #1a2d4d;
  --info-border: #2a4570;
  --neutral-bg: #2a2848;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35), 0 2px 4px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45);
}

/* ============================================================
   Base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ============================================================
   Utility primitives used across the component library
   ============================================================ */
.mono { font-family: var(--font-mono); font-feature-settings: "tnum", "zero"; }
.tabular { font-variant-numeric: tabular-nums; }
.eyebrow {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}