/* ============================================================
   HIGH BROW SOCIETY — Design Tokens
   Single source of truth for colour, type, spacing and motion.
   ============================================================ */

:root {
  /* --- Colour palette (derived from the logo direction) --- */
  --color-ivory:          #F3E9D9;  /* dominant warm background */
  --color-ivory-deep:     #ECDFC9;  /* slightly deeper ivory for layering */
  --color-cream:          #E8D8BF;  /* soft cream feature panels */
  --color-white:          #FFFDF9;

  --color-charcoal:       #2A1E16;  /* primary text + dark sections */
  --color-charcoal-soft:  #574535;  /* secondary text */
  --color-charcoal-mute:  #8C7A66;  /* captions, meta, eyebrows */

  --color-champagne:      #B36A45;  /* clay accent, used sparingly */
  --color-champagne-deep: #97532F;  /* clay hover / pressed */
  --color-champagne-soft: #E6C9B6;  /* blush tint for fills + frames */

  --color-line:           rgba(42, 30, 22, 0.12);  /* hairline dividers */
  --color-line-soft:      rgba(42, 30, 22, 0.07);

  /* --- Typography --- */
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-sans:    "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;

  /* Fluid type scale — clamp(min, preferred, max) */
  --fs-eyebrow:  clamp(0.72rem, 0.68rem + 0.2vw, 0.82rem);
  --fs-body:     clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --fs-lead:     clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
  --fs-h3:       clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
  --fs-h2:       clamp(2.1rem, 1.5rem + 2.8vw, 3.5rem);
  --fs-display:  clamp(2.85rem, 1.6rem + 6vw, 6.5rem);

  --lh-tight:   1.04;
  --lh-snug:    1.25;
  --lh-body:    1.65;

  --ls-eyebrow: 0.32em;   /* generous tracking for uppercase eyebrows */
  --ls-wide:    0.08em;
  --ls-tight:   -0.01em;

  /* --- Spacing scale (fluid) --- */
  --space-2xs: clamp(0.5rem, 0.45rem + 0.2vw, 0.75rem);
  --space-xs:  clamp(0.75rem, 0.65rem + 0.4vw, 1rem);
  --space-sm:  clamp(0.9rem, 0.8rem + 0.5vw, 1.35rem);
  --space-md:  clamp(1.25rem, 1rem + 1vw, 2rem);
  --space-lg:  clamp(1.85rem, 1.4rem + 1.8vw, 3rem);
  --space-xl:  clamp(2.75rem, 2rem + 3vw, 4.75rem);
  --space-2xl: clamp(3.75rem, 2.6rem + 4vw, 6.5rem);

  /* --- Layout --- */
  --container-max: 1320px;
  --gutter:        clamp(1.25rem, 0.6rem + 3vw, 4rem);
  --header-h:      clamp(84px, 6.5vw, 116px);

  /* --- Radius, shadow, motion --- */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 18px;

  --shadow-soft:  0 18px 50px -28px rgba(42, 30, 22, 0.45);
  --shadow-lift:  0 30px 70px -34px rgba(42, 30, 22, 0.55);

  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   220ms;
  --dur-med:    420ms;
  --dur-slow:   720ms;

  --z-header: 100;
  --z-menu:   200;
}