/* ============================================================
   MFALME LUXURY LIVING — DESIGN TOKENS
   ============================================================ */

:root {
    /* --- Brand palette --- */
    --mfalme-black:      #111111;
    --mfalme-charcoal:   #1b1b1b;
    --mfalme-ink:        #171412;
    --mfalme-ivory:      #f8f5ef;
    --mfalme-cream:      #eee8dc;
    --mfalme-sand:       #d8c8ae;
    --mfalme-gold:       #b89b63;
    --mfalme-gold-dark:  #9f8350;
    --mfalme-gold-light: #cdb88e;
    --mfalme-muted:      #77736b;
    --mfalme-white:      #ffffff;
    --mfalme-mist:       #a9a39a;

    /* Semantic surfaces */
    --surface:            var(--mfalme-ivory);
    --surface-alt:        var(--mfalme-white);
    --surface-sand:       var(--mfalme-cream);
    --ink:                var(--mfalme-ink);
    --ink-soft:           #2e2a26;
    --text-body:          #403c36;
    --text-muted:         var(--mfalme-muted);
    --text-on-dark:       var(--mfalme-ivory);
    --text-on-dark-muted: #b9b2a6;
    --accent:             var(--mfalme-gold);
    --accent-strong:      var(--mfalme-gold-dark);
    --hairline:           rgba(23, 20, 18, 0.12);
    --hairline-dark:      rgba(248, 245, 239, 0.14);
    --shadow-card:        0 1px 2px rgba(23, 20, 18, 0.05), 0 18px 40px -22px rgba(23, 20, 18, 0.28);
    --shadow-panel:       0 2px 6px rgba(23, 20, 18, 0.06), 0 30px 60px -30px rgba(23, 20, 18, 0.35);
    --shadow-lift:        0 2px 4px rgba(23, 20, 18, 0.06), 0 28px 60px -28px rgba(23, 20, 18, 0.42);

    /* Typography */
    --font-serif: 'Cormorant Garamond', 'Playfair Display', Georgia, 'Times New Roman', serif;
    --font-sans:  'Manrope', Inter, 'Helvetica Neue', Arial, sans-serif;

    --weight-serif: 500;
    --weight-serif-bold: 600;

    --text-display-xl: clamp(3rem, 8vw, 5.5rem);
    --text-display-lg: clamp(2.5rem, 6vw, 4.25rem);
    --text-heading-xl: clamp(2rem, 4.2vw, 3.05rem);
    --text-heading-lg: clamp(1.5rem, 2.4vw, 2.1rem);
    --text-heading-md: clamp(1.25rem, 1.6vw, 1.5rem);
    --text-body-lg:     1.125rem;
    --text-body:        1rem;
    --text-small:       0.875rem;
    --text-eyebrow:     0.76rem;
    --text-caption:     0.78rem;

    /* Rhythm */
    --section-pad: clamp(4.5rem, 9vw, 8rem);
    --section-pad-sm: clamp(3rem, 6vw, 5rem);
    --container-max: 1320px;
    --gutter: clamp(1rem, 3vw, 2.5rem);

    /* Geometry */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-pill: 999px;

    /* Motion */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --speed-fast: 0.24s;
    --speed-med: 0.45s;
    --speed-slow: 0.8s;
    --speed-slower: 1.2s;

    /* Z-index scale */
    --z-nav: 1000;
    --z-overlay: 1100;
    --z-hover: 1200;
    --z-modal: 1400;
    --z-toast: 1500;
}