/**
 * variables.css — Design tokens
 * -----------------------------------------------------------------------------
 * Central place for colour, typography, spacing, layout and motion values.
 * Change the look of the whole site from here first. Every other stylesheet
 * references these custom properties rather than hard-coded values.
 */

:root {
  /* ---- Colour ---------------------------------------------------------- */
  /* A warm, minimal palette that lets the photography lead. */
  --color-bg:        #faf8f4; /* page background — warm off-white          */
  --color-bg-alt:    #f2efe8; /* alternating / recessed sections           */
  --color-ink:       #1c1b18; /* primary text — near-black                 */
  --color-ink-soft:  #56534c; /* secondary text                           */
  --color-muted:     #8c887f; /* captions, meta, hairline labels           */
  --color-line:      #e2ddd2; /* hairline borders / dividers               */
  --color-accent:    #9a7b53; /* restrained bronze — used sparingly        */
  --color-dark:      #16150f; /* dark sections (contact / overlays)        */
  --color-on-dark:   #f3efe7; /* text on dark backgrounds                  */
  --color-on-dark-soft: #b7b1a4;

  /* ---- Typography ------------------------------------------------------ */
  --font-display: "Cormorant Garamond", "Hoefler Text", Georgia, serif;
  --font-sans:    "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI",
                  Helvetica, Arial, sans-serif;

  /* Fluid type scale (clamp: min, preferred (vw-based), max). */
  --fs-hero:    clamp(2.75rem, 7vw, 6.5rem);
  --fs-h2:      clamp(2rem, 4vw, 3.5rem);
  --fs-h3:      clamp(1.6rem, 2.4vw, 2.25rem);
  --fs-lead:    clamp(1.15rem, 1.6vw, 1.5rem);
  --fs-body:    1.0625rem;
  --fs-small:   0.875rem;
  --fs-eyebrow: 0.75rem;

  --lh-tight:   1.1;
  --lh-snug:    1.3;
  --lh-body:    1.7;

  --tracking-eyebrow: 0.22em; /* wide letter-spacing for labels */
  --tracking-wide:    0.08em;

  /* ---- Spacing scale --------------------------------------------------- */
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;
  --space-3xl: 9rem;

  /* Vertical rhythm for full sections (fluid). */
  --section-pad: clamp(4rem, 9vw, 9rem);

  /* ---- Layout ---------------------------------------------------------- */
  --container-max:  1280px;   /* standard content width  */
  --container-wide: 1600px;   /* wider media rows        */
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --header-h: 76px;

  /* ---- Effects & motion ------------------------------------------------ */
  --radius-sm: 2px;           /* deliberately minimal, near-square corners */
  --radius-md: 4px;
  --shadow-soft: 0 18px 50px rgba(20, 18, 12, 0.16);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 0.25s;
  --dur:      0.5s;
  --dur-slow: 0.9s;

  /* ---- Z-index scale --------------------------------------------------- */
  --z-header:   100;
  --z-nav:      110;
  --z-lightbox: 200;
}

/* Breakpoints are documented here for reference; media queries live with the
   components they affect (mobile-first). Keep these values consistent:
     small   : up to  600px   (phones)
     medium  : 601–900px      (large phones / tablets)
     large   : 901–1200px     (small laptops)
     xlarge  : 1201px+        (desktops / large monitors)
*/