/* ============================================
   CSS VARIABLES & CUSTOM PROPERTIES
   ============================================ */

:root {
    /* OKLCH Colors - Warm trust palette for community services
       Primary: 235° (trust blue like United Way)
       Backgrounds: 50-55° (warm cream, not cool gray)
       Accent: coral for hope/warmth */
    --lch-ink: 25% 0.02 235;
    --lch-ink-90: 20% 0.02 235;
    --lch-ink-80: 28% 0.02 235;
    --lch-ink-75: 32% 0.02 235;
    --lch-ink-60: 42% 0.015 235;
    --lch-ink-50: 50% 0.015 235;
    --lch-ink-40: 58% 0.01 235;
    --lch-ink-25: 75% 0.008 235;
    --lch-ink-10: 88% 0.005 235;
    --lch-paper: 99% 0.002 90; /* Clean white with tiny warm hint */
    --lch-surface: 97% 0.004 90; /* Neutral surface */
    --lch-surface-tinted: 95% 0.006 90;
    --lch-surface-raised: 99% 0.002 90;

    /* Primary - Trust blue (warmer than teal) */
    --lch-primary: 48% 0.13 235;

    /* Accent - Coral (hope, warmth, action) */
    --lch-accent: 68% 0.14 25;

    /* Success/Care - Teal */
    --lch-success: 55% 0.14 160;

    /* Warning - Amber */
    --lch-amber: 72% 0.14 75;

    /* Purple - Secondary */
    --lch-purple: 55% 0.12 285;

    /* Danger - Coral-red */
    --lch-danger: 58% 0.16 22;

    --lch-selected: 95% 0.03 235;
    --lch-selected-dark: 80% 0.08 235;
    --lch-black: 0% 0 0;
    --lch-white: 100% 0 0;
    --lch-always-white: 100% 0 0;
    --lch-always-black: 0% 0 0;

    /* Semantic Variables */
    --ink: oklch(var(--lch-ink));
    --ink-90: oklch(var(--lch-ink-90));
    --ink-80: oklch(var(--lch-ink-80));
    --ink-75: oklch(var(--lch-ink-75));
    --ink-60: oklch(var(--lch-ink-60));
    --ink-50: oklch(var(--lch-ink-50));
    --ink-40: oklch(var(--lch-ink-40));
    --ink-30: oklch(68% 0.015 235);
    --ink-25: oklch(var(--lch-ink-25));
    --ink-20: oklch(74% 0.012 235);
    --ink-15: oklch(80% 0.012 235);
    --ink-10: oklch(var(--lch-ink-10));
    --ink-08: oklch(var(--lch-ink) / 0.08);
    --ink-05: oklch(var(--lch-ink) / 0.05);
    --ink-12: oklch(var(--lch-ink) / 0.12);

    --paper: oklch(var(--lch-paper));
    --surface: oklch(var(--lch-surface));
    --surface-tinted: oklch(var(--lch-surface-tinted));
    --surface-raised: oklch(var(--lch-surface-raised));

    --primary: oklch(var(--lch-primary));
    --primary-soft: oklch(var(--lch-primary) / 0.1);
    --accent: oklch(var(--lch-accent));
    --purple: oklch(var(--lch-purple));
    --success: oklch(var(--lch-success));
    --success-soft: oklch(var(--lch-success) / 0.12);
    --warning: oklch(var(--lch-amber));
    --warning-soft: oklch(var(--lch-amber) / 0.12);
    --danger: oklch(var(--lch-danger));
    --danger-soft: oklch(var(--lch-danger) / 0.12);
    --selected: oklch(var(--lch-selected));
    --selected-dark: oklch(var(--lch-selected-dark));

    /* Borders */
    --border-subtle: oklch(var(--lch-ink) / 0.06);
    --border-light: oklch(var(--lch-ink) / 0.12);
    --border: var(--ink-15);
    --border-dark: var(--ink-20);
    --border-darker: var(--ink-30);

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 2px 4px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.12);
    --shadow-subtle: 0 0 0 1px oklch(var(--lch-black) / 0.02), 0 2px 4px -1px oklch(var(--lch-black) / 0.08);
    --shadow-card: 0 0 0 1px oklch(var(--lch-black) / 0.03), 0 2px 8px -2px oklch(var(--lch-black) / 0.12), 0 8px 16px -4px oklch(var(--lch-black) / 0.08);
    --shadow-elevated: 0 0 0 1px oklch(var(--lch-black) / 0.03), 0 4px 12px -2px oklch(var(--lch-black) / 0.15), 0 12px 24px -4px oklch(var(--lch-black) / 0.10);

    /* Spacing */
    --space-3xs: 0.25rem;
    --space-2xs: 0.375rem;
    --space-xs: 0.5rem;
    --space-sm: 0.75rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;

    /* Layout Widths */
    --layout-narrow: 600px;
    --layout-content: 756px;
    --layout-wide: 900px;

    /* Typography - Fixed, compact sizes */
    --text-3xs: 10px;
    --text-2xs: 11px;
    --text-xs: 12px;
    --text-sm: 13px;
    --text-base: 14px;
    --text-md: 15px;
    --text-lg: 16px;
    --text-xl: 18px;
    --text-2xl: 24px;
    --text-3xl: 32px;

    /* Radius */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-base: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    /* Transitions */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-bounce: var(--ease-out);
    --transition-fast: 200ms ease-out;
    --transition: 400ms ease-out;
    --transition-slow: 800ms ease-out;

    /* Size Tokens - Button/input heights */
    --size-xs: 24px;
    --size-sm: 28px;
    --size-md: 36px;
    --size-lg: 44px;

    /* Gradient - Trust blue to teal (cohesive, warm) */
    --gradient-brand: linear-gradient(135deg, oklch(48% 0.13 235) 0%, oklch(52% 0.14 200) 100%);
}

