/* ===========================================================================
   Treble Four — design tokens
   ---------------------------------------------------------------------------
   Everything adjustable about the look of the site lives in this file.
   The palette below is the *light* ground state. As the visitor scrolls,
   assets/js/tone.js interpolates between the tone stops defined at the bottom
   of this file and writes the results back onto :root, so every rule that
   reads --ink, --bg, --rule or --accent drifts with the page.
   =========================================================================== */

:root {
  /* --- Fixed brand colour. Do not change. ------------------------------- */
  --brand: #444444;

  /* --- Supporting palette (provisional) --------------------------------- */
  --warm-ivory: #f6f3ee;
  --soft-stone: #d7d1c8;
  --deep-charcoal: #242424;
  --white: #ffffff;
  --burnt-copper: #b35f32;

  /* Copper is never used at its raw value for text: these are the two
     contrast-corrected variants used on light and dark grounds. */
  --copper-on-light: #9e5229;
  --copper-on-dark: #d08a5c;

  /* --- Live tone (written by tone.js; these are the no-JS defaults) ------ */
  --bg: var(--warm-ivory);
  --veil: rgb(246 243 238 / 0.82); /* translucent --bg, used by the masthead */
  --ink: var(--brand);
  --ink-muted: #6a655d;
  --rule: #ded8ce;
  --accent: var(--copper-on-light);

  /* --- Typography -------------------------------------------------------- */
  --font-sans: "Alegreya Sans", "Segoe UI", Optima, "Gill Sans", ui-sans-serif,
    system-ui, sans-serif;

  /* Fluid scale: min at 360px, max at 1440px. */
  --t-display: clamp(2.3rem, 1.42rem + 3.9vw, 4.5rem);
  --t-lead: clamp(1.75rem, 1.1rem + 2.9vw, 3.5rem);
  --t-word: clamp(1.9rem, 1.15rem + 3.3vw, 3.9rem);
  --t-title: clamp(1.35rem, 1.12rem + 1vw, 1.9rem);
  --t-body-lg: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  --t-body: clamp(1rem, 0.97rem + 0.18vw, 1.0938rem);
  --t-small: 0.9375rem;
  --t-label: 0.75rem;

  --lh-tight: 1.06;
  --lh-snug: 1.22;
  --lh-body: 1.62;

  --track-label: 0.16em; /* letterspacing for small caps labels */
  --track-display: -0.015em;

  --weight-regular: 400;
  --weight-medium: 500;
  /* Nothing uses 700 yet. The face is loaded anyway so that a <strong> added
     to the copy later renders as real bold rather than a synthesised one. */
  --weight-bold: 700;

  /* --- Space ------------------------------------------------------------- */
  --gutter: clamp(1.5rem, 1rem + 4vw, 6rem);
  --measure: 36rem;
  --shell: 78rem;
  --col-gap: clamp(1.5rem, 1rem + 3vw, 4.5rem);

  --space-2xs: 0.375rem;
  --space-xs: 0.75rem;
  --space-s: 1.25rem;
  --space-m: 2rem;
  --space-l: 3.5rem;
  --space-xl: clamp(4rem, 2rem + 8vw, 8rem);
  /* Two of these sit back to back between sections, so the gap you actually
     see is double this. At the old 9.5rem that was 304px — nearly half a
     laptop screen of nothing between the last case file and How We Work. */
  --section-pad: clamp(4.5rem, 2.5rem + 6vw, 7rem);

  /* --- Motion ------------------------------------------------------------ */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-slow: 900ms; /* the interests composition, where slow is the point */
  --dur-reveal: 700ms; /* entrances — quick enough to outrun a fast scroll */
  --dur-mid: 620ms;
  --dur-fast: 260ms;

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

/* ---------------------------------------------------------------------------
   Tone stops
   ---------------------------------------------------------------------------
   Read by assets/js/tone.js. Each stop is anchored to a section id and
   describes the atmosphere while that section owns the viewport. The engine
   cross-fades between neighbouring stops, so there are no hard colour breaks.
   Edit the values here; no JavaScript changes are needed.
   --------------------------------------------------------------------------- */
:root {
  /* hero — light and sparse */
  --tone-hero-bg: #f6f3ee;
  --tone-hero-ink: #444444;
  --tone-hero-muted: #6a655d;
  --tone-hero-rule: #e2ddd4;
  --tone-hero-accent: #9e5229;

  /* current interests — richer stone */
  --tone-interests-bg: #ece7dd;
  --tone-interests-ink: #3f3f3f;
  --tone-interests-muted: #635e56;
  --tone-interests-rule: #d7d1c8;
  --tone-interests-accent: #974e26;

  /* special projects — deep charcoal atmosphere */
  --tone-cases-bg: #242424;
  --tone-cases-ink: #ece8e1;
  --tone-cases-muted: #a9a49b;
  --tone-cases-rule: #3d3b37;
  --tone-cases-accent: #d08a5c;

  /* how we work — lighter again */
  --tone-work-bg: #efebe4;
  --tone-work-ink: #444444;
  --tone-work-muted: #6a655d;
  --tone-work-rule: #ded8ce;
  --tone-work-accent: #9e5229;

  /* about — calm */
  --tone-about-bg: #f6f3ee;
  --tone-about-ink: #444444;
  --tone-about-muted: #6a655d;
  --tone-about-rule: #e2ddd4;
  --tone-about-accent: #9e5229;

  /* contact + footer — clean finish */
  --tone-contact-bg: #ffffff;
  --tone-contact-ink: #444444;
  --tone-contact-muted: #6a655d;
  --tone-contact-rule: #e6e2db;
  --tone-contact-accent: #9e5229;
}