/*
 * Design tokens — the only source of visual values (FUNDAMENTALS §F).
 * check:tokens fails any other stylesheet that carries a literal colour,
 * font-size or duration instead of a var() from this file.
 *
 * Ported from the Claude Design export. Two deliberate departures:
 *
 *   1. Sizes are in rem, not px. At the default root size the rendering is
 *      identical; when a reader has raised their browser's base font size, rem
 *      honours it and px silently ignores it.
 *   2. The 42-totem spectrum is authored in OKLCH and shipped as sRGB. OKLCH is
 *      the right space to choose colours in and the wrong one to ship
 *      unverified — check:contrast needs concrete values, and a colour it
 *      cannot resolve counts as failing. Every accent below was walked darker
 *      until it cleared 4.5:1 against its own tint.
 *
 * Naming is load-bearing:
 *   --color-*  carries text or is a background text sits on. Contrast-checked.
 *   --rule-*   hairlines and separators. Not a control boundary, not checked.
 *   --logo-*   the six fills of the mark, beside a text wordmark.
 */

:root {
  /* ── Type ─────────────────────────────────────────────────────────────── */
  --font-head: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --font-body: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Consolas, monospace;
  /* The wordmark keeps its licensed face when the machine has it, and falls
     back to the heading face rather than to something unrelated. */
  --font-wordmark:
    "Neue Haas Grotesk Display Pro", "Neue Haas Display Pro", "Helvetica Neue", "Bricolage Grotesque", Arial,
    sans-serif;

  --size-hero: 3.625rem;
  --size-h1: 2.5625rem;
  --size-h2: 1.375rem;
  --size-h3: 1.125rem;
  --size-lead: 1.125rem;
  --size-quote: 1rem;
  --size-body: 0.95rem;
  --size-list: 0.875rem;
  --size-small: 0.875rem;
  --size-meta: 0.8125rem;
  --size-ui: 0.7625rem;
  --size-eyebrow: 0.625rem;
  --size-wordmark: 0.84375rem;
  /* The header logotype. Height, for the reason given beside --og-wordmark-height. */
  --wordmark-height: 0.875rem;

  --leading-body: 1.72;
  --leading-tight: 1.06;
  --leading-hero: 1;
  --leading-snug: 1.55;
  --line-unit: 1.625rem;

  --track-head: -0.035em;
  --track-h2: -0.025em;
  --track-wordmark: -0.02em;
  --track-eyebrow: 0.12em;

  --weight-body: 400;
  --weight-strong: 600;
  --weight-bold: 700;

  /* ── Colour ───────────────────────────────────────────────────────────── */
  --color-ink: #16181d;
  --color-body: #33373f;
  --color-dim: #3b3f49;
  --color-cite: #4c515c;
  --color-muted: #5c6270;
  --color-accent: #2b3a8f;

  --color-canvas: #ffffff;
  --color-surface-home: #f4f4f2;
  --color-surface-pillars: #f2f4f3;
  --color-surface-brands: #f5f3f0;
  --color-surface-careers: #f4f2f4;
  --color-surface-blog: #f3f4f1;
  --color-surface-post: #f6f5f2;

  --color-invert-bg: #16181d;
  --color-invert-fg: #ffffff;
  --color-invert-dim: #8a8f98;

  /* The page tint. Overridden by [data-surface] and by [data-totem]. */
  --page-bg: var(--color-surface-home);

  /* ── Rules ────────────────────────────────────────────────────────────── */
  --rule-strong: #16181d;
  --rule-hair: #eef0f2;
  --rule-soft: #e2e4e8;
  --rule-field: #d6d9de;
  --rule-tint: #e2e4e8;
  --rule-weight: 2px;
  --rule-hairline: 1px;

  /* ── The mark ─────────────────────────────────────────────────────────── */
  /* Six shapes, six fills. Monochrome at rest; the brand's own palette on
     hover, which is the customisable-totem system saying hello. */
  --logo-rest: #16181d;
  --logo-a: #58c5ca;
  --logo-b: #1b9ed8;
  --logo-c: #ef4680;
  --logo-d: #ea2931;
  --logo-e: #2e3d95;
  --logo-f: #97268c;

  /* ── Space ────────────────────────────────────────────────────────────── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.375rem;
  --space-6: 1.75rem;
  --space-7: 2.125rem;
  --space-8: 2.5rem;
  --space-9: 3.5rem;

  --rail-width: 17.5rem;
  --rail-narrow: 15rem;

  /* Brand row tracks. Proportional rather than fixed because the same row
     renders at two very different widths — full bleed on /brands/, and inside
     the home's split section, where a third of the sheet is already spent on
     the section label. A fixed third column that reads as one line on the
     first is four lines deep on the second. The ratio gives the description
     the most room, and the identity and audience columns roughly the same. */
  --brand-tracks: minmax(0, 1.15fr) minmax(0, 2fr) minmax(0, 1.2fr);

  /* The same row on the home, where Q14 (c) drops the audience column: the
     identity keeps roughly the share it had, the description takes the rest. */
  --brand-tracks-brief: minmax(0, 1.15fr) minmax(0, 3.2fr);
  --measure: 70ch;
  --measure-lead: 66ch;

  /* A form is not prose and does not want the prose measure. Fields as wide as
     a paragraph make a short answer look like a mistake and drag the eye back
     across the whole sheet between one label and the next. Narrower than
     --measure-lead on purpose. */
  --measure-form: 34rem;

  /* One height for every control in the route bar. 1.75rem clears the 24px
     floor of WCAG 2.2 SC 2.5.8 with room to spare — the pager arrows used to
     come out at 20px, which did not. */
  --control-height: 1.75rem;
  /* The key cap in <kbd>. Sized against --control-height: it has to read as a
     key sitting inside the search button, not as a second control next to it. */
  --key-size: 1.0625rem;

  /* The width below which the ruled sheet stacks. A media query cannot read a
     custom property, so the @media rules in site.css restate it as a literal;
     site.js reads it from here so at least the script and the tokens agree.
     Change it and the two @media (max-width: 60rem) blocks change with it. */
  --bp-narrow: 60rem;

  /* Measured by site.js when the handbook band docks to the viewport, and
     reserved as padding at the foot of the shell so the band never becomes the
     only way to reach what is under it. Zero until then, which is also the
     value it keeps when there is no scripting and the band stays in flow. */
  --handbook-height: 0px;

  /* ── The social card ──────────────────────────────────────────────────── */
  /* 1200 × 630 is the Open Graph plate, and it is the one artefact in this
     repo measured in px on purpose: a PNG has no reader, no root font size and
     no preference to honour, so rem here would only be rem-shaped px. The
     card's own scale lives in tokens for the same reason everything else does
     — check:tokens holds og-card.css to the same rule as site.css, and a card
     that quietly stopped matching the site is the failure this prevents. */
  --og-width: 1200px;
  --og-height: 630px;
  /* The frame's inset from the plate edge, and the content's inset from the
     frame. Two values, because the rules run the full width of the frame and
     only their contents are indented. */
  --og-frame: 10px;
  --og-pad: 34px;
  --og-band: 96px;
  --og-band-foot: 108px;
  --og-mark: 44px;

  --size-og-title: 118px;
  --size-og-title-long: 80px;
  /* The logotype is sized by HEIGHT, not by font-size: it is vector now, and
     letting width drive it would make its weight change with the container.
     46px here puts it at ~331px wide, which is where the redesign draws it. */
  --og-wordmark-height: 46px;
  --size-og-summary: 22px;
  --size-og-meta: 14px;

  /* ── Motion ───────────────────────────────────────────────────────────── */
  --motion-fast: 150ms;
  --motion-base: 250ms;
  --motion-slow: 400ms;
  --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit: cubic-bezier(0.7, 0, 0.84, 0);

  /* The page transition, verbatim from the design export's `viewIn`:
     `0.42s cubic-bezier(0.22,0.61,0.36,1)` over `opacity 0→1` and
     `translateY(14px)→0`. A quick departure that settles rather than
     decelerating hard — --ease-enter is a much stronger curve and reads as a
     flourish at full-page scale, which is the opposite of what §D asks for.
     0.42s is --motion-slow, which is what that token was reserved for. */
  --ease-view: cubic-bezier(0.22, 0.61, 0.36, 1);
  --view-shift: 14px;
}