/* ============================================
   DARK MODE
   ============================================ */
:root[data-theme="dark"] {
    color-scheme: dark;

    /* LCH components for dark mode */
    --lch-paper: 10% 0.02 200;
    --lch-surface: 14% 0.02 200;
    --lch-ink: 92% 0.015 200;

    --ink: oklch(92% 0.015 200);
    --ink-90: oklch(88% 0.015 200);
    --ink-80: oklch(82% 0.015 200);
    --ink-75: oklch(75% 0.02 200);
    --ink-60: oklch(65% 0.015 200);
    --ink-50: oklch(55% 0.015 200);
    --ink-40: oklch(45% 0.015 200);
    --ink-30: oklch(38% 0.02 200);
    --ink-25: oklch(32% 0.02 200);
    --ink-20: oklch(26% 0.02 200);
    --ink-15: oklch(20% 0.02 200);
    --ink-10: oklch(14% 0.02 200);
    --ink-08: oklch(92% 0.015 200 / 0.08);
    --ink-05: oklch(92% 0.015 200 / 0.05);
    --ink-12: oklch(92% 0.015 200 / 0.12);

    --paper: oklch(10% 0.02 200);
    --surface: oklch(14% 0.02 200);
    --surface-tinted: oklch(17% 0.02 200);
    --surface-raised: oklch(20% 0.02 200);
    --selected: oklch(24% 0.04 200);

    /* Colors - vibrant on dark */
    --primary: oklch(70% 0.14 205);
    --primary-soft: oklch(70% 0.14 205 / 0.15);
    --accent: oklch(78% 0.16 28);
    --purple: oklch(70% 0.14 285);
    --success: oklch(72% 0.16 162);
    --success-soft: oklch(72% 0.16 162 / 0.15);
    --warning: oklch(80% 0.15 78);
    --warning-soft: oklch(80% 0.15 78 / 0.15);
    --danger: oklch(75% 0.18 24);
    --danger-soft: oklch(75% 0.18 24 / 0.15);

    /* Borders - subtle white */
    --border-subtle: oklch(100% 0 0 / 0.05);
    --border-light: oklch(100% 0 0 / 0.08);
    --border: oklch(100% 0 0 / 0.12);
    --border-dark: oklch(100% 0 0 / 0.18);
    --border-darker: oklch(100% 0 0 / 0.25);

    /* Shadows - deep black */
    --shadow-subtle: 0 1px 3px oklch(0% 0 0 / 0.5);
    --shadow-card: 0 4px 12px oklch(0% 0 0 / 0.6);
    --shadow-elevated: 0 8px 24px oklch(0% 0 0 / 0.7);

    /* Gradient for dark mode */
    --gradient-brand: linear-gradient(135deg, oklch(65% 0.16 210) 0%, oklch(70% 0.17 165) 100%);
}