/* css/theme.css */
/* Design tokens + light/dark themes */

:root {
    color-scheme: light dark;

    /* Surfaces */
    --bg:           light-dark(#f5f5f5, #1a1a1a);
    --bg-elevated:  light-dark(#ffffff, #2d2d2d);
    --border:       light-dark(#d0d0d0, #404040);

    /* Text */
    --text:         light-dark(#1a1a1a, #f0f0f0);
    --text-muted:   light-dark(#666666, #a0a0a0);

    /* Accent */
    --accent:        light-dark(oklch(50% 0.15 145), oklch(65% 0.17 145));
    --accent-hover:  color-mix(in oklch, var(--accent), white 10%);
    --accent-test:   light-dark(oklch(60% 0.15 70), oklch(75% 0.15 70));

    /* Spacing scale */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-6: 24px;
    --space-8: 32px;

    /* Type */
    --font-sans: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --text-xs: 12px;
    --text-sm: 13px;
    --text-base: 14px;
    --text-lg: 16px;

    /* Radius */
    --radius-sm: 3px;
    --radius:    4px;
    --radius-lg: 8px;

    /* Shadow */
    --shadow-menu: 0 8px 16px rgba(0,0,0,0.3);
}

/* Forced themes (Screen Mode toggle) */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }