/**
 * Design tokens — single source of truth for the learning site.
 * Load first; other stylesheets must not redefine these in :root.
 */

:root {
  /* —— Surfaces (warm neutral shell) —— */
  --bg: #f6f4ef;
  --bg-subtle: #efece5;
  --surface: #fffcf8;
  --surface2: #e8f0ec;
  --text: #0f172a;
  --text-soft: #475569;
  --muted: #4a5568;
  --border: rgba(15, 23, 42, 0.1);
  --border-strong: #ddd8ce;

  /* —— Brand / primary (cyan — intro + utility shell) —— */
  --accent: #0891b2;
  --accent-hover: #0e7490;
  --accent-soft: rgba(8, 145, 178, 0.12);
  --accent2: #6366f1;
  --accent2-soft: rgba(99, 102, 241, 0.1);
  --glow: #22d3ee;
  --glow-dim: rgba(34, 211, 238, 0.35);

  /* —— Course / LMS (coral — scoped to .learn-* and mode-learn-lms) —— */
  --learn-accent: #e85d6a;
  --learn-accent-soft: #fde8eb;
  --learn-accent-dark: #c94a56;
  --learn-border: #e8e4e4;
  --learn-bg: #f7f5f5;

  /* —— Semantic —— */
  --warn: #d97706;
  --danger: #dc2626;

  /* —— Elevation —— */
  --shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 12px 40px rgba(15, 23, 42, 0.08);
  --shadow-glow: 0 0 0 1px rgba(8, 145, 178, 0.15), 0 20px 50px rgba(8, 145, 178, 0.12);

  /* —— Shape & type —— */
  --radius: 14px;
  --radius-sm: 10px;
  --font: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", "Cascadia Code", Consolas, monospace;

  /* —— Layout —— */
  --sidebar-w: 272px;
  --rail-width: 118px;
  --sidebar-bg: #0c0f14;
  --sidebar-border: rgba(148, 163, 184, 0.12);
  --sidebar-text: #94a3b8;
  --sidebar-text-active: #f8fafc;

  /* —— Shell (light sidebar modes) —— */
  --shell-sidebar-bg: #ffffff;
  --shell-sidebar-border: var(--learn-border);

  /* —— Lesson color hierarchy (lesson reader content) —— */
  --color-heading-primary: #1e3a5f;
  --color-heading-accent: #2563eb;
  --color-label: #7c3aed;

  --color-tip-bg: #fffbeb;
  --color-tip-border: #f59e0b;
  --color-tip-text: #92400e;

  --color-warning-bg: #fff1f2;
  --color-warning-border: #f43f5e;
  --color-warning-text: #9f1239;

  --color-success-bg: #f0fdf4;
  --color-success-border: #22c55e;
  --color-success-text: #166534;

  --color-code-bg: #0f172a;
  --color-code-text: #e2e8f0;
  --color-code-border: #1e293b;
  --color-inline-code-bg: #f1f5f9;
  --color-inline-code-text: #0369a1;

  --color-body: #334155;
  --color-muted: #64748b;

  --color-chapter-bg: #f8fafc;
  --color-chapter-border: #2563eb;

  --color-practice-bg: #f5f3ff;
  --color-practice-border: #7c3aed;
  --color-check-bg: #f0fdf4;
  --color-check-border: #16a34a;

  --color-nav-text: #64748b;
  --color-nav-hover: #2563eb;

  /* TOKEN REFACTOR — component-level card tokens (homepage pulse/lab cards).
     Aliases of the semantic palette above; no new colors introduced. */
  --card-border-tip: var(--color-tip-border);        /* orange — tips & problems */
  --card-border-learning: var(--color-heading-accent); /* blue — learning & tech */
  --card-border-fact: var(--color-success-border);   /* green — facts, fun, history */
  --card-border-opinion: var(--color-label);         /* purple — Rana's Take */
  --card-accent-positive: var(--color-success-border);

  /* Visual of the Day background. Gradient stops verified ≥3:1 against
     --color-body (9.02:1 worst case) and --color-muted (4.15:1).
     --color-visual-bg is the solid fallback if the card text ever darkens. */
  --color-visual-bg-start: #f0f9ff;
  --color-visual-bg-end: #e0f2fe;
  --color-visual-bg: #e8f6fe;

  --shadow-elevation-rest: 0 4px 6px -1px rgba(15, 23, 42, 0.07), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
  --shadow-elevation-hover: 0 10px 15px -3px rgba(15, 23, 42, 0.1), 0 4px 6px -4px rgba(15, 23, 42, 0.06);
}