/* Named page tints, one per entry type, straight from the export. */
[data-surface="home"] {
  --page-bg: var(--color-surface-home);
}
[data-surface="pillars"] {
  --page-bg: var(--color-surface-pillars);
}
[data-surface="brands"] {
  --page-bg: var(--color-surface-brands);
}
[data-surface="careers"] {
  --page-bg: var(--color-surface-careers);
}
[data-surface="blog"] {
  --page-bg: var(--color-surface-blog);
}
[data-surface="post"] {
  --page-bg: var(--color-surface-post);
}

/*
 * prefers-reduced-motion is honoured at the token layer, not per component.
 * Zeroing the durations here means no component can forget — per-component
 * compliance is the kind of thing that ends up 95% correct and therefore broken.
 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms;
    --motion-base: 0ms;
    --motion-slow: 0ms;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/*
 * ── The totem spectrum ──────────────────────────────────────────────────────
 * One distinct hue per totem, a full walk around the wheel with no repeats.
 * Generated: hue = (index × 360/42 + 250) mod 360, tint at OKLCH L 96.5%,
 * accent walked down from L 46% until it clears AA on that tint.
 */

[data-totem="1"] {
  --page-bg: #e6f5ff;
  --rule-tint: #c0deff;
  --color-accent: #0059a4;
}
:root {
  --color-totem-1-bg: #e6f5ff;
  --color-totem-1-accent: #0059a4;
}

