/* ==========================================================================
   M'Burger - Design System v9
   Style: Street Food + Élégance - Accessible, Fun, Raffiné
   ========================================================================== */

/* ===== FONTS CUSTOM ===== */
@font-face {
    font-family: 'Billy Ohio';
    src: url('../fonts/billy_ohio-webfont (2).woff2') format('woff2'),
         url('../fonts/billy_ohio-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Billy Ohio Swash';
    src: url('../fonts/billy_ohio_swash-webfont.woff2') format('woff2'),
         url('../fonts/billy_ohio_swash-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    /* ===== PALETTE ===== */

    /* Fond sombre - Noir chaud */
    --mb-dark: #1a1614;
    --mb-dark-warm: #242020;
    --mb-dark-soft: #2e2a28;

    /* Terracotta / Brun chaud - Street food vibes */
    --mb-brown: #8b7355;
    --mb-brown-light: #a68b6a;
    --mb-brown-dark: #6d5a44;

    /* Crème & Beige - Tons clairs */
    --mb-cream: #faf8f5;
    --mb-cream-light: #fdfcfa;
    --mb-cream-medium: #f5f0e8;
    --mb-cream-dark: #e8e0d4;

    /* Accent - Rose poudré doux */
    --mb-accent: #c8a090;
    --mb-accent-light: #ddc0b4;
    --mb-accent-dark: #a8806e;

    /* Accent Street - Orange/Moutarde chaleureux */
    --mb-mustard: #d4a94b;
    --mb-mustard-light: #e6c06a;

    /* Textes */
    --mb-white: #ffffff;
    --mb-text-light: rgba(255, 255, 255, 0.95);
    --mb-text-light-soft: rgba(255, 255, 255, 0.75);
    --mb-text-light-muted: rgba(255, 255, 255, 0.5);
    --mb-text-dark: #2e2c2a;
    --mb-text-dark-soft: #4a4643;
    --mb-text-dark-muted: #7a7572;

    /* États */
    --mb-success: #7a9a6a;
    --mb-error: #c46a5a;

    /* ===== TYPOGRAPHIE ===== */

    /* Display - Serif élégant */
    --mb-font-display: 'Cormorant Garamond', Georgia, serif;
    /* Brush/Street - Billy Ohio expressif */
    --mb-font-brush: 'Billy Ohio', cursive;
    --mb-font-brush-swash: 'Billy Ohio Swash', cursive;
    /* Body - Sans-serif moderne */
    --mb-font-body: 'Inter', -apple-system, sans-serif;

    /* Tailles fluides */
    --mb-text-xs: clamp(0.7rem, 0.65rem + 0.2vw, 0.8rem);
    --mb-text-sm: clamp(0.85rem, 0.8rem + 0.2vw, 0.95rem);
    --mb-text-base: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
    --mb-text-lg: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
    --mb-text-xl: clamp(1.2rem, 1.1rem + 0.4vw, 1.5rem);
    --mb-text-2xl: clamp(1.5rem, 1.2rem + 0.8vw, 2rem);
    --mb-text-3xl: clamp(2rem, 1.5rem + 1.5vw, 2.8rem);
    --mb-text-4xl: clamp(2.5rem, 1.8rem + 2.5vw, 4rem);
    --mb-text-5xl: clamp(3.5rem, 2.5rem + 4vw, 6rem);
    --mb-text-6xl: clamp(4.5rem, 3rem + 5vw, 8rem);
    --mb-text-hero: clamp(5rem, 3.5rem + 6vw, 10rem);
    /* Brush sizes - Billy Ohio */
    --mb-text-brush-sm: clamp(1.3rem, 1.1rem + 0.5vw, 1.6rem);
    --mb-text-brush-md: clamp(1.6rem, 1.3rem + 0.8vw, 2.2rem);
    --mb-text-brush-lg: clamp(2rem, 1.6rem + 1.2vw, 3rem);
    --mb-text-brush-xl: clamp(2.5rem, 2rem + 2vw, 4rem);
    --mb-text-brush-2xl: clamp(3.5rem, 2.5rem + 3vw, 6rem);

    /* Font weights */
    --mb-weight-light: 300;
    --mb-weight-regular: 400;
    --mb-weight-medium: 500;
    --mb-weight-semibold: 600;
    --mb-weight-bold: 700;

    /* Line heights */
    --mb-leading-none: 0.9;
    --mb-leading-tight: 1.05;
    --mb-leading-snug: 1.2;
    --mb-leading-normal: 1.6;
    --mb-leading-relaxed: 1.8;

    /* Letter spacing */
    --mb-tracking-tight: -0.03em;
    --mb-tracking-normal: 0;
    --mb-tracking-wide: 0.05em;
    --mb-tracking-wider: 0.1em;
    --mb-tracking-widest: 0.2em;

    /* ===== ESPACEMENTS ===== */
    --mb-space-xs: 0.5rem;
    --mb-space-sm: 0.75rem;
    --mb-space-md: 1rem;
    --mb-space-lg: 1.5rem;
    --mb-space-xl: 2rem;
    --mb-space-2xl: 3rem;
    --mb-space-3xl: 4rem;
    --mb-space-4xl: 6rem;
    --mb-space-5xl: 8rem;
    --mb-space-6xl: 12rem;

    /* ===== LAYOUT ===== */
    --mb-container: 1400px;
    --mb-container-sm: 900px;
    --mb-gutter: clamp(1.5rem, 5vw, 6rem);
    --mb-gutter-sm: clamp(1rem, 3vw, 2rem);

    /* ===== EFFETS ===== */
    /* Border radius - Mix street/élégant */
    --mb-radius-sm: 4px;
    --mb-radius-md: 8px;
    --mb-radius-lg: 12px;
    --mb-radius-xl: 20px;
    --mb-radius-2xl: 32px;
    --mb-radius-full: 100px;

    /* Transitions */
    --mb-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --mb-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --mb-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --mb-duration-fast: 200ms;
    --mb-duration-base: 350ms;
    --mb-duration-slow: 600ms;

    /* Shadows */
    --mb-shadow-sm: 0 2px 8px rgba(26, 22, 20, 0.08);
    --mb-shadow-md: 0 4px 16px rgba(26, 22, 20, 0.1);
    --mb-shadow-lg: 0 8px 32px rgba(26, 22, 20, 0.12);
    --mb-shadow-xl: 0 16px 48px rgba(26, 22, 20, 0.15);

    /* Z-index */
    --mb-z-base: 1;
    --mb-z-header: 100;
    --mb-z-overlay: 200;
    --mb-z-modal: 300;
}