/* ============================================================================
   tokens.css — OCTYN chrome-on-dark command center design tokens
   Matches the current octyn.co palette (chrome/silver accent on cool near-black).
   Single source of truth for color, type, spacing, motion, elevation, z-index.
   NOTE: token NAMES are stable (flows reference them); only values changed from
   the earlier warm/ember palette. --ember* now carries the CHROME accent role.
   ==========================================================================*/

:root {
  /* --- surfaces (cool near-black → raised) --------------------------------*/
  --bg:         #0f0f12;   /* canvas — cool near-black (octyn.co --bg) */
  --bg-alt:     #1c1c20;   /* elevated surface (octyn.co --bg-alt) */
  --bg-alt-2:   #232329;   /* card */
  --bg-alt-3:   #2b2b33;   /* hover / raised card */
  --bg-sunken:  #0a0a0d;   /* wells, inputs, tracks */

  /* --- ink ----------------------------------------------------------------*/
  --ink:        #e4e4e7;   /* primary text (octyn.co --ink) */
  --ink-muted:  #8a8a94;   /* secondary text (octyn.co --ink-muted) */
  --ink-dim:    #808089;   /* tertiary / labels (octyn.co --ink-dim) */
  --ink-faint:  #55555c;   /* disabled / ghost */

  /* --- accent = chrome/silver (octyn.co --chrome-*) -----------------------*/
  /* --ember* names kept for stability; they now hold the chrome accent role. */
  --ember:      #cbd5e1;   /* primary accent (actions, focus) — chrome-solid */
  --ember-deep: #94a3b8;   /* pressed / deep accent — chrome-deep */
  --ember-soft: #cbd5e11f; /* chrome wash */
  --chrome:      #cbd5e1;  /* explicit alias */
  --chrome-deep: #94a3b8;  /* explicit alias */
  --gold:       #c9a24a;   /* muted amber — semantic highlight/soft-warn only */
  --gold-soft:  #c9a24a22;

  /* --- hairlines ----------------------------------------------------------*/
  --border:     #2e2e33;   /* hairlines (octyn.co --border) */
  --border-lit: #3f3f46;   /* lit hairline / focus ring base (octyn.co --border-strong) */

  /* --- semantic status (functional signals; kept legible on cool-dark) ----*/
  --ok:         #5fb894;   /* safe / approved (cool green) */
  --ok-soft:    #5fb89422;
  --warn:       #c9a24a;   /* medium risk (muted amber) */
  --warn-soft:  #c9a24a22;
  --danger:     #e0574a;   /* high risk / blocked (warm red) */
  --danger-soft:#e0574a22;

  /* --- channel identity (real channel brand hues; functional) -------------*/
  --channel-email:    #9aa7b8;  /* cool neutral */
  --channel-meta:     #5b8bd0;
  --channel-whatsapp: #4aa568;
  --channel-skool:    #b06fd4;
  --channel-tiktok:   #e0607f;
  --channel-amazon:   #e0a03c;

  /* --- typography ---------------------------------------------------------*/
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Code",
               "Roboto Mono", Menlo, Consolas, monospace;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
               Arial, "Helvetica Neue", sans-serif;

  --fs-9:   9px;
  --fs-10:  10px;
  --fs-11:  11px;
  --fs-12:  12px;
  --fs-13:  13px;
  --fs-14:  14px;
  --fs-15:  15px;
  --fs-16:  16px;
  --fs-18:  18px;
  --fs-22:  22px;
  --fs-28:  28px;
  --fs-36:  36px;

  --lh-tight: 1.2;
  --lh-snug:  1.35;
  --lh-body:  1.55;

  /* letter-spacing for uppercase mono labels */
  --ls-label: 0.08em;
  --ls-caps:  0.14em;

  /* --- spacing scale (4px base) ------------------------------------------*/
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  32px;
  --sp-8:  40px;
  --sp-9:  48px;
  --sp-10: 64px;

  /* --- radii --------------------------------------------------------------*/
  --r-xs: 3px;
  --r-sm: 5px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-pill: 999px;

  /* --- elevation (neutral shadow, subtle) --------------------------------*/
  --sh-1: 0 1px 2px rgba(0,0,0,.40);
  --sh-2: 0 3px 10px rgba(0,0,0,.45);
  --sh-3: 0 10px 30px rgba(0,0,0,.55);
  --sh-pop: 0 16px 48px rgba(0,0,0,.65), 0 0 0 1px var(--border-lit);
  --glow-ember: 0 0 0 1px rgba(203,213,225,.30), 0 0 24px rgba(203,213,225,.10);

  /* --- motion -------------------------------------------------------------*/
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --dur-1: 180ms;
  --dur-2: 240ms;
  --dur-3: 320ms;
  --dur-4: 420ms;

  /* --- layout metrics -----------------------------------------------------*/
  --topbar-h: 52px;
  --pane-inbox-w: 340px;
  --pane-intel-w: 340px;
  --pane-gap: 1px;   /* hairline gutters between panes */

  /* --- z-index scale ------------------------------------------------------*/
  --z-base: 0;
  --z-sticky: 20;
  --z-topbar: 40;
  --z-tooltip: 60;
  --z-tour: 80;
  --z-overlay: 100;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 1ms;
    --dur-2: 1ms;
    --dur-3: 1ms;
    --dur-4: 1ms;
  }
}