/**
 * Design tokens — the shared vocabulary for the whole site.
 *
 * Loaded FIRST on every page, before fonts.css and the component sheets, so
 * everything downstream can read from it. Pages no longer re-declare the four
 * legacy names in their own inline :root — those are aliases at the bottom of
 * this file now, so this really is the only place colour is decided.
 *
 * The site is LIGHT. The dark palette it shipped with is kept in a comment
 * block at the bottom, alongside the handful of literal colours that live
 * outside this file; swapping the two is a copy-paste.
 *
 * Values come from the Figma text/effect styles and colour variables:
 *   "##"        -> --type-display / .ts-display
 *   "mobile 14" -> --type-body    / .ts-body
 *   "tag 10"    -> --type-tag     / .ts-tag
 *   "90%" / "40%" / "20%" -> --ink-strong / --ink-dim / --ink-faint
 */

:root {
  /* ---- fonts ----------------------------------------------------------
     -apple-system resolves to SF Pro Text/Display by size on Apple devices.
     Inter (self-hosted, see fonts.css) covers everything else.
     --font-rounded now points at the same SF Pro text stack (no longer the
     rounded face); the name is kept so the tag / (index) / .t-muted call
     sites don't need touching. */
  --font-text: -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif;
  --font-display: var(--font-text);
  --font-rounded: var(--font-text);
  --font-mono: "Fragment Mono", monospace;

  /* Inter runs a touch wider than SF Pro Display; pulling the display tracking
     in slightly keeps the nav pills the same length in both. */
  --tracking-display: -0.01em;

  /* ---- ink ----
     Light theme. Two values are NOT a straight alpha flip of the dark scale:
     black at low alpha on white reads weaker than white at the same alpha on
     black, so --ink-faint and --ink-btn are each pulled a step darker to keep
     the same apparent weight. */
  --ink-strong: rgba(0, 0, 0, 0.90);
  --ink: rgba(0, 0, 0, 0.68);
  --ink-dim: rgba(0, 0, 0, 0.42);
  --ink-faint: rgba(0, 0, 0, 0.40);
  --ink-btn: #ababab;

  /* ---- surfaces + lines ----
     Every pill on the site — nav rows and in-text buttons alike — rests on
     --surface behind a dashed --line-soft, and lifts to --surface-hi behind a
     solid one on hover. */
  --surface: rgba(0, 0, 0, 0.05);
  --surface-hi: rgba(0, 0, 0, 0.10);
  --line: rgba(0, 0, 0, 0.12);
  --line-soft: rgba(0, 0, 0, 0.14);
  --rule: rgba(0, 0, 0, 0.20);

  /* ---- card ----
     A bordered card sits ABOVE the page ground, not recessed into it like a
     pill: it gets its own solid fill (lighter than the --black ground) plus a
     soft shadow, so it lifts off the page. */
  --card: #ffffff;

  /* ---- type scale ----
     One size per style per breakpoint. Every style steps up on mobile
     (see the :root override in the media query below): display 18->20,
     body 14->16, tag/year 12->14. The --type-* composites read these vars,
     so nothing at the point of use needs a mobile rule of its own. */
  --fs-display: 18px;
  --lh-display: 18px;
  --fs-body: 14px;
  --lh-body: 18px;
  --fs-tag: 12px;
  --fs-year: 12px;

  /* ---- font styles ----------------------------------------------------
     One composite per Figma text style, so a size is never spelled out at
     the point of use. Written as the `font` shorthand — weight size/leading
     family — which also resets font-style/variant/stretch, keeping every
     surface honest. Body runs at 400 (regular): a real weight in both Inter
     (variable 100-900, see fonts.css) and SF Pro, so nothing is synthesised.
     Fragment Mono ships one weight only, so the surfaces that use it
     (bio-text, even.it controls, 404) stay at 400 on purpose. Tracking and case can't ride the shorthand, so the
     .ts-* classes below carry them; CSS that styles generated markup pairs
     `font: var(--type-*)` with its own text-transform. */
  --type-display: 700 var(--fs-display)/var(--lh-display) var(--font-display);
  --type-body: 400 var(--fs-body)/var(--lh-body) var(--font-text);
  --type-tag: 500 var(--fs-tag)/1 var(--font-rounded);
  /* the year a project ran, set superscript beside its title */
  --type-year: 700 var(--fs-year)/1 var(--font-display);

  /* ---- space ---- */
  --gutter: 12px;
  --stack: 12px;
  --stack-2: 8px;
  --stack-3: 4px;
  --col-gap: 16px;
  --pad-pill: 4px 8px;

  /* How long a pill takes to change state — fill, border colour and label all
     ride the same duration so they land together. */
  --dur-state: 300ms;

  /* Border width of a pill. Shared so the gap-reach strips in links.css can
     correct for it — an absolutely positioned child is laid out against the
     padding box, which sits one border inside the drawn edge. */
  --bw: 1px;

  /* ---- radius ---- */
  --r-lg: 12px;
  --r-md: 5px;
  --r-pill: 8px;

  /* ---- legacy aliases ----
     The name --black is historical: it is the page ground, whatever colour
     that is. Every page's body and every .page-gap between feed sections
     paints with it, so this one value is what makes the site light or dark. */
  --black: rgba(0, 0, 0, 0.05);
  --white-90: var(--ink-strong);
  --white-40: var(--ink-dim);
  --white-20: var(--ink-faint);
}