[data-totem="2"] {
  --page-bg: #e8f4ff;
  --rule-tint: #c5dcff;
  --color-accent: #1e54a7;
}
:root {
  --color-totem-2-bg: #e8f4ff;
  --color-totem-2-accent: #1e54a7;
}

[data-totem="3"] {
  --page-bg: #ebf3ff;
  --rule-tint: #cadbff;
  --color-accent: #3450a8;
}
:root {
  --color-totem-3-bg: #ebf3ff;
  --color-totem-3-accent: #3450a8;
}

[data-totem="4"] {
  --page-bg: #eef2ff;
  --rule-tint: #d0d8ff;
  --color-accent: #454ba7;
}
:root {
  --color-totem-4-bg: #eef2ff;
  --color-totem-4-accent: #454ba7;
}

[data-totem="5"] {
  --page-bg: #f1f1ff;
  --rule-tint: #d6d7ff;
  --color-accent: #5147a4;
}
:root {
  --color-totem-5-bg: #f1f1ff;
  --color-totem-5-accent: #5147a4;
}

[data-totem="6"] {
  --page-bg: #f4f0ff;
  --rule-tint: #dbd5fd;
  --color-accent: #5d43a0;
}
:root {
  --color-totem-6-bg: #f4f0ff;
  --color-totem-6-accent: #5d43a0;
}

[data-totem="7"] {
  --page-bg: #f6f0ff;
  --rule-tint: #e1d3fa;
  --color-accent: #673f9b;
}
:root {
  --color-totem-7-bg: #f6f0ff;
  --color-totem-7-accent: #673f9b;
}

[data-totem="8"] {
  --page-bg: #f9efff;
  --rule-tint: #e6d1f7;
  --color-accent: #713b93;
}
:root {
  --color-totem-8-bg: #f9efff;
  --color-totem-8-accent: #713b93;
}

[data-totem="9"] {
  --page-bg: #fceeff;
  --rule-tint: #ebd0f2;
  --color-accent: #79378a;
}
:root {
  --color-totem-9-bg: #fceeff;
  --color-totem-9-accent: #79378a;
}

[data-totem="10"] {
  --page-bg: #feedfe;
  --rule-tint: #efcfee;
  --color-accent: #803481;
}
:root {
  --color-totem-10-bg: #feedfe;
  --color-totem-10-accent: #803481;
}

