/* ============================================================
   ZALIO DESIGN TOKENS — v0.1
   The single source of truth. Everything else references these.
   Primitives (raw values) → Semantic (intent) → Component.
   Implementers: prefer the SEMANTIC tokens. Only reach for a
   primitive when no semantic token fits.
   ============================================================ */

:root {
  /* ---------- PRIMITIVES · Color ---------- */

  /* Orange — the one signature hue. */
  --orange-50:  #FFE1D2;
  --orange-200: #FFB58A;
  --orange-400: #FF7A45;
  --orange-500: #FF5A1F;   /* Zalio Orange — the brand */
  --orange-600: #E64200;
  --orange-800: #B8340A;

  /* Ink — warm near-blacks (never pure #000). */
  --ink:   #1A1410;
  --ink-2: #2B221C;
  --ink-3: #534537;
  --ink-4: #8A7868;

  /* Paper — warm off-whites (never pure #fff). */
  --paper:   #FAF6F1;
  --paper-2: #F2ECE3;
  --paper-3: #E6DDD0;
  --line:    #D9CFBF;

  /* Supporting */
  --kraft: #C9A77A;   /* warm tertiary */
  --moss:  #2F5E3F;   /* cool counterpoint — SYSTEM-OK ONLY */
  --clay:  #C5572D;

  /* ---------- SEMANTIC · Color ---------- */
  --color-bg:             var(--paper);
  --color-surface:        var(--paper);
  --color-surface-sunken: var(--paper-2);
  --color-surface-edge:   var(--paper-3);
  --color-surface-inverse:var(--ink);     /* kernel / operator surfaces */
  --color-border:         var(--line);

  --color-text:        var(--ink);
  --color-text-strong: var(--ink-2);
  --color-text-muted:  var(--ink-3);
  --color-text-subtle: var(--ink-4);      /* captions, telemetry */
  --color-on-inverse:  var(--paper);

  --color-brand:       var(--orange-500);
  --color-brand-hover: var(--orange-600);
  --color-brand-press: var(--orange-800);
  --color-brand-soft:  var(--orange-50);  /* tint backgrounds */
  --color-on-brand:    #FFFFFF;

  --color-success:     var(--moss);       /* confirmed · online · secured — ONLY */
  --color-accent-warm: var(--kraft);

  /* Focus / selection */
  --color-focus-ring:  rgba(255, 90, 31, 0.35);
  --color-selection:   var(--orange-500);

  /* ---------- TYPE · Families ---------- */
  --font-display:  'Space Grotesk', ui-sans-serif, system-ui, sans-serif; /* headlines, wordmark */
  --font-body:     'Manrope', ui-sans-serif, system-ui, sans-serif;       /* body, UI */
  --font-mono:     'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace; /* labels, telemetry */
  --font-wordmark: 'Space Grotesk', sans-serif;

  /* ---------- TYPE · Weights ---------- */
  --weight-regular:  400; /* @kind font */
  --weight-medium:   500; /* @kind font */
  --weight-semibold: 600; /* @kind font */
  --weight-bold:     700; /* @kind font */
  --weight-wordmark: 700; /* @kind font */
  --weight-body:     400; /* @kind font */
  --weight-body-em:  600; /* @kind font */

  /* ---------- TYPE · Scale (size / line-height / tracking) ---------- */
  --text-display-1:  132px; /* @kind font */
  --lh-display-1: 0.92; /* @kind other */
  --tr-display-1: -0.045em; /* @kind other */
  --text-display-2:   56px; /* @kind font */
  --lh-display-2: 1.0; /* @kind other */
  --tr-display-2: -0.035em; /* @kind other */
  --text-title:       44px; /* @kind font */
  --lh-title:     1.05; /* @kind other */
  --tr-title:     -0.025em; /* @kind other */
  --text-heading:     24px; /* @kind font */
  --lh-heading:   1.2; /* @kind other */
  --tr-heading:   -0.02em; /* @kind other */
  --text-lede:        22px; /* @kind font */
  --lh-lede:      1.45; /* @kind other */
  --tr-lede:       0; /* @kind other */
  --text-body:        18px; /* @kind font */
  --lh-body:      1.55; /* @kind other */
  --tr-body:       0; /* @kind other */
  --text-body-sm:     15px; /* @kind font */
  --lh-body-sm:   1.5; /* @kind other */
  --tr-body-sm:    0; /* @kind other */
  --text-label:       12px; /* @kind font */
  --lh-label:     1.4; /* @kind other */
  --tr-label:      0.16em; /* @kind other */
  --text-mono-sm:     11px; /* @kind font */
  --lh-mono-sm:   1.6; /* @kind other */
  --tr-mono-sm:    0.14em; /* @kind other */
  --tr-wordmark:     -0.04em; /* @kind other */

  /* ---------- 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-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-30: 120px;

  /* ---------- LAYOUT ---------- */
  --container-max:   1240px;
  --container-pad:   56px;   /* ≥1024px */
  --container-pad-sm:24px;   /* <1024px */
  --section-pad-y:   96px;
  --grid-gutter:     24px;

  /* ---------- RADIUS ---------- */
  --radius-sm:   6px;    /* inputs, small chips */
  --radius-md:   7px;    /* buttons, nav items */
  --radius-lg:   10px;   /* cards */
  --radius-xl:   14px;   /* badges-lg, business card */
  --radius-2xl:  22px;   /* panels, large surfaces */
  --radius-pill: 999px;  /* orb, status dots */
  --radius-tile: 50px;   /* app-icon squircle (220px tile) */

  /* ---------- BORDERS ---------- */
  --border-width: 1px;
  --border:       1px solid var(--color-border);
  --border-dashed:1px dashed var(--color-border);

  /* ---------- ELEVATION · Shadows ---------- */
  --shadow-sm:    0 1px 2px rgba(26,20,16,0.06);
  --shadow-md:    0 8px 16px -8px rgba(26,20,16,0.25);
  --shadow-lg:    0 30px 60px -20px rgba(26,20,16,0.18);
  --shadow-float: 0 30px 60px -20px rgba(26,20,16,0.35), 0 8px 16px -8px rgba(26,20,16,0.25);
  --shadow-focus: 0 0 0 3px var(--color-focus-ring);
  --shadow-agent: 0 0 0 4px rgba(255,90,31,0.18); /* live agent dot halo */

  /* ---------- MOTION ---------- */
  --duration-fast: 120ms; /* @kind other */
  --duration-base: 200ms; /* @kind other */
  --duration-slow: 320ms; /* @kind other */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */

  /* Maestro orb timings (see motion section) */
  --orb-breathe: 4.8s; /* @kind other */
  --orb-drift:   3.6s; /* @kind other */
  --orb-stream:  1.8s; /* @kind other */

  /* ---------- MAESTRO ORB · gradient stops ---------- */
  --maestro-o1: #FFA24C;  /* highlight */
  --maestro-o2: #FF5A1F;  /* pop (= brand) */
  --maestro-o3: #F08A4B;  /* body */
  --maestro-o4: #A93412;  /* shadow */

  /* ---------- HIT TARGETS ---------- */
  --hit-min: 44px;   /* minimum interactive target */

  /* ---------- Z-INDEX ---------- */
  --z-base: 0; /* @kind other */
  --z-sticky: 10; /* @kind other */
  --z-overlay: 100; /* @kind other */
  --z-toast: 1000; /* @kind other */
}

/* Selection uses the brand. */
::selection { background: var(--color-selection); color: #fff; }