/* ---------- Design tokens — palette « Terrasse du café » ---------- */
:root {
    color-scheme: light dark;

    /* Couleurs tableau */
    --night: #0F1D3D;
    --night-soft: #1A2F52;
    --terrace-yellow: #E8B923;
    --terrace-yellow-hover: #D4A61A;
    --star-turquoise: #4A9FC7;
    --star-turquoise-hover: #3D8AB0;
    --cream: #F7F3EB;
    --cream-warm: #FBF4D9;
    --cream-tint: #E8F4FA;

    /* Rôles UI */
    --brand: var(--star-turquoise);
    --brand-hover: var(--star-turquoise-hover);
    --brand-2: var(--terrace-yellow);
    --brand-3: var(--night);
    --gold: var(--terrace-yellow);
    --gold-soft: var(--cream-warm);
    --teal: #2D6B5E;
    --accent-orange: #C47A2A;
    --on-accent: #FFFFFF;
    --on-brand: var(--night);
    --on-cta: var(--night);
    --rgb-brand: 74, 159, 199;
    --rgb-accent: 232, 185, 35;

    /* Alias legacy — une seule couleur chacun */
    --brand-grad: var(--star-turquoise);
    --brand-grad-soft: var(--cream-tint);
    --brand-grad-warm: var(--cream-warm);
    --brand-grad-cta: var(--terrace-yellow);

    --aurora-1: var(--terrace-yellow);
    --aurora-2: var(--star-turquoise);
    --aurora-3: var(--night);

    --success: #2D6B5E;
    --success-bg: #E4F0EC;
    --whatsapp: #25D366;
    --whatsapp-hover: #20BD5A;
    --whatsapp-dark: #128C7E;
    --warning: var(--terrace-yellow);
    --warning-bg: var(--cream-warm);
    --danger: #B83A3A;
    --danger-bg: #F8E8E8;

    /* Thème clair */
    --bg: var(--cream);
    --bg-elev: #FFFFFF;
    --surface: #FFFFFF;
    --surface-2: var(--cream-warm);
    --surface-hover: #FFFFFF;
    --border: rgba(15, 29, 61, 0.10);
    --border-strong: rgba(15, 29, 61, 0.18);
    --text: var(--night);
    --text-soft: var(--night-soft);
    --text-muted: #5A6B85;

    --grain-opacity: 0.04;
    --grain-blend: multiply;

    --radius-sm: 14px;
    --radius: 22px;
    --radius-lg: 32px;
    --radius-pill: 999px;

    --shadow-sm: 0 4px 14px rgba(15, 29, 61, 0.08);
    --shadow: 0 12px 30px rgba(15, 29, 61, 0.10);
    --shadow-md: 0 12px 30px rgba(15, 29, 61, 0.12);
    --shadow-lg: 0 22px 50px rgba(15, 29, 61, 0.14);
    --shadow-glow: 0 16px 40px rgba(232, 185, 35, 0.28);
    --focus-ring: 0 0 0 4px rgba(74, 159, 199, 0.35);

    --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-display: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, monospace;

    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --container: 1200px;
}

[data-theme='dark'] {
    --bg: #080F1F;
    --bg-elev: #0F1D3D;
    --surface: rgba(255, 255, 255, 0.06);
    --surface-2: rgba(232, 185, 35, 0.10);
    --surface-hover: rgba(255, 255, 255, 0.10);
    --border: rgba(74, 159, 199, 0.18);
    --border-strong: rgba(74, 159, 199, 0.30);
    --text: #F5F0E8;
    --text-soft: #C8D4E8;
    --text-muted: #8A9BB5;
    --brand: #6BB8E0;
    --brand-hover: #8ACCE8;
    --brand-2: #F0C84A;
    --brand-3: #A8C4E8;
    --gold: #F0C84A;
    --on-accent: var(--night);
    --on-brand: var(--night);
    --on-cta: var(--night);
    --brand-grad: var(--star-turquoise);
    --brand-grad-soft: rgba(74, 159, 199, 0.14);
    --brand-grad-warm: rgba(232, 185, 35, 0.12);
    --brand-grad-cta: var(--terrace-yellow);
    --success-bg: rgba(45, 107, 94, 0.25);
    --warning-bg: rgba(232, 185, 35, 0.15);
    --danger-bg: rgba(184, 58, 58, 0.22);
    --grain-opacity: 0.06;
    --grain-blend: soft-light;
    --shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
    --shadow-glow: 0 18px 50px rgba(232, 185, 35, 0.18);
    --focus-ring: 0 0 0 4px rgba(107, 184, 224, 0.35);
}