/* ==============================================
   DESIGN TOKENS - Centralisé pour éviter les répétitions
   ============================================== */

:root {
    /* Color Primitives */
    --color-neutral-0: oklch(100% 0 0);
    /* #ffffff */
    --color-neutral-100: oklch(96.35% 0 0);
    /* #f5f5f5 */
    --color-neutral-200: oklch(94% 0 0);
    /* #EEEEEE */
    --color-neutral-800: oklch(27.42% 0 0);
    /* #2a2a2a */
    --color-neutral-850: oklch(22.86% 0 0);
    /* #1e1e1e */
    --color-neutral-900: oklch(21.4% 0 0);
    /* #1a1a1a */
    --color-neutral-950: oklch(17.76% 0 0);
    /* #121212 */

    --color-primary-10: oklch(94% 0.01 17.5);
    /* #F1E7E8 */
    --color-primary-20: oklch(88% 0.02 20);
    /* #ECD9DC */
    --color-primary-400: oklch(58% 0.198 23.47);
    /* Lighter red for dark mode */
    --color-primary-500: oklch(45.5% 0.198 23.47);
    /* #c22015 (WCAG AA Contrast) */
    --color-primary-600: oklch(41.5% 0.187 23.47);
    /* #9d1515 */

    /* Palette verte (statut chatbot, btn Google) */
    --color-green-500: oklch(64% 0.18 142);
    /* #34A853 */
    --color-green-600: oklch(59% 0.16 150);
    /* #0F9D58 */

    /* Semantic Colors - Light Mode (Default) */
    --bg-color: var(--color-neutral-100);
    --text-color: var(--color-neutral-900);
    --text-inverted: var(--color-neutral-0);
    --accent-color: var(--color-primary-500);
    --accent-hover: var(--color-primary-600);
    --link-color: var(--color-primary-500);
    --modal-bg: var(--color-neutral-0);
    --card-bg: var(--color-neutral-0);
    --border-color: oklch(88% 0.01 23);
    --border-subtle: oklch(85% 0.005 146);
    --focus-color: var(--color-primary-500);
    --badge-bg: var(--color-neutral-200);
    --social-proof-bg: oklch(93.5% 0.016 17.5);
    /* #FCE8E6 warm blush */
    --availability-bg: var(--color-primary-10);
    --availability-border: var(--color-primary-20);

    /* Spacing Tokens (8px Grid) */
    --space-1: 0.5rem;
    /* 8px */
    --space-2: 1rem;
    /* 16px */
    --space-3: 1.5rem;
    /* 24px */
    --space-4: 2rem;
    /* 32px */
    --space-5: 2.5rem;
    /* 40px */
    --space-6: 3rem;
    /* 48px */
    --space-8: 4rem;
    /* 64px */
    --space-0-25: 0.125rem;
    /* 2px */
    --space-0-5: 0.25rem;
    /* 4px */
    --space-0-75: 0.375rem;
    /* 6px */
    --space-1-5: 0.75rem;
    /* 12px */
    --space-1-75: 0.9375rem;
    /* 15px */
    --space-2-5: 1.25rem;
    /* 20px */
    --space-3-25: 3.125rem;
    /* 50px */
    --space-12-5: 6.25rem;
    /* 100px */
    --control-size: 2.75rem;
    /* 44px */
    --icon-size-sm: 1.125rem;
    /* 18px */
    --toggle-ring-size: 2.125rem;
    /* 34px */

    /* Border Radius Tokens */
    --radius-xs: 4px;
    --radius-3: 12px;
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-full: 9999px;
    --radius-pill: 20px;
    --outline-offset: 5px;
    --border-thick: 4px;
    --icon-size-xs: 0.875rem;

    /* Font variables */
    --font-main: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-heading: 'Recoleta Alt', Georgia, serif;
    --font-tech: 'Space Grotesk', monospace;
    --font-alt: 'Lufga', sans-serif;

    /* Text Muted : ratio 4.5:1 garanti sur fond --bg-color clair */
    --text-muted: oklch(42% 0 0);
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: var(--color-neutral-950);
        --text-color: var(--color-neutral-100);
        --text-inverted: var(--color-neutral-900);
        --modal-bg: var(--color-neutral-850);
        --card-bg: var(--color-neutral-850);
        --border-subtle: oklch(35% 0 0);
        --border-color: oklch(35% 0 0);
        --focus-color: var(--color-neutral-0);
        --badge-bg: oklch(32% 0 0);
        --surface-hover: oklch(30% 0 0);
        --social-proof-bg: oklch(23% 0.01 23);
        /* Text Muted : ratio 4.5:1 garanti sur fond --bg-color sombre */
        --text-muted: oklch(65% 0 0);
        --accent-color: var(--color-primary-400);
        --link-color: var(--color-primary-400);
    }
}

:root[data-theme="dark"] {
    --bg-color: var(--color-neutral-950);
    --text-color: var(--color-neutral-100);
    --text-inverted: var(--color-neutral-900);
    --modal-bg: var(--color-neutral-850);
    --card-bg: var(--color-neutral-850);
    --border-subtle: oklch(35% 0 0);
    --border-color: oklch(35% 0 0);
    --focus-color: var(--color-neutral-0);
    --badge-bg: oklch(32% 0 0);
    --surface-hover: oklch(30% 0 0);
    --social-proof-bg: oklch(23% 0.01 23);
    --text-muted: oklch(65% 0 0);
    --accent-color: var(--color-primary-400);
    --link-color: var(--color-primary-400);
}

:root[data-theme="light"] {
    --bg-color: var(--color-neutral-100);
    --text-color: var(--color-neutral-900);
    --text-inverted: var(--color-neutral-0);
    --accent-color: var(--color-primary-500);
    --accent-hover: var(--color-primary-600);
    --link-color: var(--color-primary-500);
    --modal-bg: var(--color-neutral-0);
    --card-bg: var(--color-neutral-0);
    --border-color: oklch(88% 0.01 23);
    --border-subtle: oklch(85% 0.005 146);
    --focus-color: var(--color-primary-500);
    --badge-bg: var(--color-neutral-200);
    --surface-hover: oklch(93% 0 0);
    --text-muted: oklch(42% 0 0);
    --social-proof-bg: var(--color-primary-10);
    --availability-bg: var(--color-primary-10);
    --availability-border: var(--color-primary-20);
}