/* ==========================================================================
   Wayne Whitehair, Specialist Decorator — brand tokens
   Palette: Navy & Warm Stone (Direction 2). No gold.
   Navy sampled from Wayne's logo artwork (#26384A).
   ========================================================================== */

:root {
    /* --- Brand navy (primary) --- */
    --navy-50:  #EEF1F4;
    --navy-100: #D9DFE5;
    --navy-200: #B3BFC9;
    --navy-300: #8597A6;
    --navy-400: #586E80;
    --navy-500: #3C5163;
    --navy-600: #2F4356;
    --navy-700: #26384A; /* base brand navy */
    --navy-800: #1E2C3A;
    --navy-900: #18222C; /* deepest ink */
    --navy-950: #0F1820;

    /* --- Warm neutrals (stone) --- */
    --white:      #FFFFFF;
    --paper:      #F6F4EF; /* off-white section background */
    --bone-100:   #EDEAE3;
    --stone-200:  #D8D3C9; /* borders, dividers */
    --stone-300:  #C3BCAF;
    --stone-400:  #A39B8D;
    --stone-500:  #847E74; /* borders, decorative, large text only */
    --stone-600:  #6B6459; /* muted body text — meets WCAG AA (5.8:1 on white, 5.3:1 on paper) */
    --charcoal-700: #33312E; /* warm body text */
    --charcoal-900: #1F1E1B;

    /* --- Semantic (used sparingly) --- */
    --success: #3F7D58;
    --warning: #C77D34;
    --error:   #B3433A;

    /* --- Roles --- */
    --color-bg:            var(--white);
    --color-bg-alt:        var(--paper);
    --color-bg-dark:       var(--navy-700);
    --color-text:          var(--charcoal-700);
    --color-text-heading:  var(--navy-900);
    --color-text-muted:    var(--stone-600);
    --color-text-on-dark:  var(--paper);
    --color-border:        var(--stone-200);
    --color-action:        var(--navy-700);
    --color-action-hover:  var(--navy-800);
    --color-focus-ring:    var(--navy-400);

    /* --- Typography --- */
    --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif; /* logo + display headings (mixed-case serif fallbacks only) */
    --font-body:    "Mulish", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

    /* Fluid type scale (320 -> 1440px) */
    --text-xs:   clamp(0.69rem, 0.67rem + 0.10vw, 0.75rem);
    --text-sm:   clamp(0.81rem, 0.79rem + 0.11vw, 0.875rem);
    --text-base: clamp(0.94rem, 0.91rem + 0.13vw, 1rem);
    --text-lg:   clamp(1.06rem, 1.02rem + 0.18vw, 1.125rem);
    --text-xl:   clamp(1.19rem, 1.13rem + 0.27vw, 1.25rem);
    --text-2xl:  clamp(1.38rem, 1.28rem + 0.45vw, 1.5rem);
    --text-3xl:  clamp(1.63rem, 1.46rem + 0.71vw, 1.875rem);
    --text-4xl:  clamp(1.88rem, 1.61rem + 1.16vw, 2.25rem);
    --text-5xl:  clamp(2.25rem, 1.79rem + 1.96vw, 3rem);
    --text-6xl:  clamp(2.75rem, 2.04rem + 3.04vw, 4rem);

    --leading-tight: 1.15;
    --leading-snug:  1.3;
    --leading-body:  1.6;
    --tracking-caps: 0.14em; /* SPECIALIST DECORATOR / eyebrows */
    --tracking-display: 0.04em;

    /* --- Spacing (fluid) --- */
    --space-xs:  0.25rem;
    --space-sm:  0.5rem;
    --space-md:  clamp(1rem, 0.9rem + 0.4vw, 1.25rem);
    --space-lg:  clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
    --space-xl:  clamp(2.5rem, 2rem + 2vw, 4rem);
    --space-2xl: clamp(4rem, 3rem + 4vw, 6rem);

    /* --- Radii (slightly rounded, precise) --- */
    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 8px;
    --radius-pill: 9999px;

    /* --- Shadows (restrained) --- */
    --shadow-sm: 0 1px 2px rgba(15, 24, 32, 0.06);
    --shadow-md: 0 4px 10px rgba(15, 24, 32, 0.08);
    --shadow-lg: 0 14px 30px rgba(15, 24, 32, 0.10);

    /* --- Layout --- */
    --container: 1200px;
    --container-wide: 1440px;
    --gutter: clamp(1rem, 4vw, 2rem);

    /* --- Motion (ease-out only; no bounce/elastic) --- */
    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
    --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
    --dur-fast:   160ms;
    --dur-base:   240ms;
    --dur-slow:   600ms;
}