/* =========================================================================
   KAIRO — Design Tokens
   Destination Intelligence Platform · PiirZ Digital
   ========================================================================= */

:root {
  /* --- Brand palette (OKLCH) -------------------------------------------- */
  /* Sourced from Kairo Brand Guidelines v1.0 — Ink, Terra, Bone */
  --ink:            oklch(0.19 0.002 70);   /* #1A1A19 — primary text, rails */
  --ink-soft:       oklch(0.28 0.004 70);
  --ink-muted:      oklch(0.48 0.006 70);
  --ink-quiet:      oklch(0.68 0.005 70);

  --bone:           oklch(0.985 0.005 95);  /* #FAFAF7 — background */
  --bone-warm:      oklch(0.96 0.008 85);
  --bone-shadow:    oklch(0.93 0.010 80);

  --terra:          oklch(0.62 0.165 40);   /* #D85A30 — single accent */
  --terra-50:       oklch(0.95 0.020 35);   /* #FAECE7 — tint */
  --terra-100:      oklch(0.91 0.035 35);
  --terra-200:      oklch(0.86 0.060 38);
  --terra-light:    oklch(0.76 0.110 40);   /* #F0997B */
  --terra-800:      oklch(0.33 0.105 35);   /* #712B13 — deep */
  --terra-900:      oklch(0.24 0.085 32);

  /* Functional */
  --rule:           oklch(0.88 0.006 80);   /* hairline rules */
  --rule-strong:    oklch(0.75 0.007 75);

  /* Signal (rare) */
  --signal-live:    oklch(0.72 0.16 150);   /* muted olive-green for "live" dot */

  /* --- Typography ------------------------------------------------------- */
  --font-sans:  "Inter", -apple-system, "SF Pro Text", "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono:  "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  --font-editorial: "Instrument Serif", "Fraunces", ui-serif, Georgia, serif;

  /* Fluid type scale — editorial hero down to fine caption */
  --t-display:  clamp(3.25rem, 6.4vw, 6.5rem);   /* hero */
  --t-h1:       clamp(2.25rem, 4.4vw, 4.25rem);  /* section opener */
  --t-h2:       clamp(1.625rem, 2.6vw, 2.25rem);
  --t-h3:       clamp(1.25rem, 1.75vw, 1.5rem);
  --t-lede:     clamp(1.125rem, 1.35vw, 1.25rem);
  --t-body:     1rem;
  --t-small:    0.875rem;
  --t-caption:  0.8125rem;
  --t-micro:    0.6875rem;

  /* Line heights */
  --lh-tight:   1.04;
  --lh-snug:    1.2;
  --lh-body:    1.55;
  --lh-relaxed: 1.7;

  /* Letter spacing */
  --tr-display: -0.028em;
  --tr-head:    -0.02em;
  --tr-body:    -0.006em;
  --tr-mono:    0.01em;
  --tr-micro:   0.10em;  /* for caps labels */

  /* Weights */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    550;
  --fw-bold:    600;

  /* --- Spacing (4pt base) ----------------------------------------------- */
  --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;
  --s-20:  80px;
  --s-24:  96px;
  --s-32:  128px;
  --s-40:  160px;
  --s-48:  192px;

  /* Page rhythm */
  --page-max:     1320px;
  --page-pad-x:   clamp(20px, 4vw, 56px);
  --section-pad:  clamp(80px, 12vw, 160px);
  --content-max:  68ch;

  /* --- Radii ------------------------------------------------------------ */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   14px;
  --r-xl:   22px;
  --r-pill: 999px;

  /* --- Motion — per emil-design-eng ------------------------------------- */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);    /* strong ease-out */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-soft:   cubic-bezier(0.16, 1, 0.3, 1);

  --d-feedback: 140ms;   /* button press */
  --d-hover:    200ms;   /* hover */
  --d-state:    260ms;   /* state change */
  --d-reveal:   600ms;   /* scroll reveal */
  --d-hero:     900ms;   /* hero entrance */

  /* --- Shadows (tinted to background) ----------------------------------- */
  --shadow-1: 0 1px 2px oklch(0.12 0.015 60 / 0.06),
              0 0 0 1px oklch(0.12 0.015 60 / 0.035);
  --shadow-2: 0 2px 8px oklch(0.12 0.015 60 / 0.06),
              0 0 0 1px oklch(0.12 0.015 60 / 0.04);
  --shadow-3: 0 18px 48px -12px oklch(0.18 0.02 50 / 0.18),
              0 0 0 1px oklch(0.18 0.02 50 / 0.05);

  /* --- Layers ----------------------------------------------------------- */
  --z-nav:     100;
  --z-float:   200;
  --z-overlay: 900;
  --z-modal:   1000;

  color-scheme: light;
}

/* --- Fluid viewport units (dvh over vh) ---------------------------------- */
@supports (height: 100dvh) {
  :root { --vh: 1dvh; }
}