[data-totem="11"] {
  --page-bg: #ffedfb;
  --rule-tint: #f3cee9;
  --color-accent: #873076;
}
:root {
  --color-totem-11-bg: #ffedfb;
  --color-totem-11-accent: #873076;
}

[data-totem="12"] {
  --page-bg: #ffecf8;
  --rule-tint: #f6cde4;
  --color-accent: #8c2e6c;
}
:root {
  --color-totem-12-bg: #ffecf8;
  --color-totem-12-accent: #8c2e6c;
}

[data-totem="13"] {
  --page-bg: #ffecf5;
  --rule-tint: #f9ccde;
  --color-accent: #912b5f;
}
:root {
  --color-totem-13-bg: #ffecf5;
  --color-totem-13-accent: #912b5f;
}

[data-totem="14"] {
  --page-bg: #ffecf2;
  --rule-tint: #fbccd8;
  --color-accent: #942a53;
}
:root {
  --color-totem-14-bg: #ffecf2;
  --color-totem-14-accent: #942a53;
}

[data-totem="15"] {
  --page-bg: #ffecef;
  --rule-tint: #fdccd2;
  --color-accent: #972945;
}
:root {
  --color-totem-15-bg: #ffecef;
  --color-totem-15-accent: #972945;
}

[data-totem="16"] {
  --page-bg: #ffecec;
  --rule-tint: #fdcdcc;
  --color-accent: #982a36;
}
:root {
  --color-totem-16-bg: #ffecec;
  --color-totem-16-accent: #982a36;
}

[data-totem="17"] {
  --page-bg: #ffede9;
  --rule-tint: #fdcec7;
  --color-accent: #992c27;
}
:root {
  --color-totem-17-bg: #ffede9;
  --color-totem-17-accent: #992c27;
}

[data-totem="18"] {
  --page-bg: #ffede7;
  --rule-tint: #fdcfc2;
  --color-accent: #982f10;
}
:root {
  --color-totem-18-bg: #ffede7;
  --color-totem-18-accent: #982f10;
}

[data-totem="19"] {
  --page-bg: #ffeee5;
  --rule-tint: #fbd0be;
  --color-accent: #963300;
}
:root {
  --color-totem-19-bg: #ffeee5;
  --color-totem-19-accent: #963300;
}

[data-totem="20"] {
  --page-bg: #ffefe2;
  --rule-tint: #f9d2ba;
  --color-accent: #933800;
}
:root {
  --color-totem-20-bg: #ffefe2;
  --color-totem-20-accent: #933800;
}

[data-totem="21"] {
  --page-bg: #fff0e1;
  --rule-tint: #f6d3b7;
  --color-accent: #8f3d00;
}
:root {
  --color-totem-21-bg: #fff0e1;
  --color-totem-21-accent: #8f3d00;
}

[data-totem="22"] {
  --page-bg: #fff1e0;
  --rule-tint: #f3d5b4;
  --color-accent: #894300;
}
:root {
  --color-totem-22-bg: #fff1e0;
  --color-totem-22-accent: #894300;
}

[data-totem="23"] {
  --page-bg: #fef2df;
  --rule-tint: #efd7b2;
  --color-accent: #824900;
}
:root {
  --color-totem-23-bg: #fef2df;
  --color-totem-23-accent: #824900;
}

[data-totem="24"] {
  --page-bg: #fcf3df;
  --rule-tint: #ead9b2;
  --color-accent: #7a4f00;
}
:root {
  --color-totem-24-bg: #fcf3df;
  --color-totem-24-accent: #7a4f00;
}

[data-totem="25"] {
  --page-bg: #f9f4df;
  --rule-tint: #e5dbb2;
  --color-accent: #715400;
}
:root {
  --color-totem-25-bg: #f9f4df;
  --color-totem-25-accent: #715400;
}

[data-totem="26"] {
  --page-bg: #f6f5e0;
  --rule-tint: #e0ddb4;
  --color-accent: #675900;
}
:root {
  --color-totem-26-bg: #f6f5e0;
  --color-totem-26-accent: #675900;
}