/* ---- mobile type scale ----
   Every text style steps up one notch below 768px. Overriding the fs and lh
   vars on :root is enough — type-display, type-body, type-tag and type-year
   all resolve through them, so headings, body copy, nav pills, buttons, tags
   and the year superscript all grow together. */
@media (max-width: 768px) {
  :root {
    --fs-display: 20px;
    --lh-display: 20px;
    --fs-body: 16px;
    --lh-body: 20px;
    --fs-tag: 14px;
    --fs-year: 14px;
  }
}

/* ============================================================================
   DARK THEME — the palette the site shipped with, kept verbatim.

   Colour lives in exactly two places: the tokens above, and the short list of
   rules in components/ that spell a colour out literally (they could not use a
   token — a presentation attribute, or a value the token vocabulary has no
   name for). Both halves are below. Paste them over their light counterparts
   to go back; nothing else in the codebase needs to change.

   :root {
     --ink-strong: rgba(255, 255, 255, 0.90);
     --ink:        rgba(255, 255, 255, 0.70);
     --ink-dim:    rgba(255, 255, 255, 0.40);
     --ink-faint:  rgba(255, 255, 255, 0.20);
     --ink-btn:    #434343;

     --surface:    rgba(255, 255, 255, 0.08);
     --surface-hi: rgba(255, 255, 255, 0.15);
     --line:       rgba(255, 255, 255, 0.20);
     --line-soft:  rgba(255, 255, 255, 0.10);
     --rule:       #2c2c2c;

     --black: #000000;
   }

   Tag palette (pastel — it only reads on a dark ground):
     .tag--identity      { --tag-c: #F2DDA6; }
     .tag--product       { --tag-c: #BBA1E9; }
     .tag--tone-of-voice { --tag-c: #F7B8D5; }
     .tag--packaging     { --tag-c: #DFB09B; }
     .tag--photo         { --tag-c: #9EEADA; }
     .tag--strategy      { --tag-c: #AEE8A0; }
     .tag--art-direction { --tag-c: #8FB4EB; }

   The literal colours outside this file:
     menuOverlay.css        #menuOverlay              background: rgba(0, 0, 0, 1)
     combined-menu.css      span.disabled .year       color: rgba(255, 255, 255, 1)
     pages.css              #stuffContainer / #rawContainer dividers
                                                      border-bottom: 1px dashed rgba(255, 255, 255, 0.12)
     pages.css              .evenit-color-input       background: rgba(255, 255, 255, 0.04)
     bio-text.css           .bio-core-underline        text-decoration-color: rgb(188, 255, 121)
     evenit.js              path.hit stroke attr      "rgba(255,255,255,0.06)"
     even.it.html (root)    same two evenit values, inlined in that one page
   ============================================================================ */

/**
 * Font styles as classes — the markup-side twin of the --type-* tokens.
 * Use these on anything you author by hand; component CSS that styles
 * bundle-generated markup uses the tokens directly instead.
 */
.ts-display {
  font: var(--type-display);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
}

.ts-body {
  font: var(--type-body);
  text-transform: lowercase;
}

.ts-tag {
  font: var(--type-tag);
  text-transform: lowercase;
}

/* Superscript by alignment, not by vertical-align — the year is a flex item of
   .t-row, and flex items ignore vertical-align entirely. Sitting it at the top
   of a row whose height comes from the 16px title raises the 10px year to the
   title's cap line, which is the effect Figma's superscript toggle produces. */
.ts-year {
  font: var(--type-year);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  align-self: flex-start;
}

/**
 * Tag palette + icon map.
 *
 * This is the only place to touch when recolouring or reskinning a tag:
 *   --tag-c     the colour (also colours the marker, which is masked to it)
 *   --tag-icon  the marker artwork — swap the file in /assets/tags/
 *   --tag-w     the marker's natural width, matching its viewBox
 *
 * The light-theme colours are the dark palette's own hues taken to ~40%
 * lightness with saturation floored at 55% — the pastels themselves are
 * invisible on white. The originals are in the dark-theme block above.
 *
 * Adding a tag: drop an SVG in /assets/tags/, add one rule here, then use the
 * slug in a page's tags: [] array. Slug -> label is a plain hyphen swap, so
 * 'tone-of-voice' renders as "tone of voice" with no lookup table.
 */
.tag--identity      { --tag-c: #B2881A; --tag-w: 14px; --tag-icon: url("/assets/tags/identity.svg"); }
.tag--product       { --tag-c: #5427A5; --tag-w: 14px; --tag-icon: url("/assets/tags/product.svg"); }
.tag--tone-of-voice { --tag-c: #B71560; --tag-w: 14px; --tag-icon: url("/assets/tags/tone-of-voice.svg"); }
.tag--packaging     { --tag-c: #9E512E; --tag-w: 11px; --tag-icon: url("/assets/tags/packaging.svg"); }
.tag--photo         { --tag-c: #24A88C; --tag-w: 12px; --tag-icon: url("/assets/tags/photo.svg"); }
.tag--strategy      { --tag-c: #40A428; --tag-w: 16px; --tag-icon: url("/assets/tags/strategy.svg"); }
.tag--art-direction { --tag-c: #1F58AD; --tag-w: 12px; --tag-icon: url("/assets/tags/art-direction.svg"); }