/*
 * AZ-700 Study Buddy — design tokens.
 *
 * Loaded before styles.css. Every colour, radius, spacing step and type size
 * the app uses is defined here, so styles.css only refers to tokens.
 *
 * Two layers, as in Fluent 2:
 *   1. global tokens: raw scales (--space-4, --radius-md, --text-sm ...)
 *   2. alias tokens: semantic roles (--color-surface, --color-action ...)
 *
 * Themes only redefine alias tokens. theme-init.js resolves the learner's
 * preference (light, dark or system) to data-theme="light|dark" on <html>
 * before the page paints.
 *
 * Contrast (WCAG 2.2 AA) is checked for both themes by
 * tests/theme-contrast.test.js: 4.5:1 for text, 3:1 for UI boundaries,
 * focus indicators and state markers.
 *
 * --rgb-* tokens are space-separated channels for translucent tints:
 *   background: rgb(var(--rgb-action) / 0.08);
 */

/* ── 1. Global tokens (theme-independent) ────────────────── */
:root {
  /* 4px spacing ramp */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;

  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* Type ramp (rem so browser text-size settings are respected) */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;

  --font-sans: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Cascadia Code", "Cascadia Mono", Consolas, "SFMono-Regular", Menlo, monospace;

  --icon-sm: 16px;
  --icon-md: 20px;

  --content-max: 80rem;
  --reading-max: 72ch;
  --topbar-height: 64px;
  --sidebar-width: 320px;
  --sidebar-rail-width: 72px;

  --duration-fast: 0.15s;
  --duration-normal: 0.25s;
}

/* ── 2. Alias tokens: light theme (default) ──────────────── */
:root {
  color-scheme: light;

  --color-canvas: #f6f8fb;
  --color-surface: #ffffff;
  --color-surface-alt: #f6f8fb;
  --color-surface-subtle: #eef2f6;
  --color-text: #1b2430;
  --color-text-muted: #5b6675;
  --color-border: #dfe5ec;
  --color-border-strong: #7f8b9b;
  --color-topbar: rgb(255 255 255 / 0.96);
  --color-scrim: rgb(15 27 43 / 0.5);

  /* Action: text/borders use --color-action; solid fills use the -fill pair
     so white text stays readable in both themes. */
  --color-action: #0f6cbd;
  --color-action-strong: #0f548c;
  --color-action-fill: #0f6cbd;
  --color-action-fill-hover: #0f548c;
  --color-action-subtle: #ebf3fc;
  --color-action-border: #9cc9ef;
  --color-action-border-subtle: #cfe4fa;
  --color-on-fill: #ffffff;

  --color-success: #0e7a0d;
  --color-success-fill: #0e7a0d;
  --color-success-subtle: #e7f4e6;
  --color-warning: #8a5300;
  --color-warning-subtle: #fff4ce;
  --color-warning-border: #f9a825;
  --color-danger: #c42b1c;
  --color-danger-fill: #c42b1c;
  --color-danger-subtle: #fde7e9;
  --color-purple: #5c2d91;

  /* Per-chapter accent. app.js sets --accent inline on chapter containers
     (module.accent from data.js); this is the fallback outside them. */
  --accent: var(--color-success);

  /* Exam-tip callout text */
  --color-tip-text: #5f4c00;
  --color-tip-strong: #7a4f00;

  --color-focus: #0f6cbd;
  --color-focus-on-dark: #9cc9ef;

  --color-code-bg: #1b2430;
  --color-code-text: #e6edf3;
  --color-code-border: #2f3a48;
  --color-code-button: #2f3a48;
  --color-code-button-hover: #3b4859;
  --color-code-button-border: #556275;
  --color-code-button-text: #c9d4e0;

  --color-media-bg: #000000;
  --color-media-border: #2f3c48;

  /* Hero banners (dashboard, resume card) */
  --color-hero-start: #1a73e8;
  --color-hero-end: #1557b0;

  /* Sidebar: dark in both themes */
  --sidebar-bg: #1d2b3b;
  --sidebar-panel: #203754;
  --sidebar-text: #bddbfb;
  --sidebar-muted: #a8c4de;
  --sidebar-heading: rgb(176 196 216 / 0.8);
  --sidebar-link: #d5e9ff;
  --sidebar-strong: #ffffff;
  --sidebar-hover: rgb(255 255 255 / 0.07);
  --sidebar-line: rgb(255 255 255 / 0.08);
  --sidebar-sub-bg: rgb(0 0 0 / 0.12);

  --rgb-action: 0 120 212;
  --rgb-success: 16 124 16;
  --rgb-danger: 209 52 56;
  --rgb-warning: 255 185 0;
  --rgb-purple: 136 71 204;
  --rgb-on-dark: 255 255 255;
  --rgb-shadow: 0 0 0;

  --shadow-1: 0 1px 2px rgb(27 36 48 / 0.06), 0 1px 3px rgb(27 36 48 / 0.06);
  --shadow-2: 0 4px 12px rgb(27 36 48 / 0.1);
}

