@font-face {
  font-family: 'Inter';
  src: url('/core/fonts/Inter-Variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
 * Dashio Design Tokens — v1.0
 * Single source of truth. Override per tenant via cascade.
 * ============================================================ */

:root {
  /* ── Color: Surface (dark default) ── */
  --ds-bg:           #0B0B0E;
  --ds-surface-1:    #131318;
  --ds-surface-2:    #1A1A20;
  --ds-surface-3:    #22222A;
  --ds-hairline:     #26262E;
  --ds-hairline-2:   #2F2F39;

  /* ── Color: Ink ── */
  --ds-ink-1:        #F4F4F5;
  --ds-ink-2:        #B4B4BD;
  --ds-ink-3:        #74747F;
  --ds-ink-4:        #4A4A55;
  /* F002_v3: de-emphasised meta-text token. WCAG-AA against surface-1
     (#9090A0 vs #131318 ≈ 5.4:1 contrast). Applied to
     .ds-nav-brand-env, .ds-nav-foot-role, and the .ds-text-meta utility. */
  --ds-ink-meta:     #9090A0;

  /* ── Color: Accent (overridable per tenant) ── */
  --ds-accent:       #2563EB;
  --ds-accent-soft:  #1E3A8A;
  --ds-accent-tint:  rgba(37,99,235,.10);
  --ds-accent-ring:  rgba(37,99,235,.35);

  /* ── Color: Semantic state ── */
  --ds-ok:           #16A34A;
  --ds-ok-soft:      rgba(22,163,74,.12);
  --ds-warn:         #F59E0B;
  --ds-warn-soft:    rgba(245,158,11,.12);
  --ds-danger:       #DC2626;
  --ds-danger-soft:  rgba(220,38,38,.12);
  --ds-info:         #0EA5E9;

  /* ── Rank (border / glyph only) ── */
  --ds-rank-1:       #EAB308;
  --ds-rank-2:       #94A3B8;
  --ds-rank-3:       #B45309;

  /* ── Typography ── */
  --ds-font-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --ds-text-11:      0.6875rem;
  --ds-text-12:      0.75rem;
  --ds-text-13:      0.8125rem;
  --ds-text-14:      0.875rem;
  --ds-text-16:      1rem;
  --ds-text-20:      1.25rem;
  --ds-text-28:      1.75rem;
  --ds-text-40:      2.5rem;
  --ds-text-64:      4rem;

  --ds-w-regular:    400;
  --ds-w-medium:     500;
  --ds-w-semibold:   600;
  --ds-w-bold:       700;

  --ds-lh-tight:     1.15;
  --ds-lh-snug:      1.35;
  --ds-lh-normal:    1.55;

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

  /* ── Radius ── */
  --ds-radius-xs:    4px;
  --ds-radius-sm:    6px;
  --ds-radius-md:    8px;
  --ds-radius-lg:    12px;
  --ds-radius-full:  999px;

  /* ── Shadow ── */
  --ds-shadow-1:     0 1px 0 rgba(0,0,0,.4);
  --ds-shadow-2:     0 4px 12px rgba(0,0,0,.35);
  --ds-shadow-3:     0 12px 32px rgba(0,0,0,.5);

  /* ── Motion ── */
  --ds-ease:         cubic-bezier(.2,0,0,1);
  --ds-dur-fast:     120ms;
  --ds-dur-base:     180ms;
  --ds-dur-slow:     280ms;

  /* ── Layout ── */
  --ds-nav-w:        240px;
  --ds-edit-w:       340px;
  --ds-grid-cols:    12;
  --ds-grid-gap:     12px;
  --ds-grid-row:     80px;
}

[data-theme="light"] {
  --ds-bg:           #FAFAFA;
  --ds-surface-1:    #FFFFFF;
  --ds-surface-2:    #F4F4F5;
  --ds-surface-3:    #E4E4E7;
  --ds-hairline:     #E4E4E7;
  --ds-hairline-2:   #D4D4D8;
  --ds-ink-1:        #18181B;
  --ds-ink-2:        #3F3F46;
  --ds-ink-3:        #71717A;
  --ds-ink-4:        #A1A1AA;
  /* F002_v3: meta-text token in light theme. WCAG-AA against surface-1
     (#6B6B7A vs #FFFFFF ≈ 5.8:1 contrast). */
  --ds-ink-meta:     #6B6B7A;
}