/* ─── Design tokens ─────────────────────────────────────────
   All design values live here. Themes override only the
   --color-* variables. Everything else is shared.
   ───────────────────────────────────────────────────────── */

:root {
    /* Light theme (default) */
    --color-bg:            #ffffff;
    --color-surface:       #f7f8fa;
    --color-surface-alt:   #eef0f3;
    --color-border:        #e2e5ea;
    --color-border-strong: #c9cdd4;

    --color-text:          #1a1d23;
    --color-text-muted:    #6b7280;
    --color-text-faint:    #9ba3af;

    --color-primary:       #3b82f6;
    --color-primary-hover: #2563eb;
    --color-primary-faint: #dbeafe;

    --color-danger:        #ef4444;
    --color-success:       #10b981;
    --color-warning:       #f59e0b;
    --color-info:          #3b82f6;

    --shadow-sm:  0 1px 2px rgba(15, 17, 21, 0.04);
    --shadow-md:  0 2px 8px rgba(15, 17, 21, 0.06);
    --shadow-lg:  0 8px 24px rgba(15, 17, 21, 0.08);

    /* Spacing scale */
    --space-2xs: 2px;
    --space-xs:  4px;
    --space-sm:  8px;
    --space-md:  16px;
    --space-lg:  24px;
    --space-xl:  32px;
    --space-2xl: 48px;
    --space-3xl: 64px;

    /* Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;

    /* Transitions */
    --transition-fast: 120ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 320ms ease;

    /* Typography */
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;

    --font-size-xs:   12px;
    --font-size-sm:   13px;
    --font-size-base: 15px;
    --font-size-lg:   17px;
    --font-size-xl:   20px;
    --font-size-2xl:  24px;
    --font-size-3xl:  32px;
    --font-size-4xl:  44px;

    --line-height-tight: 1.25;
    --line-height-base:  1.55;
    --line-height-loose: 1.75;

    /* Layout */
    --container-max: 1120px;
    --sidebar-width: 240px;
    --topbar-height: 60px;

    /* Z-index scale */
    --z-sidebar:  40;
    --z-topbar:   30;
    --z-dropdown: 50;
    --z-modal:    100;
}

[data-theme="dark"] {
    --color-bg:            #0f1115;
    --color-surface:       #161a20;
    --color-surface-alt:   #1c2128;
    --color-border:        #272d36;
    --color-border-strong: #3a4250;

    --color-text:          #e6e9ef;
    --color-text-muted:    #9ba3af;
    --color-text-faint:    #6b7380;

    --color-primary:       #60a5fa;
    --color-primary-hover: #93c5fd;
    --color-primary-faint: rgba(96, 165, 250, 0.15);

    --color-danger:        #f87171;
    --color-success:       #34d399;
    --color-warning:       #fbbf24;

    --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md:  0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.5);
}