/* ==========================================================================
   Design tokens - extracted from the Figma file "AIOps Course" (RvvHDXMDT3CUbJp3djUMS5).
   Figma ships no variables, so every value below is the literal fill / stroke /
   size read from the frames and then named by role.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* ---- Canvas -------------------------------------------------------- */
  --bg-app: #07111f;
  --bg-sidebar: #0b1524;
  --border-sidebar: #1a2638;
  --glow-color: #18b6d8; /* radial glow behind the dashboard (asset glow.svg) */

  /* ---- Surfaces (fill + stroke pairs, named by Figma role) ----------- */
  --surface-primary: #0e1a2a;      /* hero, outline, quiz card, lab runbook */
  --border-primary: #24334a;
  --surface-panel: #0d1725;        /* lesson article, lab workspace */
  --border-panel: #24334a;
  --surface-card: #0f1b2a;         /* resource card, mobile day card */
  --border-card: #263247;
  --surface-stat: #111827;
  --border-stat: #253247;
  --surface-lab: #0b1624;          /* lab preview */
  --border-lab: #25344a;
  --surface-well: #0a1421;         /* progress module */
  --border-well: #213149;
  --surface-learner: #101d2c;
  --border-learner: #213249;
  --surface-row: #101b29;          /* module / runbook row (idle) */
  --border-row: #223149;
  --surface-row-active: #123037;   /* module / runbook row (active) */
  --border-row-active: #1d6a66;
  --surface-diagram: #09131f;
  --border-diagram: #203149;
  --surface-node: #121e2d;
  --border-node: #26364c;
  --surface-option: #101b2a;
  --border-option: #263247;
  --surface-field: #0b1524;        /* radio / checkbox well */
  --border-field: #4b6078;
  --border-radio: #52657d;
  --surface-code: #07101c;
  --border-code: #1e2d42;

  /* ---- Navigation ---------------------------------------------------- */
  --nav-active-bg: #12263b;
  --nav-icon-bg: #1a2b40;
  --nav-hover-bg: #0f1d30;

  /* ---- Accent -------------------------------------------------------- */
  --accent: #17d4c1;               /* primary action / active */
  --accent-text: #5eead4;          /* accent used as text */
  --accent-brand-sub: #6ee7d8;
  --accent-soft-bg: #123a39;       /* soft accent pill / check box */
  --accent-status-bg: #0e2b2a;     /* status pill in top bar */
  --accent-progress-bg: #103833;
  --on-accent: #06201e;            /* text on solid accent */
  --on-day: #07111f;               /* text on solid day-colour pill */
  --cyan: #67e8f9;
  --cyan-soft-bg: #152a36;
  --cyan-lab-bg: #122c38;
  --sky: #7dd3fc;
  --sky-soft-bg: #16293b;
  --violet: #c4b5fd;
  --amber: #fde68a;
  --rose: #fda4af;
  --orange: #fdba74;

  /* ---- Pills --------------------------------------------------------- */
  --pill-bg: #172537;
  --pill-text: #afc0d3;
  --pill-strong-text: #cbd8e5;
  --pill-ghost-bg: #121e2d;
  --pill-ghost-text: #b8c7d9;
  --pill-time-bg: #172033;
  --pill-time-text: #94a3b8;

  /* ---- Text ---------------------------------------------------------- */
  --text-title: #f8fafc;
  --text-strong: #e6eef7;
  --text-lesson: #dde8f5;
  --text-body: #a6b5c8;
  --text-lead: #aab9ca;
  --text-list: #c2d0df;
  --text-muted: #8ea1b8;
  --text-dim: #71839a;
  --text-faint: #53657c;
  --text-nav: #91a2b8;
  --text-crumb: #7f93ab;
  --text-option: #d7e2ec;

  /* ---- Progress ------------------------------------------------------ */
  --track-bg: #1d2737;
  --ring-track: #1c2b3e;

  /* ---- Callouts ------------------------------------------------------ */
  --callout-key-bg: #10261f;
  --callout-key-border: #1f5748;
  --callout-key-label: #5eead4;
  --callout-key-text: #dbfff9;
  --callout-bridge-bg: #18182b;
  --callout-bridge-border: #393451;
  --callout-bridge-label: #c4b5fd;
  --callout-bridge-text: #d6d0ef;
  --callout-info-bg: #0e2230;
  --callout-info-border: #1c4a5c;
  --callout-info-label: #67e8f9;
  --callout-info-text: #d3f4fb;
  --callout-warn-bg: #272010;
  --callout-warn-border: #5c4a1d;
  --callout-warn-label: #fde68a;
  --callout-warn-text: #fdf3c7;
  --callout-danger-bg: #2a141b;
  --callout-danger-border: #6b2a3a;
  --callout-danger-label: #fda4af;
  --callout-danger-text: #ffe1e6;

  /* ---- Quiz states --------------------------------------------------- */
  --option-selected-bg: #123037;
  --option-selected-border: #2b7770;
  --option-selected-text: #eefffc;
  --option-wrong-bg: #2a141b;
  --option-wrong-border: #7a2f40;
  --option-wrong-text: #ffe9ed;

  /* ---- Day accents (solid pill colour + card tint) ------------------- */
  --day-teal: #5eead4;   --day-teal-bg: #0e1c29;
  --day-sky: #7dd3fc;    --day-sky-bg: #101b2b;
  --day-violet: #c4b5fd; --day-violet-bg: #161a2d;
  --day-amber: #fdba74;  --day-amber-bg: #221a17;
  --day-rose: #fda4af;   --day-rose-bg: #24151c;

  /* ---- Radii --------------------------------------------------------- */
  --r-xs: 5px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 16px;
  --r-2xl: 18px;
  --r-3xl: 20px;
  --r-4xl: 22px;
  --r-5xl: 24px;
  --r-pill: 999px;

  /* ---- Spacing scale ------------------------------------------------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 28px;
  --sp-8: 32px;

  /* ---- Layout -------------------------------------------------------- */
  --sidebar-w: 248px;
  --content-max: 1128px;
  --main-pad-x: 32px;
  --main-pad-top: 28px;
  --main-pad-bottom: 32px;
  --section-gap: 22px;
  --topbar-h: 48px;

  /* ---- Typography ---------------------------------------------------- */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Code", Menlo, Consolas, monospace;
  --lh: 1.45;
  --fs-10: 10px;
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-17: 17px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-22: 22px;
  --fs-24: 24px;
  --fs-26: 26px;
  --fs-28: 28px;
  --fs-30: 30px;

  /* ---- Elevation / motion ------------------------------------------- */
  --shadow-pop: 0 18px 48px rgba(2, 8, 18, 0.55);
  --shadow-hover: 0 8px 24px rgba(2, 8, 18, 0.35);
  --focus-ring: 0 0 0 2px var(--bg-app), 0 0 0 4px var(--accent);
  --overlay: rgba(3, 8, 16, 0.72);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 140ms;
  --dur-med: 240ms;
}

