/* ==========================================================================
   DESIGN TOKENS — "Atelier Rouge"
   Palette derived from the FIT&MATCH monogram: crimson on near-black.
   Gold is TERTIARY only (review stars / awards) so it never competes.
   ========================================================================== */

:root {
  /* ---- Core surfaces ---------------------------------------------------- */
  --ink:            #0B0B0D;   /* page background, near-black */
  --ink-2:          #0F1013;   /* alternating band */
  --charcoal:       #141519;   /* cards, elevated surfaces */
  --smoke:          #23252B;   /* borders, dividers, inputs */
  --smoke-2:        #2E3138;   /* hover borders */

  /* ---- Brand crimson (from the logo) ------------------------------------ */
  --crimson:        #E01B24;   /* PRIMARY accent */
  --crimson-deep:   #A8121A;   /* pressed, gradient stop */
  --crimson-glow:   #FF4A52;   /* hover lift, focus */
  --crimson-wash:   rgba(224, 27, 36, 0.12);
  --crimson-line:   rgba(224, 27, 36, 0.32);

  /* ---- Text ------------------------------------------------------------- */
  --bone:           #F4F1EA;   /* primary text on dark */
  --bone-dim:       #D9D5CC;   /* secondary on dark */
  --muted:          #9A968D;   /* captions, meta — 4.9:1 on --ink */
  --muted-strong:   #B4B0A6;   /* small text needing more contrast */

  /* ---- Light section (inverted band) ------------------------------------ */
  --light-bg:       #F4F1EA;
  --light-surface:  #FFFFFF;
  --light-text:     #16171A;   /* 15.8:1 on --light-bg */
  --light-muted:    #4A4C52;   /* 8.1:1 on --light-bg — AA compliant */
  --light-border:   #DED9CE;

  /* ---- Tertiary accents -------------------------------------------------- */
  --gold:           #C9A227;   /* review stars ONLY */
  --gold-soft:      #E4CE7F;
  --success:        #3F9B6D;
  --danger:         #E5484D;

  /* ---- Typography -------------------------------------------------------- */
  --font-display: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

  /* Fluid type scale */
  --step--2: clamp(0.69rem, 0.67rem + 0.10vw, 0.75rem);
  --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.92rem);
  --step-0:  clamp(1.00rem, 0.96rem + 0.20vw, 1.13rem);
  --step-1:  clamp(1.20rem, 1.13rem + 0.35vw, 1.42rem);
  --step-2:  clamp(1.44rem, 1.32rem + 0.60vw, 1.80rem);
  --step-3:  clamp(1.73rem, 1.53rem + 1.00vw, 2.28rem);
  --step-4:  clamp(2.07rem, 1.76rem + 1.56vw, 2.89rem);
  --step-5:  clamp(2.49rem, 2.01rem + 2.40vw, 3.66rem);
  --step-6:  clamp(2.99rem, 2.28rem + 3.55vw, 4.63rem);
  --step-7:  clamp(3.58rem, 2.55rem + 5.16vw, 5.86rem);

  --tracking-eyebrow: 0.28em;
  --tracking-wide:    0.12em;
  --tracking-tight:   -0.02em;

  /* ---- Spacing scale ----------------------------------------------------- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 8rem;

  --section-pad: clamp(4rem, 10vw, 8rem);
  --gutter:      clamp(1.25rem, 4vw, 3rem);

  /* ---- Layout ------------------------------------------------------------ */
  --container:      1280px;
  --container-wide: 1480px;
  --container-text: 68ch;

  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-xl:  28px;
  --radius-pill: 999px;

  --header-h:  84px;
  --topbar-h:  44px;

  /* ---- Multi-layer shadows ----------------------------------------------- */
  --shadow-sm:
    0 1px 2px rgba(0, 0, 0, 0.40),
    0 2px 6px rgba(0, 0, 0, 0.28);
  --shadow-md:
    0 1px 2px rgba(0, 0, 0, 0.42),
    0 8px 24px rgba(0, 0, 0, 0.34),
    0 16px 40px rgba(0, 0, 0, 0.22);
  --shadow-lg:
    0 1px 2px rgba(0, 0, 0, 0.45),
    0 8px 24px rgba(0, 0, 0, 0.36),
    0 24px 64px rgba(0, 0, 0, 0.30),
    0 40px 96px rgba(0, 0, 0, 0.20);
  --shadow-crimson:
    0 0 0 1px rgba(224, 27, 36, 0.35),
    0 8px 28px rgba(224, 27, 36, 0.18),
    0 20px 60px rgba(0, 0, 0, 0.42);

  /* ---- Glass ------------------------------------------------------------- */
  --glass-bg:     rgba(11, 11, 13, 0.72);
  --glass-bg-2:   rgba(20, 21, 25, 0.66);
  --glass-border: rgba(224, 27, 36, 0.18);
  --glass-blur:   blur(14px) saturate(140%);

  /* ---- Motion ------------------------------------------------------------ */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --dur-fast:   180ms;
  --dur-base:   260ms;
  --dur-slow:   420ms;
  --dur-reveal: 900ms;

  /* ---- z-index scale (per UX guideline: 10 / 300 / 999 / 9999) ----------- */
  --z-base:     1;
  --z-raised:   5;
  --z-sticky:   10;
  --z-header:   20;
  --z-dropdown: 300;
  --z-overlay:  999;
  --z-toast:    9999;
}

/* Reduced-motion: neutralise durations globally */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast:   0.01ms;
    --dur-base:   0.01ms;
    --dur-slow:   0.01ms;
    --dur-reveal: 0.01ms;
  }
}