/* ============================================
   2MFBY — Design Tokens — Dark Luxury Edition
   Conciergerie Premium · Malte & Bretagne
   ============================================ */

:root {
    /* ── Palette Brand — Terracotta Luxury ── */
    --color-brand-500: #C8896E;
    /* terracotta principal */
    --color-brand-600: #A96D54;
    /* terracotta foncé (hover) */
    --color-brand-400: #D9A48C;
    /* terracotta clair */
    --color-brand-100: rgba(200, 137, 110, .12);
    /* tint subtil sur dark */
    --color-brand-glow: rgba(200, 137, 110, .22);
    /* glow pour shadows */

    /* ── Palette Gold accent ── */
    --color-gold: #C9A96E;
    /* or chaud */
    --color-gold-light: rgba(201, 169, 110, .15);

    /* ── Neutrals — Luxury Dark Scale ── */
    --color-neutral-950: #0D0D0D;
    /* fond ultra-sombre */
    --color-neutral-900: #141414;
    /* fond principal dark */
    --color-neutral-850: #1C1C1C;
    /* cards dark */
    --color-neutral-800: #242424;
    /* surfaces légèrement relevées */
    --color-neutral-700: #333333;
    /* bordures, dividers */
    --color-neutral-500: #9CA3AF;
    /* texte muted (contraste amélioré) */
    --color-neutral-400: #9CA3AF;
    /* texte secondaire (contraste amélioré) */
    --color-neutral-200: #D1D5DB;
    /* texte de corps (contraste amélioré) */
    --color-neutral-100: #E5E7EB;
    /* texte clair (contraste amélioré) */
    --color-neutral-50: #F5F0EB;
    /* titres (contraste amélioré) */

    /* ── Surfaces ── */
    --color-surface-0: #1C1C1C;
    /* surface principale (cartes) */
    --color-surface-1: #242424;
    /* surface secondaire */
    --color-surface-glass: rgba(255, 255, 255, .04);
    /* glassmorphism */
    --color-surface-glass-border: rgba(255, 255, 255, .08);
    --color-surface-inv: #FFFFFF;
    /* inversion : texte blanc sur dark */

    /* ── Sémantique ── */
    --color-success: #4ADE80;
    --color-success-bg: rgba(45, 154, 95, .12);
    --color-success-border: rgba(45, 154, 95, .25);
    --color-warning: #C9A96E;
    --color-warning-bg: rgba(201, 169, 110, .12);
    --color-warning-border: rgba(201, 169, 110, .3);
    --color-error: #C0392B;

    /* ── Background page ── */
    --color-page-bg: #141414;

    /* ── Typographie ── */
    --font-display: 'Playfair Display', Georgia, serif;
    --font-body: 'Inter', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    /* Display */
    --text-display-size: clamp(2.5rem, 5vw, 5rem);
    --text-display-weight: 700;
    --text-display-lh: 1.1;

    /* H1 (+20% desktop, +15% mobile approx, lh 1.15) */
    --text-h1-size: clamp(2.8rem, 5.2vw, 4.8rem);
    --text-h1-weight: 700;
    --text-h1-lh: 1.15;

    /* H2 (+20% desktop, +15% mobile approx, lh 1.15) */
    --text-h2-size: clamp(2.2rem, 4.0vw, 3.6rem);
    --text-h2-weight: 600;
    --text-h2-lh: 1.15;

    /* H3 */
    --text-h3-size: clamp(1.125rem, 1.5vw, 1.5rem);
    --text-h3-weight: 600;
    --text-h3-lh: 1.3;

    /* H4 */
    --text-h4-size: clamp(1rem, 1.2vw, 1.25rem);
    --text-h4-weight: 600;
    --text-h4-lh: 1.4;

    /* Body */
    --text-body-lg-size: clamp(1rem, 1.1vw, 1.125rem);
    --text-body-lg-lh: 1.65;

    --text-body-size: 1rem;
    --text-body-lh: 1.6;

    --text-body-sm-size: 0.875rem;
    --text-body-sm-lh: 1.55;

    /* Labels & Prices */
    --text-label-size: 0.8125rem;
    --text-label-weight: 500;
    --text-label-ls: 0.08em;

    --text-price-size: clamp(1.5rem, 2.5vw, 2.5rem);
    --text-price-weight: 700;
    --text-price-lh: 1.1;

    --text-cta-size: 0.9375rem;
    --text-cta-weight: 600;
    --text-cta-ls: 0.02em;

    /* ── Espacement — Grille 8px ── */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-8: 48px;
    --space-10: 64px;
    --space-12: 80px;
    --space-16: 120px;
    --space-20: 160px;

    /* ── Layout ── */
    --content-max-width: 1280px;
    --content-padding: clamp(24px, 5vw, 80px);

    /* ── Border Radius ── */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 24px;
    --radius-full: 9999px;

    /* ── Ombres — Luxury Dark ── */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, .4), 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .3);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, .55), 0 4px 12px rgba(0, 0, 0, .3);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, .6), 0 8px 24px rgba(0, 0, 0, .35);
    --shadow-brand: 0 4px 24px rgba(200, 137, 110, .35), 0 0 0 1px rgba(200, 137, 110, .1);
    --shadow-gold: 0 4px 24px rgba(201, 169, 110, .2);

    /* ── Motion ── */
    --duration-instant: 80ms;
    --duration-fast: 150ms;
    --duration-normal: 250ms;
    --duration-slow: 350ms;
    --duration-deliberate: 500ms;

    --ease-out: ease-out;
    --ease-in-out: ease-in-out;
    --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}