/* ==========================================================================
 * Design Tokens — WIL Archive
 * Single source of truth for colors, type, spacing.
 * ========================================================================== */

:root {
  /* --- Colors --- */
  --color-bg:            #FFFFEB;   /* page background */
  --color-text:          #333333;   /* body copy */
  --color-text-dark:     #0A0A0A;   /* footer headings */
  --color-white:         #FFFFFF;   /* photo borders */
  --color-accent-olive:  #8B9349;   /* The Products, product labels */
  --color-accent-teal:   #4BA2AC;   /* The Story */
  --color-accent-blue:   #93A4D1;   /* Newsletter */

  /* --- Type families ---------------------------------------------------
   * Adobe Fonts kit: yxp8ktx
   * - Univers Next Pro              → Body/UI sans (400/700, italic ok)
   * - Univers Next Pro Condensed    → Display sans condensed (700 = "Heavy
   *   Condensed", closest match to Figma's "Univers LT Std 67 Bold Cond.")
   * - Times New Roman               → System serif used for the logo,
   *   display headlines and footer body links.
   * ----------------------------------------------------------------- */
  --font-serif:       "Times New Roman", Times, serif;
  --font-display:     "Times New Roman", Times, serif;
  --font-sans:        "univers-next-pro", "Helvetica Neue", Arial, sans-serif;
  --font-sans-cond:   "univers-next-pro-condensed", "Helvetica Neue Condensed", "Arial Narrow", sans-serif;

  /* Standard weights we use across the theme */
  --fw-regular: 400;
  --fw-heavy:   700;

  /* --- Font sizes (desktop scale from Figma) --- */
  --fs-100: 0.875rem;     /*  14px — footer links            */
  --fs-200: 0.9375rem;    /*  15px — footer headings         */
  --fs-300: 1.25rem;      /*  20px — product labels          */
  --fs-400: 1.75rem;      /*  28px — newsletter subtext      */
  --fs-500: 2.5rem;       /*  40px — header About / Cart     */
  --fs-600: 3.75rem;      /*  60px — hero body copy          */
  --fs-700: 6.25rem;      /* 100px — WIL ARCHIVE logo        */
  --fs-800: 7.5rem;       /* 120px — section headings        */

  /* --- Line heights --- */
  --lh-tight: 1.1;
  --lh-base:  1.4;
  --lh-loose: 1.6;

  /* --- Letter-spacing --- */
  --ls-tight:  -0.04em;
  --ls-snug:   -0.02em;
  --ls-normal: 0;
  --ls-wide:   0.03em;

  /* --- Spacing scale (4px base) --- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* --- Layout --- */
  --container-max: 1920px;
  --container-pad: clamp(1rem, 3vw, 2rem);

  /* --- Header height (for fixed header offset) --- */
  --header-height: 5rem;

  /* --- Component primitives --- */
  --photo-frame:      15px solid var(--color-white);
  --photo-frame-slim: 6px  solid var(--color-white);
}

@media (min-width: 768px) {
  :root { --header-height: 9rem; }
}