/* =============================================================================
   BSE tokens.css — v1.0 (additive layer)
   depends_on: shared.css (must load FIRST; defines raw brand vars)
   role: adds semantic aliases + scales (size/space/radius/shadow/motion)
         that shared.css does not provide.
   does_not: redeclare brand colors, fonts, --gutter, --max, --ease, or any
             rule already in shared.css.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------------------
     SEMANTIC COLOR ALIASES (components reference these, not raw brand)
     Raw brand vars come from shared.css; these are aliases only.
     --------------------------------------------------------------------------- */
  --color-bg-primary:        var(--bg);
  --color-bg-secondary:      var(--bg-2);
  --color-bg-elevated:       var(--bg-3);
  --color-bg-sunken:         var(--bg-subtle);
  --color-bg-overlay:        rgba(0, 0, 0, 0.55);      /* black scrim under blur */
  --color-bg-overlay-strong: rgba(0, 0, 0, 0.82);

  --color-text-primary:      var(--ink);
  --color-text-secondary:    var(--ink-dim);
  --color-text-muted:        var(--ink-mute);
  --color-text-faint:        var(--ink-faint);
  --color-on-accent:         #050506;                  /* near-black text on the silver fill */

  --color-border:            var(--line);
  --color-border-strong:     var(--line-2);

  --color-accent-primary:    var(--accent);
  --color-accent-secondary:  var(--accent-2);
  --color-focus-ring:        var(--accent);

  --color-status-warn:       var(--warn);
  --color-status-danger:     var(--danger);
  --color-status-success:    var(--ok);

  /* alpha-blended status surfaces (reusable across toast, banner, phase badges) */
  --color-status-warn-bg:    rgba(216, 176, 89, 0.14);
  --color-status-danger-bg:  rgba(232, 115, 107, 0.14);
  --color-status-success-bg: rgba(91, 191, 138, 0.14);
  --color-accent-bg:         var(--accent-bg);
  --color-accent-border:     var(--accent-border);

  /* ---------------------------------------------------------------------------
     TYPOGRAPHY SCALE (shared.css only has --h-xxl/xl/l/m — this adds stops)
     --------------------------------------------------------------------------- */
  --text-xs:      11px;
  --text-sm:      13px;
  --text-base:    14.5px;
  --text-md:      16px;
  --text-lg:      18px;
  --text-xl:      22px;
  --text-2xl:     28px;
  --text-3xl:     36px;
  --text-4xl:     48px;
  --text-display: clamp(56px, 9vw, 104px);

  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --lh-tight:   1.15;
  --lh-normal:  1.5;
  --lh-relaxed: 1.7;

  --tracking-tight:  -0.015em;
  --tracking-normal: 0;
  --tracking-wide:   0.12em;
  --tracking-caps:   0.14em;   /* matches existing .eyebrow / .mono labels */

  /* ---------------------------------------------------------------------------
     SPACE SCALE (shared.css has no discrete scale)
     Standard 4px grid. Mixed units: base on 4/8/12/16/20/24, then jumps.
     --------------------------------------------------------------------------- */
  --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-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ---------------------------------------------------------------------------
     RADIUS SCALE (shared.css hardcodes: 4px, 8px, 10px, 16px, 20px, 999px)
     Unified here; refactor shared.css incrementally to use these.
     --------------------------------------------------------------------------- */
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-xl:    16px;       /* card standard */
  --radius-2xl:   20px;       /* login card */
  --radius-pill:  999px;

  /* ---------------------------------------------------------------------------
     SHADOW SCALE (shared.css has no shadow tokens; used ad-hoc in app.css)
     --------------------------------------------------------------------------- */
  /* Tinted depth for the dark theme (cool, never pure black) — the resting/raised/
     overlay primitives live in shared.css; these scale stops alias onto them. */
  --shadow-xs:          0 1px 2px -1px rgba(6, 8, 16, 0.60);
  --shadow-sm:          var(--shadow-resting);
  --shadow-md:          0 6px 16px -6px rgba(6, 8, 16, 0.55);
  --shadow-lg:          var(--shadow-raised);
  --shadow-xl:          var(--shadow-overlay);
  --shadow-accent-glow: var(--glow-focus);

  /* ---------------------------------------------------------------------------
     MOTION (shared.css has only --ease + ad-hoc durations)
     --------------------------------------------------------------------------- */
  --duration-fast:    150ms;
  --duration-normal:  250ms;
  --duration-slow:    800ms;
  --ease-standard:    var(--ease);                 /* shared.css cubic-bezier */
  --ease-decelerate:  cubic-bezier(0, 0, 0.2, 1);
  --ease-emphasized:  cubic-bezier(0.2, 0, 0, 1);

  /* ---------------------------------------------------------------------------
     Z-INDEX
     --------------------------------------------------------------------------- */
  --z-base:     0;
  --z-app-top:  20;       /* matches existing .app-top z-index */
  --z-overlay:  50;
  --z-nav:      60;       /* matches existing .nav z-index */
  --z-progress: 100;      /* matches existing .progress-bar */
  --z-modal:    200;
  --z-toast:    500;      /* matches existing .bse-toast */

  /* ---------------------------------------------------------------------------
     BACKDROP
     --------------------------------------------------------------------------- */
  --backdrop-blur: blur(14px);
}