/* ============================================================
   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: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  /* One family across the whole OS (clean + consistent, the Claude approach).
     Swap this single line if a different display face is wanted later. */
  --font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-md: 13px;
  --fs-base: 14px;
  --fs-lg: 16px;
  --fs-xl: 22px;
  --fs-2xl: 30px;
  --fs-3xl: 38px;

  --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: 248px;
  --topbar-h: 64px;
  --content-max: 1680px;   /* fills a wide monitor; was 1200 (floated in gutters) */

  /* ---- 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;
  --info:     #2f6cae;  --info-soft: #e4eef8;  --info-border: #c3d8ef;

  --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;

  /* booking-source hues (validated categorical) + glow (lighter gradient center) */
  --src-website: #2a78d6;    --src-website-glow: #7bb0ef;
  --src-airbnb: #eda100;     --src-airbnb-glow: #f7c85a;
  --src-whatsapp: #1baf7a;   --src-whatsapp-glow: #6fd9b3;
  --src-walkin: #6d5ce0;     --src-walkin-glow: #a89cf0;
  --src-bookingcom: #e87ba4; --src-bookingcom-glow: #f3b3cb;

  --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;
  --info:     #5b9bd8;  --info-soft: #122335;  --info-border: #24425f;

  --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;

  /* booking-source hues stepped for the dark surface */
  --src-website: #3987e5;    --src-website-glow: #7fb2f0;
  --src-airbnb: #c98500;     --src-airbnb-glow: #e5b04a;
  --src-whatsapp: #199e70;   --src-whatsapp-glow: #45c99a;
  --src-walkin: #9085e9;     --src-walkin-glow: #bcb4f4;
  --src-bookingcom: #d55181; --src-bookingcom-glow: #e88fae;

  --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);
}

/* -------------------- PAPER (Obsidian-inspired · default) --------------------
   Warm paper background, ink-brown text, a single mustard/gold accent, and the
   blue callout language Godson loves. Calm and readable — an app, not a notes
   file (the serif is reserved for reading surfaces only). */
:root[data-theme="paper"] {
  --bg: #f4f1e8;
  --surface: #faf8f2;
  --surface-2: #f0ece1;
  --surface-hover: #f1eee5;
  --border: #e6e1d4;
  --border-strong: #d8d2c2;

  --text: #2f2a22;
  --text-muted: #7a7264;
  --text-subtle: #a49c8c;

  --brand: #8a6f3f;
  --brand-fg: #faf8f2;
  --brand-soft: #efe9db;
  --brand-soft-border: #e0d8c5;

  --positive: #4f8a3f;  --positive-soft: #e8efd7;
  --negative: #b5432f;  --negative-soft: #f4e1d8;
  --warning:  #b07d2b;  --warning-soft:  #f4e9cf;
  --info:     #3f6ea3;  --info-soft: #e0e9f2;  --info-border: #c2d3e7;

  --primary: #33291b;   --primary-fg: #f8f3e7;

  --ink: #3a3020;
  --ink-soft: #d9cdb2;

  /* occupancy heat — warm-to-blue ramp reads well on paper, one cool accent */
  --heat-0: #e7ddc9;
  --heat-1: #d7dcc4;
  --heat-2: #a9c4a0;
  --heat-3: #6ba07f;
  --heat-4: #3f7d63;

  --src-website: #2f6cae;    --src-website-glow: #7aa9dd;
  --src-airbnb: #b9791a;     --src-airbnb-glow: #e0ab4f;
  --src-whatsapp: #3f8f5f;   --src-whatsapp-glow: #78c193;
  --src-walkin: #7a5bc0;     --src-walkin-glow: #ab93e0;
  --src-bookingcom: #c26689; --src-bookingcom-glow: #e3a6bf;

  --shadow-sm:   0 1px 2px rgba(60,45,20,.06);
  --shadow-card: 0 1px 3px rgba(60,45,20,.08), 0 1px 2px rgba(60,45,20,.04);
  --shadow-pop:  0 10px 30px rgba(60,45,20,.16);
}