/* ==========================================================================
   GLENDA — design tokens

   Navy and warm light. The ground is a soft apricot-cream, the ink and the
   accent are deep navy, and photography is graded through a warm tint rather
   than a cold one. Navy against warm light is the classic expensive pairing —
   it lets a vivid dress carry all the colour without competing with it.

   Every colour, type step, space unit, radius and easing curve lives here and
   nowhere else. Swapping this file re-skins the entire site.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Petrona:ital,wght@0,200..600;1,200..500&family=Familjen+Grotesk:wght@400..700&display=swap');

:root {
  /* ---- Colour ---------------------------------------------------------- */
  --c-canvas:     #F8EDDF;   /* warm light apricot — the ground             */
  --c-surface:    #FCF6EC;   /* a lighter card on top                       */
  --c-ink:        #16203A;   /* deep navy                        13.9:1     */
  --c-ink-soft:   #5A6172;   /*                                   5.5:1     */
  --c-line:       #E2CFB8;

  --c-accent:     #1E2D52;   /* navy — primary action            11.6:1     */
  --c-accent-2:   #2E4A7D;   /* lifted navy for secondary marks             */
  --c-accent-3:   #8A3B2E;   /* rust — errors and sold out        6.7:1     */
  --c-warm:       #E9A94B;   /* the warm tint used on photography           */
  --c-price:      #7B2B3A;   /* maroon — prices only              8.0:1     */
  --c-on-accent:  #F8EDDF;

  --c-focus:      #1E2D52;

  /* ---- Type ------------------------------------------------------------ */
  /* DM Serif Display ships ONE weight — 400 — and no optical-size axis.
     That is not a limitation to work around, it is how the face is drawn:
     it is already heavy and high-contrast at 400, so hierarchy is carried by
     SIZE, not weight. Never ask for 700 or 900 here; the browser answers with
     synthetic bold, which smears the hairlines and is exactly the mush the
     previous face produced. Petrona is retained only as the editorial/quote
     face and for the wordmark. */
  --f-display: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --f-editorial: 'Petrona', Georgia, serif;
  --f-body:    'Familjen Grotesk', system-ui, sans-serif;
  --f-ui:      'Familjen Grotesk', system-ui, sans-serif;
  --f-mono:    'Familjen Grotesk', ui-monospace, monospace;

  --fs-hero:  clamp(3rem, 10vw, 10rem);
  --fs-d1:    clamp(2.5rem, 6.4vw, 5.5rem);
  --fs-d2:    clamp(2rem, 4.4vw, 3.6rem);
  --fs-h1:    clamp(1.75rem, 3.2vw, 2.75rem);
  --fs-h2:    clamp(1.35rem, 2.2vw, 1.95rem);
  --fs-h3:    clamp(1.0625rem, 1.4vw, 1.3rem);
  --fs-body:  clamp(1rem, 0.95vw, 1.0625rem);
  --fs-small: 0.9375rem;
  --fs-micro: 0.8125rem;   /* was 11px — the single worst number on the site */

  /* 0.92 is right for uppercase but collides descenders in sentence case,
     so the tight value lives on the caps classes instead. */
  --lh-display: 1.04;
  --lh-body:    1.65;
  --ls-display: -0.022em;
  --ls-ui:      0.11em;    /* tighter reads confident once the size is up */
  --ls-mark:    0.32em;

  --fw-display: 400;   /* the only weight DM Serif Display has */
  --fw-body:    400;
  --fw-ui:      600;

  /* ---- Space ----------------------------------------------------------- */
  --u: 1rem;
  --gutter: clamp(1.5rem, 5vw, 4.5rem);
  --container: 1360px;
  --container-narrow: 680px;
  --sec-y: clamp(3.5rem, 8vw, 7rem);

  /* ---- Shape ----------------------------------------------------------- */
  --r-sm: 3px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-pill: 999px;
  --border-w: 1px;

  /* ---- Motion ---------------------------------------------------------- */
  --d-fast:  320ms;
  --d-base:  620ms;
  --d-slow:  1200ms;
  --d-xslow: 2000ms;
  --e-out: cubic-bezier(0.37, 0, 0.16, 1);
  --e-signature: cubic-bezier(0.37, 0, 0.16, 1);
  --e-js: tide;

  /* ---- Placeholder tuning ---------------------------------------------- */
  --ph-grain: 0.4;
  --ph-mark: 0.09;

  color-scheme: light;
}