/* ── 3. Alias tokens: dark theme ─────────────────────────── */
:root[data-theme="dark"] {
  color-scheme: dark;

  --color-canvas: #0f151c;
  --color-surface: #18212b;
  --color-surface-alt: #1c2631;
  --color-surface-subtle: #232f3c;
  --color-text: #e7edf4;
  --color-text-muted: #a9b5c3;
  --color-border: #334252;
  --color-border-strong: #7d8c9e;
  --color-topbar: rgb(24 33 43 / 0.96);
  --color-scrim: rgb(0 0 0 / 0.6);

  --color-action: #6cb4f5;
  --color-action-strong: #a6d2fa;
  --color-action-fill: #1c74c9;
  --color-action-fill-hover: #1f78cc;
  --color-action-subtle: #12304d;
  --color-action-border: #3a77b0;
  --color-action-border-subtle: #24486c;
  --color-on-fill: #ffffff;

  --color-success: #72cf71;
  --color-success-fill: #0e7a0d;
  --color-success-subtle: #15311b;
  --color-warning: #f2c46d;
  --color-warning-subtle: #382b0c;
  --color-warning-border: #c98a12;
  --color-danger: #ff9a92;
  --color-danger-fill: #b3261e;
  --color-danger-subtle: #3d1b1e;
  --color-purple: #cfaef5;

  --color-tip-text: #f1dc9e;
  --color-tip-strong: #ffd977;

  --color-focus: #6cb4f5;
  --color-focus-on-dark: #9cc9ef;

  --color-code-bg: #0b1016;
  --color-code-text: #e6edf3;
  --color-code-border: #334252;
  --color-code-button: #232f3c;
  --color-code-button-hover: #334252;
  --color-code-button-border: #5c6b7d;
  --color-code-button-text: #d3dde8;

  --color-media-bg: #000000;
  --color-media-border: #334252;

  --color-hero-start: #145aa8;
  --color-hero-end: #0e3f78;

  --sidebar-bg: #111a24;
  --sidebar-panel: #18283b;
  --sidebar-text: #bddbfb;
  --sidebar-muted: #a8c4de;
  --sidebar-heading: rgb(176 196 216 / 0.85);
  --sidebar-link: #d5e9ff;
  --sidebar-strong: #ffffff;
  --sidebar-hover: rgb(255 255 255 / 0.07);
  --sidebar-line: rgb(255 255 255 / 0.1);
  --sidebar-sub-bg: rgb(0 0 0 / 0.2);

  --rgb-action: 108 180 245;
  --rgb-success: 114 207 113;
  --rgb-danger: 255 120 112;
  --rgb-warning: 242 196 109;
  --rgb-purple: 190 150 240;
  --rgb-on-dark: 255 255 255;
  --rgb-shadow: 0 0 0;

  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.4), 0 1px 3px rgb(0 0 0 / 0.3);
  --shadow-2: 0 4px 12px rgb(0 0 0 / 0.45);
}