/* =================================================================
   tokens.css — Single source of truth for all design tokens
   Loaded first by every page. No component styles — only custom properties.
   ================================================================= */

/* ─── Dark Theme (default) ───────────────────────────────────────── */

:root {
    /* Colors: Base */
    --text: #e8e8ed;
    --text-muted: #a8a8ba;
    --text-dim: #8888a0;
    --bg: #0c0c10;
    --bg-sidebar: #101014;
    --bg-card: #141418;
    --bg-card-hover: #1a1a1f;
    --border: #1e1e25;
    --border-hover: #2e2e38;
    --accent: #667eea;
    --accent-dim: rgba(102, 126, 234, 0.15);
    --accent-glow: rgba(102, 126, 234, 0.06);
    --accent-text: #8da0f2;

    /* Colors: Semantic */
    --green: #4ade80;
    --green-dim: rgba(74, 222, 128, 0.1);
    --orange: #fb923c;
    --orange-dim: rgba(251, 146, 60, 0.1);
    --red: #f87171;

    /* Colors: Badge semantic */
    --badge-bg: rgba(255, 255, 255, 0.06);
    --badge-success: #6fcf97;
    --badge-success-bg: rgba(111, 207, 151, 0.1);
    --badge-warning: #d4a052;
    --badge-warning-bg: rgba(212, 160, 82, 0.1);
    --badge-error: #e07575;
    --badge-error-bg: rgba(224, 117, 117, 0.1);
    --badge-info: #7eb8f0;
    --badge-info-bg: rgba(126, 184, 240, 0.1);
    --badge-muted: #9a9aaa;
    --badge-muted-bg: rgba(154, 154, 170, 0.1);
    --badge-purple: #b09adf;
    --badge-purple-bg: rgba(176, 154, 223, 0.1);

    /* Colors: Code */
    --bg-code: #18181e;
    --bg-code-inline: #1c1c24;
    --code-bar-bg: rgba(255, 255, 255, 0.02);

    /* Colors: Chrome */
    --header-bg: rgba(12, 12, 16, 0.85);
    --dropdown-bg: rgba(12, 12, 16, 0.95);
    --sidebar-hover: rgba(255, 255, 255, 0.03);
    --overlay-bg: rgba(0, 0, 0, 0.5);
    --shadow-sidebar: rgba(0, 0, 0, 0.4);

    /* Spacing */
    --header-height: 56px;
    --sidebar-width: 220px;
    --toc-width: 240px;

    /* Radii */
    --radius: 8px;
    --radius-sm: 6px;
    --radius-xs: 4px;

    /* Typography: Font families */
    --font-sans:
        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
        sans-serif;
    --font-mono: "SF Mono", Monaco, Menlo, "Cascadia Code", Consolas, monospace;

    /* Typography: Font-size scale */
    --fs-2xs: 11px;
    --fs-xs: 12px;
    --fs-sm: 13px;
    --fs-ui: 14px;
    --fs-base: 15px;
    --fs-md: 16px;
    --fs-lg: 17px;
    --fs-xl: 20px;
    --fs-2xl: 22px;
    --fs-3xl: 27px;
    --fs-4xl: 36px;
    --fs-5xl: 48px;
    --fs-6xl: 78px;
}

/* ─── Light Theme ────────────────────────────────────────────────── */

[data-theme-mode="light"] {
    /* Colors: Base */
    --text: #1a1a2e;
    --text-muted: #40405a;
    --text-dim: #5c5c78;
    --bg: #ffffff;
    --bg-sidebar: #f5f5f8;
    --bg-card: #f0f0f5;
    --bg-card-hover: #e8e8f0;
    --border: #dcdce5;
    --border-hover: #c0c0d0;
    --accent: #4a5cd8;
    --accent-dim: rgba(74, 92, 216, 0.08);
    --accent-glow: rgba(74, 92, 216, 0.04);
    --accent-text: #4a5cd8;

    /* Colors: Semantic */
    --green: #16a34a;
    --green-dim: rgba(22, 163, 74, 0.08);
    --orange: #ea580c;
    --orange-dim: rgba(234, 88, 12, 0.08);
    --red: #dc2626;

    /* Colors: Badge semantic */
    --badge-bg: #f0f0f2;
    --badge-success: #1b6e20;
    --badge-success-bg: #e1f0e2;
    --badge-warning: #7a5000;
    --badge-warning-bg: #f5ede0;
    --badge-error: #a21c1c;
    --badge-error-bg: #f8e2e2;
    --badge-info: #1a5296;
    --badge-info-bg: #e2ecf7;
    --badge-muted: #444454;
    --badge-muted-bg: #e8e8ec;
    --badge-purple: #4a3590;
    --badge-purple-bg: #eae6f5;

    /* Colors: Code */
    --bg-code: #f0f0f5;
    --bg-code-inline: #eaeaf0;
    --code-bar-bg: rgba(0, 0, 0, 0.02);

    /* Colors: Chrome */
    --header-bg: rgba(255, 255, 255, 0.85);
    --dropdown-bg: rgba(255, 255, 255, 0.95);
    --sidebar-hover: rgba(0, 0, 0, 0.03);
    --overlay-bg: rgba(0, 0, 0, 0.3);
    --shadow-sidebar: rgba(0, 0, 0, 0.15);
}