/* ---------------------------------------------------------------------------
   Design tokens.
   The palette is deliberately monochrome: no brand colour anywhere. All colour
   on the page comes from photography. Square corners, no shadows, no gradients.
   --------------------------------------------------------------------------- */

:root {
  /* Surfaces */
  --c-bg: #ffffff;
  --c-bg-alt: #f5f5f5;      /* alternating band: newsletter, quiet sections */
  --c-bg-invert: #000000;   /* footer, countdown strip, announcement bar */
  --c-placeholder: #e8e8e8;

  /* Ink */
  --c-fg: #111111;
  --c-fg-muted: #565656;
  --c-fg-invert: #ffffff;
  --c-fg-invert-muted: rgba(255, 255, 255, 0.72);

  /* Lines */
  --c-line: #aaaaaa;
  --c-line-soft: rgba(170, 170, 170, 0.45);
  --c-line-invert: rgba(255, 255, 255, 0.28);

  /* Buttons */
  --c-btn: #111111;
  --c-btn-hover: #444444;
  --c-btn-fg: #ffffff;

  /* Feedback (used only for form state, never decoration) */
  --c-error: #b00020;
  --c-success: #1b6b3a;

  /* Type */
  --font-heading: "Oswald", "Arial Narrow", sans-serif;
  --font-body: "Cabin", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --fs-body: 1.0625rem;      /* 17px */
  --fs-body-sm: 0.9375rem;   /* 15px */
  --fs-body-xs: 0.8125rem;   /* 13px */
  --lh-body: 1.6;

  /* Fluid heading scale. The display size tops out at the reference's 60px. */
  --fs-display: clamp(2.75rem, 1.6rem + 4.6vw, 3.75rem);   /* hero, 44 -> 60px */
  --fs-h1: clamp(2.25rem, 1.4rem + 3.4vw, 3.25rem);
  --fs-h2: clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem);
  --fs-h3: clamp(1.25rem, 1.0rem + 1.0vw, 1.5rem);
  --lh-heading: 1.08;

  --tracking-label: 0.05em;  /* product titles, section labels */
  --tracking-nav: -0.005em;

  /* Space */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;

  /* Section rhythm: ~100-140px vertical on desktop, tightened on small screens */
  --section-pad: clamp(3.5rem, 2rem + 6vw, 8.75rem);
  --section-pad-tight: clamp(2.5rem, 1.5rem + 4vw, 5rem);

  /* Layout */
  --page-max: 1344px;
  --page-gutter: clamp(1rem, 0.5rem + 2vw, 3rem);
  --measure: 62ch;           /* narrow centred text blocks */

  --header-h: 5.25rem;
  --announcement-h: 2rem;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 160ms;
  --dur: 320ms;
  --dur-slow: 640ms;

  --z-header: 100;
  --z-drawer: 200;
  --z-modal: 300;
}

/* The design commits to a single light look, so the dark-mode block only keeps
   form controls and scrollbars from being painted dark by the UA. */
:root {
  color-scheme: light;
}