/* ─────────────────────────────────────────────────────────────────────────
   tokens.css — the design-token scale + semantic aliases. Source of truth for
   every primitive value (spacing, radii, shadows, type, neutrals, status hues)
   and the semantic names components reference. NO hex lives outside this file
   and theme.css. Downstream files use var(--token) ONLY — never a raw value.
   Semantic color tokens map from the brand vars set in theme.css.
   ───────────────────────────────────────────────────────────────────────── */
:root {
  /* ── Neutrals (cool slate) ─────────────────────────────────────────────── */
  --slate-50:  #f6f7f9;
  --slate-100: #eceef2;
  --slate-200: #d9dde4;
  --slate-300: #bcc3ce;
  --slate-400: #8b94a3;
  --slate-500: #626b7a;
  --slate-600: #48505d;
  --slate-700: #343b46;
  --slate-800: #222831;
  --slate-900: #141920;
  --white: #ffffff;

  /* ── Status hues (fg = text/icon, bg = tint fill) ──────────────────────── */
  --green-fg: #1d7a4d; --green-bg: #e6f4ec;
  --amber-fg: #9a6700; --amber-bg: #fdf3da;
  --blue-fg:  #1f5fbf; --blue-bg:  #e6eefb;
  --red-fg:   #b3261e; --red-bg:   #fce8e6;

  /* ── Spacing scale (4px grid) ──────────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* ── Radii ─────────────────────────────────────────────────────────────── */
  --radius-sm: 6px;
  --radius-md: 9px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* ── Shadows ───────────────────────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --shadow-md: 0 4px 14px rgba(15, 23, 42, .10);
  --shadow-lg: 0 10px 30px rgba(15, 23, 42, .14);

  /* ── Motion ────────────────────────────────────────────────────────────── */
  --transition: 150ms ease;

  /* ── Type scale (rem steps; h1/h2 fluid via clamp) ─────────────────────── */
  --fs-xs:  0.75rem;
  --fs-sm:  0.875rem;
  --fs-md:  1rem;
  --fs-lg:  1.125rem;
  --fs-xl:  1.375rem;
  --fs-2xl: 1.75rem;
  --fs-h1: clamp(1.5rem, 1.15rem + 1.6vw, 2rem);
  --fs-h2: clamp(1.25rem, 1.05rem + 1vw, 1.6rem);
  --fs-table:      0.78rem;  /* compact data-table body   (see aslan-frontend) */
  --fs-table-head: 0.66rem;  /* compact data-table header (uppercase)          */

  /* ── Control sizing / touch targets (WCAG 2.2 target-size) ─────────────── */
  --tap-min:         24px;   /* absolute floor for any interactive target */
  --control-min:     44px;   /* default comfortable touch target */
  --control-compact: 38px;   /* dense toolbar/filter controls, mouse-first */
  --control-dense:   32px;   /* inside the .dense layer (still ≥ tap-min) */

  /* ── Layout metrics ────────────────────────────────────────────────────── */
  --maxw:        1200px;
  --sidebar-w:   256px;
  --rail-w:      64px;
  --bottomnav-h: 56px;

  /* ── Semantic surfaces (components reference THESE, not primitives) ─────── */
  --bg-page:    var(--white);
  --bg-surface: var(--white);
  --bg-raised:  var(--white);
  --bg-sunken:  var(--slate-50);
  --border:              var(--slate-200);
  --border-strong:       var(--slate-300);
  --surface-line:        var(--slate-200);   /* alias kept for table hairlines */
  --surface-line-strong: var(--slate-300);
  --text:       var(--slate-900);
  --text-soft:  var(--slate-600);
  --text-muted: var(--slate-400);
  --text-faint: var(--slate-400);

  /* ── Brand → semantic (brand primitives are set in theme.css) ──────────── */
  --color-primary:    var(--brand-primary);
  --color-on-primary: var(--white);
  --color-accent:     var(--brand-accent);
  --color-on-accent:  var(--brand-on-accent);

  /* ── Status semantic aliases ───────────────────────────────────────────── */
  --st-success-fg: var(--green-fg); --st-success-bg: var(--green-bg);
  --st-warning-fg: var(--amber-fg); --st-warning-bg: var(--amber-bg);
  --st-info-fg:    var(--blue-fg);  --st-info-bg:    var(--blue-bg);
  --st-danger-fg:  var(--red-fg);   --st-danger-bg:  var(--red-bg);

  /* ── Fonts (families defined in theme.css) ─────────────────────────────── */
  --font-display: var(--brand-font-display);
  --font-body:    var(--brand-font-body);
  --font-mono:    var(--brand-font-mono);
}