/* =========================================================================
   Tokens — daylight.
   White pages, black type, and one ornament: the sun. The dark surfaces are
   the sea before dawn; they stand in for the pictures and videos to come.
   ========================================================================= */

:root {
  /* A light site whatever the visitor's system theme: form controls follow. */
  color-scheme: light;

  /* ---- Colour ---------------------------------------------------------- */
  --paper: #ffffff;
  --ink: #141414;
  --ink-soft: #45433e;        /* secondary text, 9.6:1 on paper */
  --ink-faint: #6d6a63;       /* tertiary text, 5.3:1 on paper */

  --sun: #ffc62e;             /* the one accent: fills, highlights, markers */
  --sun-deep: #f2a900;        /* hover on sun surfaces */
  --dawn: #fff6de;            /* pale sun: alternate light sections */
  --mist: #f4f5f2;            /* quiet panels, form wells */

  --sea: #0b2a33;             /* media placeholders, dark bands */
  --sea-deep: #061a20;
  --sea-soft: #14414c;
  --on-dark: #ffffff;
  --on-dark-soft: rgba(255, 255, 255, 0.8);
  --on-dark-faint: rgba(255, 255, 255, 0.6);
  --line-on-dark: rgba(255, 255, 255, 0.22);

  --line: rgba(20, 20, 20, 0.13);
  --line-strong: rgba(20, 20, 20, 0.32);
  --line-faint: rgba(20, 20, 20, 0.07);

  --ok: #1d7a4c;
  --warn: #9a5b00;
  --error: #b3261e;

  /* ---- Type ------------------------------------------------------------ */
  --font-display: "Bricolage Grotesque", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Literata", Georgia, "Times New Roman", serif;
  --font-ui: var(--font-display);
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;

  /* Fluid scale; nothing is set at a breakpoint. */
  --step--1: clamp(0.84rem, 0.81rem + 0.14vw, 0.93rem);
  --step-0:  clamp(1.06rem, 1.02rem + 0.22vw, 1.19rem);
  --step-1:  clamp(1.22rem, 1.14rem + 0.40vw, 1.47rem);
  --step-2:  clamp(1.48rem, 1.33rem + 0.78vw, 2.02rem);
  --step-3:  clamp(1.85rem, 1.55rem + 1.50vw, 2.90rem);
  --step-4:  clamp(2.35rem, 1.80rem + 2.75vw, 4.30rem);
  --step-5:  clamp(2.80rem, 1.85rem + 4.75vw, 6.20rem);

  --leading-tight: 1.02;
  --leading-snug: 1.2;
  --leading-body: 1.7;
  --measure: 64ch;

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

  --section-pad: clamp(4rem, 3rem + 6vw, 8.5rem);
  --gutter: clamp(1.25rem, 0.6rem + 3.2vw, 3.5rem);
  --container: 1240px;
  --container-narrow: 780px;
  --header-h: 76px;

  /* ---- Shape and motion ------------------------------------------------ */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  --ease: cubic-bezier(0.22, 0.7, 0.2, 1);
  --dur: 220ms;

  --z-header: 50;

  /* Names the templates' inline styles still reach for. */
  --bg: var(--paper);
  --bg-raised: var(--paper);
  --bg-card: var(--paper);
  --bg-card-hover: var(--mist);
  --bg-inset: var(--mist);
  --accent: var(--ink);
  --olive: var(--ink);
  --gold: var(--sun-deep);
}