/* ==========================================================================
   Tures — design tokens
   Every colour, size, space, radius, stroke and type step the site is allowed
   to use. Nothing below this file may invent a raw value: components reference
   these custom properties, so one edit here restyles the whole site.

   Ported from the Claude Design system (tokens/*.css) with three deliberate
   changes, all marked  A11Y:  — see assets/css/README notes in the repo README.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts
   Two faces only. Trend Sans One carries every heading and the wordmark;
   Raleway carries every run of prose. Trend Sans ships a single weight (400);
   the system asks for 500/700/900 and lets the browser synthesise.

   BOTH ARE SELF-HOSTED. Raleway used to come from Google Fonts, which the
   project editor does not load — the canvas fell back to a system sans and the
   prose looked nothing like the site. Self-hosting also drops a third-party
   request that would otherwise need consent, and removes a render-blocking
   round trip. Raleway here is the variable file, so one download covers 500
   and 700.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Trend Sans";
  src: url("/assets/fonts/trend-sans-one.c92426e1f16929b3.ttf") format("truetype");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Raleway";
  src: url("/assets/fonts/raleway-latin.10f1a0ef3f349790.woff2") format("woff2");
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Raleway";
  src: url("/assets/fonts/raleway-latin-ext.5730d3e0b43947bf.woff2") format("woff2");
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --font-display: "Trend Sans", "Futura", "Century Gothic", sans-serif;
  --font-body: "Raleway", "Helvetica Neue", Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   2. Fluid size scale
   The single ramp every spacing, type and border token resolves to. Every step
   is a clamp(), so the entire system scales with the viewport instead of
   snapping at breakpoints. Values are verbatim from the design system.
   -------------------------------------------------------------------------- */
:root {
  --size-0: 0rem;
  --size-0-125: clamp(0.1rem, 0.08rem + 0.1vw, 0.125rem);
  --size-0-25: clamp(0.2rem, 0.18rem + 0.1vw, 0.25rem);
  --size-0-5: clamp(0.3rem, 0.25rem + 0.25vw, 0.5rem);
  --size-0-75: clamp(0.4rem, 0.3rem + 0.3vw, 0.75rem);
  --size-1: clamp(0.75rem, 0.6rem + 0.5vw, 1rem);
  --size-1-25: clamp(0.9rem, 0.75rem + 0.5vw, 1.25rem);
  --size-1-5: clamp(1.1rem, 0.9rem + 0.6vw, 1.5rem);
  --size-2: clamp(1.25rem, 1rem + 1vw, 2rem);
  --size-2-5: clamp(1.5rem, 1.25rem + 1.2vw, 2.5rem);
  --size-3: clamp(1.75rem, 1.4rem + 1.5vw, 3rem);
  --size-3-5: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  --size-4: clamp(2.25rem, 1.75rem + 2vw, 4rem);
  --size-4-5: clamp(2.5rem, 2rem + 2vw, 4.5rem);
  --size-5: clamp(2.75rem, 2.25rem + 2.25vw, 5rem);
  --size-5-5: clamp(3rem, 2.5rem + 2.5vw, 5.5rem);
  --size-6: clamp(3.25rem, 2.75rem + 2.5vw, 6rem);
  --size-7: clamp(3.75rem, 3.25rem + 2.5vw, 7rem);
  --size-8: clamp(4.25rem, 3.75rem + 2.5vw, 8rem);
  --size-10: clamp(5.25rem, 4.75rem + 2.5vw, 10rem);
  --size-14: clamp(6.25rem, 5.75rem + 2.5vw, 14rem);
  --size-20: clamp(7.75rem, 6.75rem + 3vw, 20rem);
  --size-28: clamp(9.75rem, 8.5rem + 3.5vw, 28rem);
  --size-30: clamp(10.25rem, 9rem + 3.5vw, 30rem);
  --size-50: clamp(15.25rem, 14rem + 4vw, 50rem);
}

/* --------------------------------------------------------------------------
   3. Colour swatches — the raw palette, never referenced directly by a
   component. Components use the semantic aliases in section 7.
   -------------------------------------------------------------------------- */
