/* ==========================================================================
   The Cliffs — design tokens
   Palette: the Aravalli ridge at last light. Dark-dominant so photography
   glows; the accent is sunlight (amber), not clay.
   ========================================================================== */

:root {
  /* ---- colour ---- */
  --ink: #101312;          /* primary dark ground — warm-black, faintly green */
  --ink-deep: #0A0C0B;     /* deepest ground, footer + night */
  --stone: #1B201E;        /* raised dark surface, cards */
  --stone-line: #2A302D;   /* hairline on dark */
  --verdigris: #3F6152;    /* supporting mid — foliage, tints */
  --amber: #E0A45C;        /* the light — CTA, hairlines, jaali glow */
  --amber-warm: #EFC08A;   /* amber, lifted — hover */
  --limewash: #E4E2DA;     /* pale ground; body text on dark */
  --limewash-deep: #D6D3C8;/* pale ground, recessed */
  --ash: #8C918C;          /* muted secondary text on dark */
  --ash-dark: #5E635E;     /* muted secondary text on light */

  /* semantic */
  --bg: var(--ink);
  --fg: var(--limewash);
  --muted: var(--ash);
  --rule: var(--stone-line);

  /* ---- type ---- */
  --display: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --body: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* fluid scale — 360px → 1600px viewport */
  --t-hero: clamp(3rem, 9vw, 8.5rem);
  --t-xxl: clamp(2.5rem, 6vw, 5rem);
  --t-xl: clamp(2rem, 4.2vw, 3.4rem);
  --t-lg: clamp(1.5rem, 2.6vw, 2.1rem);
  --t-md: clamp(1.125rem, 1.6vw, 1.375rem);
  --t-body: clamp(1rem, 1.05vw, 1.0625rem);
  --t-sm: 0.9375rem;
  --t-util: 0.6875rem;     /* eyebrows, hour marks, captions */

  /* ---- space ---- */
  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2.5rem;
  --s-5: 4rem;
  --s-6: 6rem;
  --s-7: clamp(3.75rem, 7vw, 7rem);  /* section rhythm */

  /* ---- layout ---- */
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --measure: 62ch;
  --max: 1560px;

  /* ---- motion ---- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.22s;                 /* view cross-fade */
  --dur: 0.8s;
  --dur-slow: 1.4s;
}

/* Sections that sit on the pale ground flip the semantic tokens rather than
   overriding every colour further down. */
.on-light {
  --bg: var(--limewash);
  --fg: var(--ink);
  --muted: var(--ash-dark);
  --rule: rgba(16, 19, 18, 0.14);
}

.on-deep {
  --bg: var(--ink-deep);
}