/* Design tokens. Names prefixed --bg/--text/--border are also consumed by admin.css. */

:root {
    color-scheme: light;

    --bg-page: #fafaf9;
    --bg-card: #ffffff;
    --bg-subtle: #f4f4f2;
    --bg-hover: #efefec;

    --text-primary: #18181b;
    --text-secondary: #62626b;
    --text-tertiary: #9a9aa2;

    --border-subtle: #e7e7e4;
    --border-strong: #d6d6d2;

    --primary: #18181b;
    --primary-hover: #2e2e33;
    --primary-fg: #fafaf9;

    --live: #16a34a;
    --live-soft: rgba(22, 163, 74, 0.14);
    --accent-error: #dc2626;
    --accent-success: #16a34a;
    --focus-ring: rgba(24, 24, 27, 0.14);

    --shadow-sm: 0 1px 2px rgba(24, 24, 27, 0.04);
    --shadow-md: 0 1px 2px rgba(24, 24, 27, 0.04), 0 8px 24px -8px rgba(24, 24, 27, 0.10);

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;

    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;

    --ease: 0.15s ease-out;
}

html[data-theme="dark"] {
    color-scheme: dark;

    --bg-page: #0e0e10;
    --bg-card: #161618;
    --bg-subtle: #1d1d20;
    --bg-hover: #242428;

    --text-primary: #f4f4f5;
    --text-secondary: #a1a1aa;
    --text-tertiary: #63636b;

    --border-subtle: #26262a;
    --border-strong: #35353b;

    --primary: #f4f4f5;
    --primary-hover: #ffffff;
    --primary-fg: #0e0e10;

    --live: #4ade80;
    --live-soft: rgba(74, 222, 128, 0.16);
    --accent-error: #f87171;
    --accent-success: #4ade80;
    --focus-ring: rgba(244, 244, 245, 0.16);

    --shadow-sm: none;
    --shadow-md: 0 8px 24px -8px rgba(0, 0, 0, 0.6);
}