/*
 * Lydore design tokens.
 * One source for colour, type, spacing and the few shared shapes.
 * Every value below traces to something confirmed: the logo source file,
 * the packaging photography, or a ruling in relay/lydore/.
 * Nothing here is a guess, and no value is repeated in a component file.
 */

:root {
  /* ---------------------------------------------------------------
   * BRAND COLOUR
   * Gold is measured from the vector logo source file.
   * There are exactly TWO Lydore box colours, powder blue and brown
   * (Lydia, 2026-09-23). Both are sampled from the real boxes and are
   * PROVISIONAL until the printer's reference arrives. The deep red and
   * dark green boxes visible in some product photography are styling
   * props, not Lydore packaging, and must not enter this palette.
   * The bright red mark (#E61F26) is retired for the website, by
   * Lydia's decision 2026-09-23. It must not reappear here.
   * --------------------------------------------------------------- */
  --lyd-gold: #b4a45c;
  --lyd-gold-deep: #8c7d3f;      /* darkened gold, for text that must pass contrast */
  --lyd-blue: #7296ba;           /* powder blue, provisional, from packaging */
  --lyd-blue-deep: #40607f;      /* darkened blue, for text on light grounds */
  --lyd-brown: #842a12;          /* box brown, provisional, from packaging */

  /* ---------------------------------------------------------------
   * NEUTRALS
   * The site breathes through these. Brand colour is the accent, never
   * the ground, per the brief's colour section.
   * --------------------------------------------------------------- */
  --lyd-ivory: #f7f4ee;
  --lyd-cream: #efe9df;
  --lyd-stone: #d9d2c7;
  --lyd-ink: #1c1a18;            /* body copy */
  --lyd-ink-soft: #55504a;       /* secondary copy */
  --lyd-white: #ffffff;

  /* ---------------------------------------------------------------
   * COLOUR ROLES
   * Components reference these, never the raw brand values, so a
   * palette correction changes one line rather than fifty.
   * Text pairings are fixed by measured contrast:
   *   white on blue        3.09:1  large text only
   *   ink on blue          5.33:1  passes
   *   white on brown       9.05:1  passes
   *   gold on white        2.50:1  accent only, never text
   *   gold on ink          6.60:1  passes
   * --------------------------------------------------------------- */
  --lyd-bg: var(--lyd-ivory);
  --lyd-bg-alt: var(--lyd-cream);
  --lyd-bg-dark: var(--lyd-ink);
  --lyd-text: var(--lyd-ink);
  --lyd-text-muted: var(--lyd-ink-soft);
  --lyd-text-on-dark: var(--lyd-ivory);
  --lyd-rule: var(--lyd-stone);
  --lyd-accent: var(--lyd-gold);            /* rules, marks, small flourishes */
  --lyd-accent-text: var(--lyd-gold-deep);  /* the only gold allowed to carry text */
  --lyd-button-bg: var(--lyd-ink);
  --lyd-button-text: var(--lyd-ivory);

  /* ---------------------------------------------------------------
   * TYPE
   * An editorial serif for headlines and an unfussy sans for
   * everything functional, per the brief's typography section.
   * Scale is fluid so the smallest supported screen is the base case.
   * --------------------------------------------------------------- */
  --lyd-font-display: "Playfair Display", "Times New Roman", serif;
  --lyd-font-body: "Jost", "Helvetica Neue", Arial, sans-serif;

  --lyd-step--1: clamp(0.78rem, 0.76rem + 0.1vw, 0.84rem);
  --lyd-step-0: clamp(0.95rem, 0.92rem + 0.15vw, 1.05rem);
  --lyd-step-1: clamp(1.15rem, 1.05rem + 0.4vw, 1.4rem);
  --lyd-step-2: clamp(1.45rem, 1.25rem + 0.9vw, 2rem);
  --lyd-step-3: clamp(1.9rem, 1.5rem + 1.8vw, 3rem);
  --lyd-step-4: clamp(2.4rem, 1.7rem + 3.2vw, 4.5rem);

  --lyd-tracking-wide: 0.18em;   /* nav, buttons, eyebrows */
  --lyd-tracking-logo: 0.26em;   /* wordmark treatment */
  --lyd-leading-tight: 1.12;
  --lyd-leading-body: 1.65;

  /* ---------------------------------------------------------------
   * SPACE, MEASURE, SHAPE
   * --------------------------------------------------------------- */
  --lyd-space-2xs: 0.25rem;
  --lyd-space-xs: 0.5rem;
  --lyd-space-s: 0.875rem;
  --lyd-space-m: 1.5rem;
  --lyd-space-l: 2.5rem;
  --lyd-space-xl: 4rem;
  --lyd-space-2xl: 6.5rem;
  --lyd-space-section: clamp(3.5rem, 2rem + 6vw, 7.5rem);

  --lyd-measure: 62ch;           /* readable line length for editorial copy */
  --lyd-container: 1280px;
  --lyd-gutter: clamp(1.25rem, 0.6rem + 2.6vw, 3.5rem);

  --lyd-radius: 2px;             /* nearly square. Restrained, not soft */
  --lyd-border: 1px solid var(--lyd-rule);
  --lyd-transition: 420ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* A viewer who prefers less motion gets none of it. */
@media (prefers-reduced-motion: reduce) {
  :root { --lyd-transition: 1ms linear; }
}