[data-totem="27"] {
  --page-bg: #f3f6e1;
  --rule-tint: #dadfb6;
  --color-accent: #5a5e00;
}
:root {
  --color-totem-27-bg: #f3f6e1;
  --color-totem-27-accent: #5a5e00;
}

[data-totem="28"] {
  --page-bg: #f0f7e2;
  --rule-tint: #d5e1b9;
  --color-accent: #4d6200;
}
:root {
  --color-totem-28-bg: #f0f7e2;
  --color-totem-28-accent: #4d6200;
}

[data-totem="29"] {
  --page-bg: #edf8e4;
  --rule-tint: #cfe3bd;
  --color-accent: #3b6600;
}
:root {
  --color-totem-29-bg: #edf8e4;
  --color-totem-29-accent: #3b6600;
}

[data-totem="30"] {
  --page-bg: #eaf8e6;
  --rule-tint: #c9e4c1;
  --color-accent: #236a00;
}
:root {
  --color-totem-30-bg: #eaf8e6;
  --color-totem-30-accent: #236a00;
}

[data-totem="31"] {
  --page-bg: #e8f9e9;
  --rule-tint: #c4e5c6;
  --color-accent: #006c1f;
}
:root {
  --color-totem-31-bg: #e8f9e9;
  --color-totem-31-accent: #006c1f;
}

[data-totem="32"] {
  --page-bg: #e5faec;
  --rule-tint: #bee6cc;
  --color-accent: #006e32;
}
:root {
  --color-totem-32-bg: #e5faec;
  --color-totem-32-accent: #006e32;
}

[data-totem="33"] {
  --page-bg: #e3faee;
  --rule-tint: #bae7d1;
  --color-accent: #006f41;
}
:root {
  --color-totem-33-bg: #e3faee;
  --color-totem-33-accent: #006f41;
}

[data-totem="34"] {
  --page-bg: #e1faf2;
  --rule-tint: #b6e7d7;
  --color-accent: #007050;
}
:root {
  --color-totem-34-bg: #e1faf2;
  --color-totem-34-accent: #007050;
}

[data-totem="35"] {
  --page-bg: #e0faf4;
  --rule-tint: #b4e7dd;
  --color-accent: #00705d;
}
:root {
  --color-totem-35-bg: #e0faf4;
  --color-totem-35-accent: #00705d;
}

[data-totem="36"] {
  --page-bg: #dffaf8;
  --rule-tint: #b2e7e3;
  --color-accent: #006f6a;
}
:root {
  --color-totem-36-bg: #dffaf8;
  --color-totem-36-accent: #006f6a;
}

[data-totem="37"] {
  --page-bg: #dffafb;
  --rule-tint: #b1e6e8;
  --color-accent: #006d76;
}
:root {
  --color-totem-37-bg: #dffafb;
  --color-totem-37-accent: #006d76;
}

[data-totem="38"] {
  --page-bg: #dff9fd;
  --rule-tint: #b1e6ed;
  --color-accent: #006b80;
}
:root {
  --color-totem-38-bg: #dff9fd;
  --color-totem-38-accent: #006b80;
}

[data-totem="39"] {
  --page-bg: #dff9ff;
  --rule-tint: #b2e5f2;
  --color-accent: #00688b;
}
:root {
  --color-totem-39-bg: #dff9ff;
  --color-totem-39-accent: #00688b;
}

[data-totem="40"] {
  --page-bg: #e0f8ff;
  --rule-tint: #b4e3f6;
  --color-accent: #006593;
}
:root {
  --color-totem-40-bg: #e0f8ff;
  --color-totem-40-accent: #006593;
}

[data-totem="41"] {
  --page-bg: #e2f7ff;
  --rule-tint: #b8e2fa;
  --color-accent: #00619a;
}
:root {
  --color-totem-41-bg: #e2f7ff;
  --color-totem-41-accent: #00619a;
}

[data-totem="42"] {
  --page-bg: #e4f6ff;
  --rule-tint: #bbe0fc;
  --color-accent: #005ea0;
}
:root {
  --color-totem-42-bg: #e4f6ff;
  --color-totem-42-accent: #005ea0;
}