/* ============================================================
   TOKENS  —  the design system's single source of truth.

   THIS is the file you edit to re-skin the whole dashboard for a
   new client. Change the brand hue, the font, the radius here and
   every screen updates. Nothing else needs to be touched.

   Two themes are defined (light + dark) so one system serves both.
   ============================================================ */

:root {
  /* ---- Type ---- */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

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

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

  --lh-tight: 1.15;
  --lh-normal: 1.5;
  --tracking-tight: -0.01em;

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

  /* ---- Radius ---- */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* ============================================================
     PER-CLIENT BRAND  ·  the tailoring surface.
     This is where a client's dashboard becomes THEIRS, the same
     way the 1219 proposal was tailored to their look. You tune
     their colour (hue), their font (--font-sans above), and their
     radius (below). Structure and components never change, only
     these. That is what makes it fast AND genuinely owned.

       1219 Homes example (beige + mustard):
         --brand-h: 40; --brand-s: 78%; --brand-l: 50%;
         --font-sans: "Their brand font", <fallback stack>;
         --radius: 10px;
     ============================================================ */
  --brand-h: 216;   /* hue        · 216 = refined blue, matches the heatmap */
  --brand-s: 64%;   /* saturation */
  --brand-l: 44%;   /* lightness  */

  /* ---- Layout ---- */
  --sidebar-w: 244px;
  --topbar-h: 60px;
  --content-max: 1200px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur: 160ms;

  /* ---- Medal accents (top guests) ---- */
  --gold: #c8a02c;
  --silver: #97a1ab;
  --bronze: #b07a43;
}

/* -------------------- LIGHT (default) -------------------- */
:root,
:root[data-theme="light"] {
  --bg: #f5f6f8;
  --surface: #ffffff;
  --surface-2: #f0f2f4;
  --surface-hover: #f6f7f9;
  --border: #e6e8ec;
  --border-strong: #d7dae0;

  --text: #14161a;
  --text-muted: #656b76;
  --text-subtle: #9aa0ab;

  --brand: hsl(var(--brand-h) var(--brand-s) var(--brand-l));
  --brand-fg: #ffffff;
  --brand-soft: hsl(var(--brand-h) 52% 96%);
  --brand-soft-border: hsl(var(--brand-h) 44% 88%);

  --positive: #14894e;  --positive-soft: #e7f4ec;
  --negative: #d64550;  --negative-soft: #fbeaec;
  --warning:  #b8791f;  --warning-soft:  #fbf1e0;

  --primary: #16181d;   --primary-fg: #ffffff;

  /* data ink — charts/bars are monochrome; colour stays rare */
  --ink: #22252b;
  --ink-soft: #ccd0d7;

  /* sequential blue ramp for heatmaps / intensity */
  --heat-0: #eceff3;
  --heat-1: #cfe0f7;
  --heat-2: #93bcf0;
  --heat-3: #4f8fe4;
  --heat-4: #1f5fc4;

  --shadow-sm:   0 1px 2px rgba(16,18,23,.05);
  --shadow-card: 0 1px 3px rgba(16,18,23,.06), 0 1px 2px rgba(16,18,23,.03);
  --shadow-pop:  0 8px 28px rgba(16,18,23,.12);
}

/* -------------------- DARK -------------------- */
:root[data-theme="dark"] {
  --bg: #0a0b0d;
  --surface: #131519;
  --surface-2: #1a1d22;
  --surface-hover: #1c2026;
  --border: #24272e;
  --border-strong: #323740;

  --text: #f2f3f5;
  --text-muted: #969ca7;
  --text-subtle: #626772;

  --brand: hsl(var(--brand-h) 46% 52%);
  --brand-fg: #08130d;
  --brand-soft: hsl(var(--brand-h) 38% 15%);
  --brand-soft-border: hsl(var(--brand-h) 32% 26%);

  --positive: #34c07a;  --positive-soft: #10261b;
  --negative: #f0656e;  --negative-soft: #2a1315;
  --warning:  #e0a244;  --warning-soft:  #2a2011;

  --primary: #f2f3f5;   --primary-fg: #0a0b0d;

  --ink: #e8eaed;
  --ink-soft: #363b43;

  --heat-0: #191c21;
  --heat-1: #14355e;
  --heat-2: #1f5192;
  --heat-3: #3b7fd1;
  --heat-4: #6aa8f0;

  --shadow-sm:   0 1px 2px rgba(0,0,0,.3);
  --shadow-card: 0 1px 3px rgba(0,0,0,.35);
  --shadow-pop:  0 10px 30px rgba(0,0,0,.5);
}