/* ═══════════════════════════════════════════════════════════════════════════
   BASE TOKENS — Shared Scale/Type/Radius/Elevation/Motion
   Used by: admin/, xskx/
   Phase 1 (Foundation) · No visual override · No legacy conflict
   ═══════════════════════════════════════════════════════════════════════════ */

:root {

  /* ─── SPACING SCALE (geometric, ratio ~1.5) ──────────────────────────── */
  --sp-0:  4px;
  --sp-1:  6px;
  --sp-2:  8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  /* ─── TYPE-SCALE (major-third, body = 14.5) ──────────────────────────── */
  --type-xs:   11px;     /* eyebrows, pill labels, marker tags        */
  --type-sm:   12.5px;   /* captions, table cells, helper text        */
  --type-md:   14.5px;   /* body default                              */
  --type-lg:   17px;     /* lede, card title                          */
  --type-xl:   22px;     /* h3, deck top h2                           */
  --type-2xl:  28px;     /* h2 (section title)                        */
  --type-3xl:  40px;     /* h1 (workspace landing)                    */
  --type-4xl:  64px;     /* hero display (login, xskx crest)          */

  /* ─── LINE-HEIGHTS ───────────────────────────────────────────────────── */
  --lh-tight:  1.05;     /* display, hero h1                          */
  --lh-snug:   1.15;     /* h2                                        */
  --lh-base:   1.5;      /* body                                      */
  --lh-loose:  1.65;     /* longform copy, marketing-ish              */

  /* ─── LETTER-SPACING ─────────────────────────────────────────────────── */
  --ls-tight:   -.02em;  /* hero, h1                                  */
  --ls-snug:    -.01em;  /* h2/h3                                     */
  --ls-base:     0;      /* body                                      */
  --ls-marker:  .22em;   /* eyebrows, pill labels (uppercase)         */
  --ls-marker-wide: .32em; /* welcome-card kicker, ds-hero badge      */

  /* ─── RADIUS (three steps, no more) ──────────────────────────────────── */
  --r-sm:  6px;          /* inputs, pills, tags, small chips          */
  --r-md: 12px;          /* cards, buttons, panels                    */
  --r-lg: 20px;          /* hero cards, modals, dialogs               */

  /* ─── BORDER WIDTHS ──────────────────────────────────────────────────── */
  --bd-1:   1px;
  --bd-2:   1.5px;

  /* ─── ELEVATION (four levels) ────────────────────────────────────────── */
  --elev-0: none;
  --elev-1: 0 1px 0 rgba(255,255,255,.03), 0 8px 24px rgba(0,0,0,.28);
  --elev-2: 0 2px 0 rgba(255,255,255,.04), 0 24px 60px rgba(0,0,0,.50);
  --elev-3: 0 4px 1px rgba(255,255,255,.05), 0 56px 120px rgba(0,0,0,.62);

  /* ─── EASINGS (three functions) ──────────────────────────────────────── */
  --ease-out:    cubic-bezier(.22, 1, .36, 1);          /* standard exit, default UI */
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);       /* hub cards, pop-ins, reveals */
  --ease-glide:  cubic-bezier(.65, .05, .36, 1);        /* workspace transitions, scroll */

  /* ─── DURATIONS (three tiers) ────────────────────────────────────────── */
  --dur-1: 120ms;        /* atom — hover/focus/color-shift             */
  --dur-2: 240ms;        /* transition — card-enter/panel-slide/tab    */
  --dur-3: 480ms;        /* ceremony — section-route/login→deck/hero   */

  /* ─── Z-INDEX SCALE ──────────────────────────────────────────────────── */
  --z-base:        1;
  --z-ambient:     1;    /* radar, stars, orbs                         */
  --z-content:     5;    /* main content                                */
  --z-chrome:     20;    /* top-bar pills, rail                         */
  --z-overlay:    40;    /* status-bar, dropdown                        */
  --z-modal:      80;    /* dialogs, drawers                            */
  --z-toast:      90;    /* toast stack                                 */
  --z-welcome:   100;    /* full-screen welcome / gate                  */

  /* ─── BREAKPOINTS (for container-query reference, not media usage) ──── */
  --bp-sm:   480px;
  --bp-md:   768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;
  --bp-2xl: 1536px;

}

/* ─── REDUCED MOTION ─────────────────────────────────────────────────────
   Atom-tier (dur-1) stays for color/opacity shifts (functional).
   Transition + Ceremony collapse to 1ms.
   Spring/glide easings linearize.
   ──────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-2: 1ms;
    --dur-3: 1ms;
    --ease-spring: linear;
    --ease-glide:  linear;
  }
}