/* --------------------------------------------------------------------------
   Light theme - a token-only override of the dark system above. Surfaces
   invert, accents darken for contrast, structure is unchanged.
   -------------------------------------------------------------------------- */
:root[data-theme="light"] {
  color-scheme: light;

  --bg-app: #f1f5f9;
  --bg-sidebar: #ffffff;
  --border-sidebar: #e2e8f0;
  --glow-color: #18b6d8;

  --surface-primary: #ffffff;
  --border-primary: #d9e2ee;
  --surface-panel: #ffffff;
  --border-panel: #d9e2ee;
  --surface-card: #ffffff;
  --border-card: #d9e2ee;
  --surface-stat: #ffffff;
  --border-stat: #d9e2ee;
  --surface-lab: #ffffff;
  --border-lab: #d9e2ee;
  --surface-well: #f8fafc;
  --border-well: #d9e2ee;
  --surface-learner: #f1f5f9;
  --border-learner: #d9e2ee;
  --surface-row: #f8fafc;
  --border-row: #dbe4ef;
  --surface-row-active: #dcf7f3;
  --border-row-active: #2fb7a9;
  --surface-diagram: #f8fafc;
  --border-diagram: #d9e2ee;
  --surface-node: #ffffff;
  --border-node: #d3deea;
  --surface-option: #f8fafc;
  --border-option: #d3deea;
  --surface-field: #ffffff;
  --border-field: #94a3b8;
  --border-radio: #94a3b8;
  --surface-code: #0f1b2d;
  --border-code: #1e2d42;

  --nav-active-bg: #dcf3f0;
  --nav-icon-bg: #e2e8f0;
  --nav-hover-bg: #eef3f8;

  --accent: #17d4c1;
  --accent-text: #0f766e;
  --accent-brand-sub: #0f766e;
  --accent-soft-bg: #d6f5f1;
  --accent-status-bg: #d6f5f1;
  --accent-progress-bg: #d6f5f1;
  --on-accent: #06201e;
  --on-day: #07111f;
  --cyan: #0e7490;
  --cyan-soft-bg: #def3f8;
  --cyan-lab-bg: #def3f8;
  --sky: #0369a1;
  --sky-soft-bg: #e0f2fe;
  --violet: #6d28d9;
  --amber: #a16207;
  --rose: #be123c;
  --orange: #c2410c;

  --pill-bg: #e6edf5;
  --pill-text: #475569;
  --pill-strong-text: #334155;
  --pill-ghost-bg: #e6edf5;
  --pill-ghost-text: #475569;
  --pill-time-bg: #e6edf5;
  --pill-time-text: #475569;

  --text-title: #0f172a;
  --text-strong: #1e293b;
  --text-lesson: #1e293b;
  --text-body: #475569;
  --text-lead: #475569;
  --text-list: #334155;
  --text-muted: #64748b;
  --text-dim: #64748b;
  --text-faint: #64748b;
  --text-nav: #475569;
  --text-crumb: #64748b;
  --text-option: #1e293b;

  --track-bg: #dbe4ef;
  --ring-track: #dbe4ef;

  --callout-key-bg: #e4f7ef;
  --callout-key-border: #8fd8bd;
  --callout-key-label: #0f766e;
  --callout-key-text: #134e48;
  --callout-bridge-bg: #efeafd;
  --callout-bridge-border: #cabdf5;
  --callout-bridge-label: #6d28d9;
  --callout-bridge-text: #3b2a73;
  --callout-info-bg: #e3f4fa;
  --callout-info-border: #9ed6e6;
  --callout-info-label: #0e7490;
  --callout-info-text: #134556;
  --callout-warn-bg: #fdf3d6;
  --callout-warn-border: #e8cd7a;
  --callout-warn-label: #a16207;
  --callout-warn-text: #5b4107;
  --callout-danger-bg: #fde8ec;
  --callout-danger-border: #f2a6b4;
  --callout-danger-label: #be123c;
  --callout-danger-text: #6b1228;

  --option-selected-bg: #dcf7f3;
  --option-selected-border: #2fb7a9;
  --option-selected-text: #0b3b36;
  --option-wrong-bg: #fde8ec;
  --option-wrong-border: #e08497;
  --option-wrong-text: #6b1228;

  --day-teal: #5eead4;   --day-teal-bg: #ecfbf8;
  --day-sky: #7dd3fc;    --day-sky-bg: #eaf6fe;
  --day-violet: #c4b5fd; --day-violet-bg: #f1edfe;
  --day-amber: #fdba74;  --day-amber-bg: #fef1e2;
  --day-rose: #fda4af;   --day-rose-bg: #fdecef;

  --shadow-pop: 0 18px 48px rgba(15, 23, 42, 0.18);
  --shadow-hover: 0 8px 24px rgba(15, 23, 42, 0.1);
  --focus-ring: 0 0 0 2px var(--bg-app), 0 0 0 4px #0f766e;
  --overlay: rgba(15, 23, 42, 0.5);
}