/* ==========================================================================
   Design tokens — Al-Nokhba brand (see .brand and docs/decisions.md)
   Loaded after brand/tokens.css. The app's own token names stay, so every
   stylesheet keeps working; each now points at the Al-Nokhba token that
   plays the same role. Light theme by default, dark when the OS asks for it
   (both come from brand/tokens.css).
   ========================================================================== */

:root {
  /* Surfaces */
  --bg: var(--surface);
  --bg-deep: #07080A; /* stage / preview canvas backdrop: media letterboxing, not UI */
  --surface-1: var(--surface-raised);
  --surface-2: var(--surface-raised);
  --surface-3: var(--surface-raised);
  --surface-4: var(--surface-raised); /* inputs, menus */
  --surface-inset: var(--surface-sunken);
  --raised: var(--surface-sunken); /* pills, hover */
  --border: var(--line);
  --border-strong: var(--line-strong);

  /* Text */
  --text: var(--ink);
  --text-2: var(--ink);
  --muted: var(--ink-muted);

  /* Action (was amber) */
  --accent: var(--brand);
  --accent-ink: var(--on-brand);
  --accent-soft-bg: var(--brand-soft);
  --accent-soft-border: color-mix(in srgb, var(--brand) 45%, var(--line));

  /* Status — --danger, --success and --success-soft come from brand/tokens.css */
  --danger-text: var(--danger);
  --danger-border: color-mix(in srgb, var(--danger) 45%, var(--line));
  --danger-soft-bg: var(--danger-soft);
  --meter-warn: var(--warning);

  /* SCORM Builder accent: now the brand action colour */
  --purple: var(--brand);
  --purple-soft-bg: var(--brand-soft);
  --purple-soft-border: color-mix(in srgb, var(--brand) 45%, var(--line));

  /* Track accents (Video Editor) — a categorical data palette, kept on purpose */
  --ed-overlay-dot: #A685FF;
  --ed-overlay-grad-top: #4A3A80;
  --ed-overlay-grad-bottom: #3A2C66;
  --ed-overlay-border: #5B48A0;
  --ed-video-dot: #4C8DFF;
  --ed-video-grad-top: #2C5292;
  --ed-video-grad-bottom: #1E3A66;
  --ed-video-border: #2F5A9E;
  --ed-audio-dot: #2BC4A9;
  --ed-audio-grad-top: #1A5E54;
  --ed-audio-grad-bottom: #134A42;
  --ed-audio-border: #1F7366;
  --ed-audio-wave: #5EE0C8;

  /* Radii — --radius-sm/md/lg/xl/full come from brand/tokens.css */
  --radius-pill: var(--radius-full);

  /* Shadows: borders first; shadows only to lift */
  --shadow-panel: var(--shadow-sm);
  --shadow-stage: var(--shadow-md);
  --shadow-popover: var(--shadow-md);
  --shadow-dialog: var(--shadow-lg);

  /* Type — --font-mono comes from brand/tokens.css (IBM Plex Mono) */
  --font-ui: var(--font-sans);
}