/* =============================================================
   themes.css — design tokens for light & dark themes
   Change a variable here and it cascades everywhere.
   ============================================================= */

:root {
    /* Typography */
    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        Helvetica, Arial, sans-serif;
    --font-mono: "JetBrains Mono", "SFMono-Regular", ui-monospace, "Cascadia Code",
        Menlo, Consolas, "Liberation Mono", monospace;

    /* Sizing */
    --radius-sm: 6px;
    --radius: 10px;
    --radius-lg: 16px;
    --sidebar-w: 280px;
    --toc-w: 240px;
    --topbar-h: 56px;
    --content-max: 820px;

    /* Motion */
    --transition: 160ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.18);
}

/* ---------------- Light theme (default fallback) ---------------- */
:root,
[data-theme="light"] {
    color-scheme: light;

    --bg: #ffffff;
    --bg-subtle: #f7f8fa;
    --bg-elevated: #ffffff;
    --bg-inset: #f1f3f5;
    --bg-hover: #f1f3f5;
    --bg-active: #eef2ff;

    --border: #e6e8eb;
    --border-strong: #d5d9de;

    --text: #1a1d21;
    --text-muted: #5c6570;
    --text-subtle: #8a929c;

    --accent: #4f46e5;
    --accent-hover: #4338ca;
    --accent-soft: #eef2ff;
    --accent-contrast: #ffffff;

    --mark: #fff2a8;
    --mark-text: #3d3000;

    /* Note / callout variants */
    --info: #2563eb;      --info-bg: #eff6ff;      --info-border: #bfdbfe;
    --tip: #7c3aed;       --tip-bg: #f5f3ff;       --tip-border: #ddd6fe;
    --success: #16a34a;   --success-bg: #f0fdf4;   --success-border: #bbf7d0;
    --warning: #d97706;   --warning-bg: #fffbeb;   --warning-border: #fde68a;
    --danger: #dc2626;    --danger-bg: #fef2f2;    --danger-border: #fecaca;

    --code-bg: #f6f8fa;
    --terminal-bg: #1e2430;
    --terminal-text: #e4e8ef;
    --scrollbar: #c7cdd4;
}

/* ---------------- Dark theme ---------------- */
[data-theme="dark"] {
    color-scheme: dark;

    --bg: #0d1117;
    --bg-subtle: #0a0e14;
    --bg-elevated: #161b22;
    --bg-inset: #1c2230;
    --bg-hover: #1c2230;
    --bg-active: #1d2440;

    --border: #22272e;
    --border-strong: #30363d;

    --text: #e6edf3;
    --text-muted: #9aa4b2;
    --text-subtle: #6b7484;

    --accent: #818cf8;
    --accent-hover: #a5b4fc;
    --accent-soft: #1d2440;
    --accent-contrast: #0d1117;

    --mark: #4d4406;
    --mark-text: #ffe98a;

    --info: #60a5fa;      --info-bg: #10203a;      --info-border: #1e3a5f;
    --tip: #a78bfa;       --tip-bg: #201a3a;       --tip-border: #3a2f66;
    --success: #4ade80;   --success-bg: #0f2a1a;   --success-border: #1e4d33;
    --warning: #fbbf24;   --warning-bg: #2a2109;   --warning-border: #5a4410;
    --danger: #f87171;    --danger-bg: #2c1414;    --danger-border: #5a2020;

    --code-bg: #161b22;
    --terminal-bg: #010409;
    --terminal-text: #d6dde6;
    --scrollbar: #2d333b;
}

/* Sun/moon icon swap driven by theme */
.icon-moon { display: none; }
.icon-sun { display: block; }
[data-theme="dark"] .icon-moon { display: block; }
[data-theme="dark"] .icon-sun { display: none; }