/*
 * Design tokens. Every color, size and spacing value in components comes from here.
 * Dark is the default theme (owner decision): the OS color-scheme preference is deliberately NOT used.
 * Contrast pairs are verified by tests/unit/contrast.test.js.
 */
:root {
  /* Typography */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Menlo, Consolas, monospace;

  --text-2xs: 0.6875rem; --lh-2xs: 1rem;      /* 11px eyebrow labels */
  --text-xs: 0.75rem;    --lh-xs: 1.125rem;   /* 12px */
  --text-sm: 0.8125rem;  --lh-sm: 1.25rem;    /* 13px */
  --text-md: 0.875rem;   --lh-md: 1.375rem;   /* 14px UI default */
  --text-body: 1rem;     --lh-body: 1.7;      /* 16px reading */
  --text-lg: 1.125rem;   --lh-lg: 1.75rem;    /* 18px */
  --text-xl: 1.25rem;    --lh-xl: 1.75rem;    /* 20px */
  --text-2xl: 1.5rem;    --lh-2xl: 2rem;      /* 24px */
  --text-3xl: 1.875rem;  --lh-3xl: 2.375rem;  /* 30px */
  --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600;
  --tracking-tight: -0.015em;
  --tracking-eyebrow: 0.08em;

  /* Spacing (4px base) */
  --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;

  /* Shape & motion */
  --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-full: 999px;
  --duration-fast: 120ms;
  --duration-base: 180ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);

  /* Layout */
  --sidebar-width: 256px;
  --sidebar-collapsed: 68px;
  --topbar-height: 60px;
  --content-max: 1180px;
  --reading-max: 70ch;
  --control-height: 38px;
  --control-height-sm: 32px;

  /* ---------- Dark theme (default) ---------- */
  color-scheme: dark;
  --bg: #0e1015;
  --surface-1: #14171e;        /* sidebar, cards */
  --surface-2: #1a1e27;        /* elevated: inputs, popovers */
  --surface-3: #222733;        /* hover, active */
  --border: #2a303c;           /* subtle, decorative */
  --border-strong: #3a4250;    /* dividers that need more presence */
  --border-input: #687184;     /* form control boundaries: >= 3:1 (WCAG 1.4.11) */
  --text: #e8eaf0;
  --text-muted: #a3abb9;
  --accent: #a78bfa;           /* Modern Violet */
  --accent-hover: #b9a2fc;
  --accent-contrast: #140d26;  /* text on violet */
  --accent-soft: #241f3a;      /* tinted backgrounds */
  --accent-text: #c4b1fd;      /* violet text on tinted backgrounds */
  --success: #4acb8b;  --success-soft: #142a22;
  --warning: #f2b84b;  --warning-soft: #2e2516;
  --danger: #f2706b;   --danger-soft: #331b1d;
  --info: #6cb6f5;     --info-soft: #142536;
  --overlay: rgba(5, 6, 10, 0.72);
  --shadow-overlay: 0 16px 48px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.3);
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
}

/* ---------- Light theme ---------- */
:root[data-theme='light'] {
  color-scheme: light;
  --bg: #f6f7f9;
  --surface-1: #ffffff;
  --surface-2: #f8f9fb;
  --surface-3: #eef0f4;
  --border: #e3e6ec;
  --border-strong: #d2d7e0;
  --border-input: #7d8696;
  --text: #151821;
  --text-muted: #525b6b;
  --accent: #6d4ae0;
  --accent-hover: #5d3bd0;
  --accent-contrast: #ffffff;
  --accent-soft: #f0ebfe;
  --accent-text: #5631c9;
  --success: #157a49;  --success-soft: #e5f4ec;
  --warning: #8a5700;  --warning-soft: #fbf1de;
  --danger: #bb3530;   --danger-soft: #fbe8e7;
  --info: #1d68a8;     --info-soft: #e4eff9;
  --overlay: rgba(20, 22, 30, 0.45);
  --shadow-overlay: 0 16px 48px rgba(20, 24, 40, 0.18), 0 2px 8px rgba(20, 24, 40, 0.08);
}