@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 {
  /* FR-10 hotfix 2026-08-26: color-scheme fortæller browser at native form-
     kontroller (select, checkbox, scrollbar) skal renderes i det tema vi
     bruger. Uden dette arver de OS-dark selv når vores CSS forcer light-theme
     → mørke dropdowns/scrollbars på lyst tema (Albers klage 2026-08-26). */
  color-scheme: dark;

  /* ── 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;

  /* ── Chart tokens (P1 Batch B: theme-scoped chart-farver) ──
   * Bar/line-chart var før hardcoded til dark: #666680 ticks, rgba(255,255,255,.04)
   * grid, #e0e0e0 datalabels. Læses via getComputedStyle() i renderBar/renderLine. */
  --ds-chart-tick:      #74747F;
  --ds-chart-grid:      rgba(255,255,255,.06);
  --ds-chart-datalabel: #E4E4E7;
  /* Arc/tube-baggrund til gauge/thermometer/speedometer widgets. */
  --ds-arc-bg:          rgba(255,255,255,.06);

  /* ── Chart tokens: kategorisk palette (F074) ──
   * Multi-series line/bar. Distinkt fra --ds-accent (som er tenant-
   * overridable). Bruges når > 1 serie skal skelnes visuelt. Single-
   * series fortsætter med --ds-accent. Læses via getComputedStyle()
   * i renderBar/renderLine. */
  --ds-chart-cat-1:      #5B6BFF;
  --ds-chart-cat-2:      #9B6BFF;
  --ds-chart-cat-3:      #2BB8C4;
  --ds-chart-cat-1-tint: rgba(91,107,255,.12);
  --ds-chart-cat-2-tint: rgba(155,107,255,.12);
  --ds-chart-cat-3-tint: rgba(43,184,196,.12);

  /* ── 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"] {
  /* FR-10 hotfix: overrid dark color-scheme så native controls
     (select-popup, checkbox, scrollbar) renderes lyst. */
  color-scheme: 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;

  /* Chart tokens (P1 Batch B) — mørkere farver mod lys baggrund */
  --ds-chart-tick:      #52525B;
  --ds-chart-grid:      rgba(0,0,0,.08);
  --ds-chart-datalabel: #27272A;
  --ds-arc-bg:          rgba(0,0,0,.08);

  /* F074: kategoriske farver — samme hue som dark, lidt højere tint-alpha
   * for at kompensere for lysere baggrund. */
  --ds-chart-cat-1:      #5B6BFF;
  --ds-chart-cat-2:      #9B6BFF;
  --ds-chart-cat-3:      #2BB8C4;
  --ds-chart-cat-1-tint: rgba(91,107,255,.14);
  --ds-chart-cat-2-tint: rgba(155,107,255,.14);
  --ds-chart-cat-3-tint: rgba(43,184,196,.14);
}