/* SHADE — design tokens
   Source of truth: Shade-Cheat-Sheet.pdf
   Strict palette: Teal, Sand, Black, White only. */

:root {
  /* Brand colors */
  --teal: #166069;
  --sand: #d0a452;
  --black: #000000;
  --white: #ffffff;

  /* Photography overlays (rgba derivatives only — not new brand colors) */
  --teal-fade: rgba(22, 96, 105, 0.85);
  --black-fade-low: rgba(0, 0, 0, 0.18);
  --black-fade-mid: rgba(0, 0, 0, 0.45);

  /* Type — Venice Blvd, single family */
  --font: "Venice Blvd", "Helvetica Neue", Arial, sans-serif;

  /* Fluid type scale (clamp: min, preferred, max) */
  --fs-caption: 0.8125rem;                                 /* 13px */
  --fs-body:    clamp(1rem, 0.95rem + 0.25vw, 1.125rem);   /* 16 → 18 */
  --fs-h3:      clamp(1.125rem, 0.95rem + 0.6vw, 1.75rem); /* 18 → 28 */
  --fs-h2:      clamp(1.5rem, 1rem + 2.2vw, 3.5rem);       /* 24 → 56 */
  --fs-h1:      clamp(2.25rem, 1.4rem + 3.5vw, 6rem);      /* 36 → 96 */
  --fs-display: clamp(2.75rem, 1.2rem + 7vw, 10.5rem);     /* 44 → 168 */

  /* Spacing — 8pt grid */
  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 32px;
  --s-5: 48px;
  --s-6: 64px;
  --s-7: 96px;
  --s-8: 128px;

  /* Section vertical rhythm — fluid */
  --section-y: clamp(96px, 14vw, 224px);

  /* Layout */
  --max-content: 1440px;
  --gutter: clamp(20px, 4vw, 64px);

  /* Motion */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --t-fast: 220ms;
  --t-mid:  420ms;
  --t-slow: 700ms;

  /* Borders */
  --hairline: 1px;
}