/*
  Design tokens — the single place to retune the whole site.
  Change a value here and every page follows.
*/
:root {
  /* ---- Brand palette ----
     Two accents, two jobs:
       orange = ACTION (buttons, links, cart, the "do this" colour)
       gold   = EDITORIAL (eyebrows, hairlines, decorative flourishes) —
                the "Maison Ambre" luxury layer, warm like amber. */
  --color-orange: #e5570a;
  --color-orange-soft: #ff7a2f;
  --color-orange-dark: #b8480a;

  --color-gold: #a67c3d;        /* antique gold, for light backgrounds */
  --color-gold-soft: #c9a668;   /* brighter gold, for dark backgrounds */

  --color-nearblack: #171310;
  --color-ink-80: rgba(23, 19, 16, 0.82);
  --color-ink-60: rgba(23, 19, 16, 0.6);
  --color-ink-45: rgba(23, 19, 16, 0.45);
  --color-ivory: #faf6f0;
  --color-sand: #f1eae0;
  --color-white: #ffffff;

  /* Lines & surfaces */
  --line: rgba(22, 19, 15, 0.1);
  --line-strong: rgba(22, 19, 15, 0.18);
  --line-light: rgba(250, 247, 242, 0.14);

  --color-success: #2f6f4a;
  --color-error: #b3261e;

  /* ---- Typography ---- */
  --font-serif: "Fraunces", ui-serif, Georgia, serif;
  --font-sans: "Manrope", ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* Fluid display sizes */
  --text-display: clamp(2.6rem, 6.2vw, 5rem);
  --text-h1: clamp(2.1rem, 4.4vw, 3.4rem);
  --text-h2: clamp(1.7rem, 3.2vw, 2.6rem);
  --text-h3: clamp(1.15rem, 1.6vw, 1.4rem);
  --text-body-lg: clamp(1rem, 1.2vw, 1.15rem);
  --text-body: 0.95rem;
  --text-sm: 0.85rem;
  --text-xs: 0.75rem;
  --text-micro: 0.68rem;

  /* Micro-label letterspacing — used for all uppercase eyebrows */
  --track-wide: 0.14em;
  --track-wider: 0.24em;
  --track-widest: 0.32em;

  /* ---- Spacing scale ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 72px;
  --space-8: 104px;
  --space-9: 144px;

  /* Vertical rhythm for full-width sections */
  --section-y: clamp(64px, 9vw, 128px);

  /* ---- Layout ---- */
  --container-max: 1280px;
  --container-narrow: 760px;
  --container-pad: clamp(20px, 4vw, 48px);

  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* ---- Elevation ---- */
  --shadow-sm: 0 1px 2px rgba(22, 19, 15, 0.05), 0 2px 8px rgba(22, 19, 15, 0.04);
  --shadow-md: 0 4px 12px rgba(22, 19, 15, 0.07), 0 12px 32px rgba(22, 19, 15, 0.07);
  --shadow-lg: 0 8px 24px rgba(22, 19, 15, 0.1), 0 32px 64px rgba(22, 19, 15, 0.12);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 0.22s var(--ease-out);
  --t-med: 0.4s var(--ease-out);
  --t-slow: 0.7s var(--ease-out);

  /* ---- Chrome heights ---- */
  --announcement-height: 38px;
  --header-height: 74px;
}

@media (max-width: 640px) {
  :root {
    --header-height: 62px;
    --announcement-height: 34px;
  }
}