:root {
  /* Brand */
  --swatch-primary: #22382f;          /* Tures green, darkened and desaturated: the page ground */
  --swatch-primary-soft: #2b443a;     /* one step open from the ground, for panels that must separate */
  --swatch-secondary: #fbf7f1;        /* cream — the "light" partner to the green */
  --swatch-brand-accent-1: #560017;   /* deep burgundy */
  --swatch-brand-accent-2: #332217;   /* dark cocoa */
  --swatch-brand-accent-3: #50916f;   /* sage green */

  /* Neutrals — a warm cream ramp, not grey */
  --swatch-neutral-50: #fbf7f1;
  --swatch-neutral-100: #e9e3dc;
  --swatch-neutral-200: #d2cfd0;
  --swatch-neutral-300: #b2aeaf;
  --swatch-neutral-400: #8b8587;
  --swatch-neutral-500: #716969;
  --swatch-neutral-700: #514d4d;
  --swatch-neutral-950: #131212;

  /* A11Y: cream muted at 78% over the green — the design's 50% dim only
     reached 3.2:1 against #00563f. This tint measures 5.6:1 and keeps the
     same "quieter than the address line" reading. */
  --swatch-on-brand-muted: #c4d3ca;

  /* System */
  --swatch-error: #e74444;
  --swatch-transparent: #fff0;
  --swatch-scrim: #131212cc;
}

/* --------------------------------------------------------------------------
   4. Typography scale
   All headings share the display family, line-height 1 and letter-spacing 0.
   The weight mapping is deliberately unusual: "regular" is 500, "bold" is 700.
   -------------------------------------------------------------------------- */
:root {
  --font-primary-regular: 500;
  --font-primary-bold: 700;
  --font-secondary-regular: 500;

  --line-height-1: 1em;
  --line-height-1-1: 1.1em;
  --line-height-1-3: 1.3em;
  --letter-spacing-0: 0em;
  --letter-spacing-0-02: 0.02em;

  --heading-font-family: var(--font-display);
  --heading-font-weight: var(--font-secondary-regular);

  --display-font-size: var(--size-6);
  --h1-font-size: var(--size-4-5);
  --h2-font-size: var(--size-3-5);
  --h3-font-size: var(--size-2-5);
  --h4-font-size: var(--size-1-5);
  --h5-font-size: var(--size-1-25);
  --h6-font-size: var(--size-1);

  --text-large-font-size: var(--size-1-25);
  --text-main-font-size: var(--size-1);
  --text-small-font-size: 0.875rem;

  /* Measure — prose never runs wider than this, whatever the container does. */
  --measure-prose: 50ch;
  --measure-long-form: 70ch;
}

/* --------------------------------------------------------------------------
   5. Spacing — a five-step gap scale plus a four-step section-padding scale.
   Because every step is already a clamp(), these do NOT need media queries
   to shrink on small screens; they shrink continuously.
   -------------------------------------------------------------------------- */
:root {
  --space-3xs: var(--size-0-25);
  --space-2xs: var(--size-0-5);
  --space-xs: var(--size-0-75);
  --space-s: var(--size-1-5);
  --space-m: var(--size-3);
  --space-l: var(--size-4);
  --space-xl: var(--size-8);

  --padding-block-section: var(--size-7);
  --padding-block-section-s: var(--size-5);

  /* One content column for the whole site. Full-bleed backgrounds sit on the
     <section>; the container inside always lands on the same measure. */
  --container-max: 75rem;   /* 1200px at the 16px default root size */
  --container-pad: var(--space-m);
}

/* --------------------------------------------------------------------------
   6. Strokes, radii and effects
   Tures is a square-cornered brand with LOUD borders: two stroke widths split
   by role and no third. `main` (0.25rem) is for frames — sections, cards,
   images. `control` is the hairline for buttons, toggles and inner rules.
   -------------------------------------------------------------------------- */
