/* Design tokens — light/dark mode + spacing + typography
 * Tek source: light defaults; [data-theme="dark"] override.
 * data-theme attribute html element'te (head'de cookie/prefers-color-scheme okur).
 */

:root {
    /* Renkler — light */
    --bg: #f7f8fa;
    --bg-elevated: #ffffff;
    --bg-subtle: #f1f3f6;
    --surface: #ffffff;
    --border: #e3e6eb;
    --border-strong: #d1d5db;
    --text: #0f172a;
    --text-muted: #4b5563;
    --text-subtle: #6b7280;

    --primary: #2563eb;
    --primary-hover: #1d4ed8;
    --primary-soft: #dbeafe;
    --on-primary: #ffffff;

    --success: #16a34a;
    --success-soft: #dcfce7;
    --warning: #d97706;
    --warning-soft: #fef3c7;
    --danger: #dc2626;
    --danger-soft: #fee2e2;
    --info: #0891b2;
    --info-soft: #cffafe;

    /* Spacing scale (4px) */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;

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

    /* Shadow */
    --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.05);
    --shadow: 0 1px 3px 0 rgba(0,0,0,0.08), 0 1px 2px -1px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.08), 0 2px 4px -2px rgba(0,0,0,0.04);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.04);

    /* Type scale */
    --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', system-ui, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;

    /* Layout */
    --container-max: 1280px;
    --nav-height: 56px;
}

:root[data-theme="dark"] {
    --bg: #0b1220;
    --bg-elevated: #111827;
    --bg-subtle: #0f172a;
    --surface: #111827;
    --border: #1f2937;
    --border-strong: #374151;
    --text: #f1f5f9;
    --text-muted: #cbd5e1;
    --text-subtle: #94a3b8;

    --primary: #3b82f6;
    --primary-hover: #60a5fa;
    --primary-soft: #1e3a8a;
    --on-primary: #ffffff;

    --success: #22c55e;
    --success-soft: #14532d;
    --warning: #f59e0b;
    --warning-soft: #78350f;
    --danger: #ef4444;
    --danger-soft: #7f1d1d;
    --info: #06b6d4;
    --info-soft: #164e63;

    --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.4);
    --shadow: 0 1px 3px 0 rgba(0,0,0,0.5), 0 1px 2px -1px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.5), 0 2px 4px -2px rgba(0,0,0,0.3);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.5), 0 4px 6px -4px rgba(0,0,0,0.3);
}