/* ═══════════════════════════════════════════
   DESIGN TOKENS — LIGHT
   ═══════════════════════════════════════════ */
:root {
    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Surfaces */
    --bg: #fdfdfd;
    --bg-subtle: #f4f4f5;
    --surface: #ffffff;
    --surface-hover: #f9fafb;
    --surface-alt: #f3f4f6;
    --surface-raised: #ffffff;

    /* Borders */
    --border: #e5e7eb;
    --border-subtle: #f3f4f6;
    --border-focus: rgba(16, 163, 127, 0.45);

    /* Text */
    --text-1: #111827;
    --text-2: #4b5563;
    --text-3: #9ca3af;
    --text-inv: #ffffff;

    /* Accent — emerald */
    --accent: #10a37f;
    --accent-hover: #0e9270;
    --accent-subtle: rgba(16, 163, 127, 0.08);
    --accent-ring: rgba(16, 163, 127, 0.25);
    --accent-text: #0c8568;

    /* Semantic */
    --green: #10b981;
    --green-bg: rgba(16, 185, 129, 0.1);
    --green-text: #047857;
    --yellow: #f59e0b;
    --yellow-bg: rgba(245, 158, 11, 0.1);
    --yellow-text: #b45309;
    --red: #ef4444;
    --red-bg: rgba(239, 68, 68, 0.08);
    --red-text: #b91c1c;
    --red-border: rgba(239, 68, 68, 0.2);

    /* Shadows — Premium soft shadows */
    --shadow-xs: 0 1px 2px rgba(17, 24, 39, 0.03);
    --shadow-sm: 0 2px 4px rgba(17, 24, 39, 0.04), 0 1px 2px rgba(17, 24, 39, 0.02);
    --shadow-md: 0 8px 16px -4px rgba(17, 24, 39, 0.06), 0 4px 6px -2px rgba(17, 24, 39, 0.04);
    --shadow-lg: 0 20px 25px -5px rgba(17, 24, 39, 0.08), 0 10px 10px -5px rgba(17, 24, 39, 0.04);
    --shadow-card: 0 0 0 1px rgba(17, 24, 39, 0.04), 0 4px 6px -1px rgba(17, 24, 39, 0.04), 0 12px 32px rgba(17, 24, 39, 0.08);
    --shadow-btn: 0 2px 4px rgba(16, 163, 127, 0.15), 0 1px 2px rgba(17, 24, 39, 0.05);

    /* Radii */
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;

    /* Spacing */
    --space-card: clamp(20px, 4vw, 32px);

    /* Transitions */
    --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --dur: 250ms;

    /* Glow behind card */
    --glow: radial-gradient(circle 600px at 50% 10%, rgba(16, 163, 127, 0.05) 0%, transparent 80%);
}

/* ═══════════════════════════════════════════
   DESIGN TOKENS — DARK
   ═══════════════════════════════════════════ */
[data-theme="dark"] {
    --bg: #030712;
    --bg-subtle: #111827;
    --surface: #1f2937;
    --surface-hover: #374151;
    --surface-alt: #111827;
    --surface-raised: #374151;

    --border: rgba(255, 255, 255, 0.08);
    --border-subtle: rgba(255, 255, 255, 0.04);
    --border-focus: rgba(31, 188, 142, 0.5);

    --text-1: #f9fafb;
    --text-2: #9ca3af;
    --text-3: #6b7280;
    --text-inv: #ffffff;

    --accent: #1fbc8e;
    --accent-hover: #24d4a0;
    --accent-subtle: rgba(31, 188, 142, 0.15);
    --accent-ring: rgba(31, 188, 142, 0.3);
    --accent-text: #34d9a4;

    --green: #10b981;
    --green-bg: rgba(16, 185, 129, 0.15);
    --green-text: #34d399;
    --yellow: #f59e0b;
    --yellow-bg: rgba(245, 158, 11, 0.15);
    --yellow-text: #fbbf24;
    --red: #ef4444;
    --red-bg: rgba(239, 68, 68, 0.15);
    --red-text: #f87171;
    --red-border: rgba(239, 68, 68, 0.25);

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 8px 16px -4px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 10px 10px -5px rgba(0, 0, 0, 0.4);
    --shadow-card: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 16px 40px rgba(0, 0, 0, 0.6);
    --shadow-btn: 0 2px 4px rgba(31, 188, 142, 0.25), 0 1px 2px rgba(0, 0, 0, 0.2);

    --glow: radial-gradient(circle 600px at 50% 10%, rgba(31, 188, 142, 0.08) 0%, transparent 80%);
}

/* ═══════════════════════════════════════════
   RESET
   ═══════════════════════════════════════════ */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

button, a, input, select, .clickable {
    -webkit-tap-highlight-color: transparent;
    outline: none;
    -webkit-touch-callout: none;
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
    border-radius: 2px;
}

html {
    scroll-behavior: smooth;
    overflow-x: clip;
}

body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text-1);
    min-height: 100vh;
    line-height: 1.5;
    padding-top: 72px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
    overflow-x: clip;
}