:root {
  --radius-none: 0rem;
  --radius-s: 0.5rem;
  --radius-m: 1rem;
  --radius-round: 100vw;

  --border-width-main: var(--size-0-25);
  --border-width-control: 1.5px;    /* hairline — the one permitted px value */
  --svg-stroke-width-main: 1.5px;   /* hairline */

  --shadow-soft: var(--size-0-25) var(--size-0-25) 1.3rem 0 #13121233;
  --shadow-supersoft:
    var(--size-1) var(--size-1) 1.25rem 0 #0000001a,
    var(--size-0-5) var(--size-0-5) 1.25rem 0 #00000026,
    var(--size-0-125) var(--size-0-125) 0.4rem 0 #13121233;

  --texture-opacity: 0.35;
  --texture-size: 30rem;
  --texture-blend: soft-light;
  --texture-image: url("/assets/img/texture-paper.c65a5acc2871b4c0.webp");
}

/* --------------------------------------------------------------------------
   7. Motion — one coherent set of durations and curves. Every transition and
   keyframe in the site pulls from here; nothing hand-rolls its own timing.
   -------------------------------------------------------------------------- */
:root {
  --duration-fast: 0.2s;
  --duration-base: 0.32s;
  --duration-slow: 0.55s;
  --duration-reveal: 0.7s;

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-expo: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-circ: cubic-bezier(0.85, 0, 0.15, 1);

  --reveal-shift: 0.875rem;
}

/* --------------------------------------------------------------------------
   8. Semantic theme aliases
   Light (default) is a cream page with green ink. `.u-theme-brand` inverts to
   the green ground used by the hero band and the footer.
   -------------------------------------------------------------------------- */
:root {
  --theme-background: var(--swatch-primary);
  --theme-surface: var(--swatch-primary);
  --theme-text: var(--swatch-secondary);
  --theme-text-muted: var(--swatch-on-brand-muted);  /* 8.1:1 on the ground */
  --theme-brand: var(--swatch-secondary);
  --theme-border: var(--theme-brand);
  --theme-on-brand: var(--swatch-primary);
  --theme-on-brand-muted: var(--swatch-neutral-500);

  --theme-button-bg: var(--swatch-secondary);
  --theme-button-text: var(--swatch-primary);
  --theme-button-bg-hover: var(--swatch-neutral-950);
  --theme-button-text-hover: var(--swatch-neutral-50);

  /* A11Y: a single focus ring token, contrast-checked against both grounds. */
  --theme-focus: var(--swatch-secondary);
  --focus-ring-width: 0.1875rem;
  --focus-ring-offset: 0.125rem;
}

/* The cream island. The page is green now, so this is the exception — the
   emphasised menu cell and the cards that sit over photography. Anything that
   paints itself cream MUST be on this list: a bare `color:` is not enough,
   because utilities like .u-btn read --theme-text, which would still be the
   cream of the green page and vanish. */
.u-theme-light,
[data-wl-component="menu-cell"].menu-cell--brand,
.content-band__card,
.cookie-consent__dialog {
  --theme-background: var(--swatch-neutral-50);
  --theme-surface: var(--swatch-neutral-50);
  --theme-text: var(--swatch-neutral-950);
  --theme-text-muted: var(--swatch-neutral-500);   /* 5.0:1 on cream */
  --theme-brand: var(--swatch-primary);
  --theme-border: var(--theme-brand);
  --theme-on-brand: var(--swatch-secondary);
  --theme-focus: var(--swatch-primary);

  background-color: var(--theme-background);
  color: var(--theme-text);
}

/* Kept so existing markup keeps reading true; identical to the root now. */
.u-theme-brand {
  --theme-background: var(--swatch-primary);
  --theme-surface: var(--swatch-primary);
  --theme-text: var(--swatch-secondary);
  --theme-text-muted: var(--swatch-on-brand-muted);
  --theme-brand: var(--swatch-secondary);
  --theme-border: var(--swatch-secondary);
  --theme-on-brand: var(--swatch-primary);
  --theme-focus: var(--swatch-secondary);

  background-color: var(--theme-background);
  color: var(--theme-text);
}

.u-theme-dark {
  --theme-background: var(--swatch-neutral-950);
  --theme-surface: var(--swatch-neutral-950);
  --theme-text: var(--swatch-neutral-50);
  --theme-text-muted: var(--swatch-neutral-300);
  --theme-brand: var(--swatch-secondary);
  --theme-border: var(--swatch-neutral-50);
  --theme-on-brand: var(--swatch-primary);
  --theme-focus: var(--swatch-secondary);

  background-color: var(--theme-background);
  color: var(--theme-text);
}