/* Copied from brand/tokens.css on 2026-11-04 so the site stands on its own.
brand/tokens.css stays the source: re-copy it when it changes, never edit this copy by hand. */
/* Gist Auto design tokens. Working draft 2026-11-02. Cream default since 2026-11-04. Since r8
(also 2026-11-04) the fonts are Barlow, Barlow Semi Condensed and Yellowtail, on the lightest cream.
Mirrors tokens.json. Rules and evidence live in type-and-color.md.
Load the fonts with:
Themes: light (cream ground, navy text) is the default on :root, and the website uses
nothing else. Bryce, 2026-11-04: "no black or dark greay backgrounds for the sight but
I do lie the cream color for that". The dark, brand and media themes stay here for
video, print and documents only; the website never sets them.
Bryce picked the fonts and the cream on 2026-11-04: "yellow tail, i like Barlow, lightest".
The badge navy and orange still wait on his yes [CONFIRM]. */
/* Metric-matched fallbacks, so the swap from local Arial (or Helvetica) to Barlow and Barlow Semi
Condensed moves the layout as little as it can. Measured on 2026-11-04 in headless Chromium from the Google
Fonts files: ascent 1.0 em, descent 0.2 em and no line gap for both families, and size-adjust from
the advance width of the site's own words against Arial and Arial Bold (Helvetica's advances are
the same). Barlow is matched on running text, Barlow Semi Condensed on uppercase headings and
labels, the way the site sets each one. Proof in site/qa/r8-type-cream/tokens/SYSTEM.md: with
these faces the swap moves no block's height or baseline, and line widths by 1.3% at most. They
match average width, not each word's, so on the real pages a balanced headline can still break
differently at the swap: the website waits for the fonts before it shows a page (r8 fix round 1,
site/www/NOTES.md). */
@font-face {
font-family: "Barlow Fallback";
src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Liberation Sans");
font-weight: 400;
size-adjust: 95.77%;
ascent-override: 104.42%;
descent-override: 20.88%;
line-gap-override: 0.00%;
}
@font-face {
font-family: "Barlow Fallback";
src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Helvetica-Bold"), local("Liberation Sans Bold");
font-weight: 600;
size-adjust: 90.67%;
ascent-override: 110.30%;
descent-override: 22.06%;
line-gap-override: 0.00%;
}
@font-face {
font-family: "Barlow Semi Condensed Fallback";
src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Helvetica-Bold"), local("Liberation Sans Bold");
font-weight: 700;
size-adjust: 77.62%;
ascent-override: 128.83%;
descent-override: 25.77%;
line-gap-override: 0.00%;
}
@font-face {
font-family: "Barlow Semi Condensed Fallback";
src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Helvetica-Bold"), local("Liberation Sans Bold");
font-weight: 800;
size-adjust: 78.46%;
ascent-override: 127.45%;
descent-override: 25.49%;
line-gap-override: 0.00%;
}
:root {
/* Palette. Use roles below in components; use these only to define roles. */
--gist-navy: #11265D;
--gist-cream: #FAF7EE; /* Bryce's lightest cream (2026-11-04). The logo artwork keeps its own cream ink. */
--gist-orange: #F75908;
--gist-orange-light: #FF742B;
--gist-ink: #081431;
--gist-charcoal: #1A1C1D;
--gist-steel: #9BA5B8;
--gist-slate: #4A5874;
--gist-haze: #768096;
--gist-paper: #FEFDF9; /* Cream lifted in OKLCH. Paper on Cream is 1.05:1, so a Paper surface always carries a line. */
--gist-error-dark: #EE7C90;
--gist-error-light: #A92227;
--gist-ink-rgb: 8 20 49;
--gist-navy-rgb: 17 38 93;
--gist-cream-rgb: 250 247 238;
--gist-paper-rgb: 254 253 249;
--gist-orange-rgb: 247 89 8;
/* Scrim under cream text on footage: cream passes 4.5:1 even over white.
Video and print only. The website puts no text on footage and no ink
ground anywhere; a label over a poster sits on a cream or paper tag. */
--color-scrim: rgb(var(--gist-ink-rgb) / 0.68);
/* Fonts. Barlow Semi Condensed does the loud jobs (display, h1, h2, labels, buttons, nav) and is
always uppercase, through text-transform, never by rewriting the words. Barlow does the reading.
Yellowtail is the script accent. All three are static weights with no width axis, so nothing sets
font-stretch. Archivo lives inside the logo artwork only and is never loaded as a font. */
--font-display: "Barlow Semi Condensed", "Barlow Semi Condensed Fallback", Roboto, "Helvetica Neue", Arial, sans-serif;
--font-text: "Barlow", "Barlow Fallback", Roboto, "Helvetica Neue", Arial, sans-serif;
--font-script: "Yellowtail", "Brush Script MT", "Segoe Script", cursive;
/* Weights in use, and the only ones the font request loads. */
--font-weight-regular: 400; /* Barlow: reading text. Yellowtail's one weight. */
--font-weight-semibold: 600; /* Barlow: h3, h4, statements, emphasis in running text. */
--font-weight-bold: 700; /* Barlow Semi Condensed: labels, buttons, nav. */
--font-weight-extrabold: 800; /* Barlow Semi Condensed: display, h1, h2, numerals. */
/* Type scale. Each role carries its family, size, weight, case (text-transform), tracking and
leading. Sizes grow between a 390 px and a 1440 px viewport, then keep growing to their 2560
value (the wide block below). Uppercase comes only from the case token. */
--type-display-1-family: var(--font-display);
--type-display-1-size: clamp(3.25rem, 0.7429rem + 10.2857vw, 10rem); /* 52 phone, 160 desktop, 220 at 2560 */
--type-display-1-weight: 800;
--type-display-1-case: uppercase;
--type-display-1-tracking: 0em;
--type-display-1-leading: 0.92;
--type-display-2-family: var(--font-display);
--type-display-2-size: clamp(2.75rem, 1.1714rem + 6.4762vw, 7rem); /* 44 phone, 112 desktop, 160 at 2560 */
--type-display-2-weight: 800;
--type-display-2-case: uppercase;
--type-display-2-tracking: 0em;
--type-display-2-leading: 0.93;
--type-display-3-family: var(--font-display);
--type-display-3-size: clamp(2.375rem, 1.4rem + 4vw, 5rem); /* 38 phone, 80 desktop, 120 at 2560 */
--type-display-3-weight: 800;
--type-display-3-case: uppercase;
--type-display-3-tracking: 0em;
--type-display-3-leading: 0.95;
--type-heading-1-family: var(--font-display);
--type-heading-1-size: clamp(2rem, 1.4429rem + 2.2857vw, 3.5rem); /* 32 phone, 56 desktop, 80 at 2560 */
--type-heading-1-weight: 800;
--type-heading-1-case: uppercase;
--type-heading-1-tracking: 0em;
--type-heading-1-leading: 1;
--type-heading-2-family: var(--font-display);
--type-heading-2-size: clamp(1.75rem, 1.4714rem + 1.1429vw, 2.5rem); /* 28 phone, 40 desktop, 54 at 2560 */
--type-heading-2-weight: 800;
--type-heading-2-case: uppercase;
--type-heading-2-tracking: 0em;
--type-heading-2-leading: 1;
--type-heading-3-family: var(--font-text);
--type-heading-3-size: clamp(1.4375rem, 1.275rem + 0.6667vw, 1.875rem); /* 23 phone, 30 desktop, 36 at 2560 */
--type-heading-3-weight: 600;
--type-heading-3-case: none;
--type-heading-3-tracking: 0em;
--type-heading-3-leading: 1.15;
--type-heading-4-family: var(--font-text);
--type-heading-4-size: clamp(1.25rem, 1.1804rem + 0.2857vw, 1.4375rem); /* 20 phone, 23 desktop, 26 at 2560 */
--type-heading-4-weight: 600;
--type-heading-4-case: none;
--type-heading-4-tracking: 0em;
--type-heading-4-leading: 1.25;
--type-body-lead-family: var(--font-text);
--type-body-lead-size: clamp(1.1875rem, 1.1411rem + 0.1905vw, 1.3125rem); /* 19 phone, 21 desktop, 25 at 2560 */
--type-body-lead-weight: 400;
--type-body-lead-case: none;
--type-body-lead-tracking: 0em;
--type-body-lead-leading: 1.45;
--type-body-family: var(--font-text);
--type-body-size: clamp(1.0625rem, 1.0393rem + 0.0952vw, 1.125rem); /* 17 phone, 18 desktop, 21 at 2560 */
--type-body-weight: 400;
--type-body-case: none;
--type-body-tracking: 0em;
--type-body-leading: 1.6;
--type-body-small-family: var(--font-text);
--type-body-small-size: clamp(0.9375rem, 0.9143rem + 0.0952vw, 1rem); /* 15 phone, 16 desktop, 18 at 2560 */
--type-body-small-weight: 400;
--type-body-small-case: none;
--type-body-small-tracking: 0.01em;
--type-body-small-leading: 1.5;
--type-label-family: var(--font-display);
--type-label-size: clamp(0.8125rem, 0.7893rem + 0.0952vw, 0.875rem); /* 13 phone, 14 desktop, 17 at 2560 */
--type-label-weight: 700;
--type-label-case: uppercase;
--type-label-tracking: 0.12em;
--type-label-leading: 1.2;
--type-label-small-family: var(--font-display);
--type-label-small-size: 0.75rem; /* 12 phone, 12 desktop, 14 at 2560 */
--type-label-small-weight: 700;
--type-label-small-case: uppercase;
--type-label-small-tracking: 0.14em;
--type-label-small-leading: 1.2;
--type-button-family: var(--font-display);
--type-button-size: clamp(0.9375rem, 0.9143rem + 0.0952vw, 1rem); /* 15 phone, 16 desktop, 18 at 2560 */
--type-button-weight: 700;
--type-button-case: uppercase;
--type-button-tracking: 0.04em;
--type-button-leading: 1;
/* A long line at heading size (pull quote, Work end line): Barlow 600 in sentence case.
Its size is heading-2, or heading-1 where the page sets it larger. */
--type-statement-family: var(--font-text);
--type-statement-size: var(--type-heading-2-size);
--type-statement-weight: 600;
--type-statement-case: none;
--type-statement-tracking: -0.005em;
--type-statement-leading: 1.15;
/* AUTO-style spaced caps, measured from the badge pill in Barlow Semi Condensed 800. Size it with a label or heading size. */
--type-badge-caps-family: var(--font-display);
--type-badge-caps-weight: 800;
--type-badge-caps-case: uppercase;
--type-badge-caps-tracking: 0.41em;
--type-badge-caps-leading: 1;
/* Script accent: Yellowtail, by the six rules in type-and-color.md section 5. Never "Gist" or
"Gist Auto", one short line of five words or fewer per screen, 28 px and up, never on buttons,
menus, forms or labels. Navy on cream and paper, cream on navy in video and print, never orange.
Never all capitals, never in the same line as the logo. Weight stays 400: Yellowtail has one
weight, so a bolder weight would only be faked; set font-synthesis: none on it. */
--type-script-family: var(--font-script);
--type-script-size: clamp(2rem, 1.4429rem + 2.2857vw, 3.5rem); /* 32 phone, 56 desktop, 72 at 2560 */
--type-script-min: 28px; /* The floor. Never set the script smaller. */
--type-script-weight: 400;
--type-script-case: none;
--type-script-tracking: 0em;
--type-script-leading: 1.1;
/* Word spacing (r8 fix round 1, a token since r8 minors): Yellowtail's t crossbar and j tail reach into
its own word space (0.21em), so "shot right" and "a job" read as one word. 0.08em more opens them
(16 px between "shot" and "right" at 56 px, was 11.6). Set it on every script line. */
--type-script-word-spacing: 0.08em;
/* The orange block shade, from logo/v9/kit.json: a solid extrusion with hard edges, no blur and
no gradient, at 45 degrees toward the lower right. Depth is 0.1288 of the x-height; Yellowtail's
x-height is 0.4438 em, so the depth is 0.0572 em (0.0404 em across and 0.0404 em down),
drawn in 8 steps so it stays solid up to about 200 px. Only at headline sizes: 48 px and up. */
--script-shade-depth: 0.0572em;
--script-shade-color: var(--gist-orange);
--script-shade: 0.0051em 0.0051em 0 var(--script-shade-color), 0.0101em 0.0101em 0 var(--script-shade-color), 0.0152em 0.0152em 0 var(--script-shade-color), 0.0202em 0.0202em 0 var(--script-shade-color), 0.0253em 0.0253em 0 var(--script-shade-color), 0.0303em 0.0303em 0 var(--script-shade-color), 0.0354em 0.0354em 0 var(--script-shade-color), 0.0404em 0.0404em 0 var(--script-shade-color);
--script-shade-min: 48px;
/* Space. 4px base. */
--space-0: 0;
--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;
--space-11: 12rem;
--space-gutter: clamp(1rem, -0.1143rem + 4.5714vw, 4rem); /* Page side padding. 16px on phones, 64px at 1440. */
--space-section: clamp(4.5rem, 2.4571rem + 8.381vw, 10rem); /* Space between page sections. */
--space-block: clamp(2rem, 1.2571rem + 3.0476vw, 4rem); /* Space between blocks inside a section. */
--space-grid-gap: clamp(0.75rem, 0.4714rem + 1.1429vw, 1.5rem); /* Gap in the work grid and card grids. */
--space-stack-tight: var(--space-2); /* Label to its value, heading to its line. */
--space-stack: var(--space-4); /* Paragraph to paragraph, field to field. */
--space-stack-loose: var(--space-6); /* Heading to the content it introduces. */
--space-control-x: var(--space-5); /* Inline padding inside buttons and inputs. */
--space-control-y: var(--space-3); /* Block padding inside buttons and inputs. */
/* Radius. Squared, small. No pill buttons or chips: the pill belongs to the logo. */
--radius-none: 0px;
--radius-xs: 2px;
--radius-sm: 4px;
--radius-md: 8px;
--radius-circle: 50%;
--radius-control: var(--radius-sm);
--radius-media: var(--radius-sm);
--radius-panel: var(--radius-md);
/* Size and border */
--size-control: 48px;
--size-touch-min: 44px;
--size-icon-sm: 16px;
--size-icon: 20px;
--size-icon-lg: 24px;
--size-header: clamp(3.5rem, 3.1286rem + 1.5238vw, 4.5rem);
--size-layout-max: 1440px;
--size-measure: 64ch; /* About 85 characters of Barlow 400. */
--size-measure-lead: 52ch; /* About 69 characters of Barlow 400. */
--size-measure-heading: 18ch; /* About 20 characters of uppercase Barlow Semi Condensed 800. */
--border-hairline: 1px;
--border-strong: 2px;
--border-focus-width: 2px;
--border-focus-offset: 3px;
--border-link-underline: 2px;
--border-link-underline-offset: 0.18em;
/* Motion. Smooth ease-out, no bounce, no spring, no overshoot.
Some of these tokens are kept but not used by the website, which writes
its own numbers there; each comment says so. The website's real timings
are in the guide's Motion section (On the website, The 3D emblem). */
--motion-duration-instant: 100ms; /* Press feedback: a button drops 1 px. */
--motion-duration-fast: 180ms; /* Quick color and opacity changes. Kept, not used by the website: its hovers and the focus pull-in run 240 ms. */
--motion-duration-base: 320ms; /* Small moves. On the website: the skip link sliding in, the header logo's fade, the Menu toggle's bars and the Pause motion button's color. */
--motion-duration-slow: 560ms; /* Reveals. Kept, not used by the website: its reveals run 600 ms. */
--motion-duration-slower: 900ms; /* Big moves into place. Kept, not used by the website: its page wipe runs 800 ms. */
--motion-duration-intro: 1400ms; /* An intro. Kept, not used by the website: the Home intro runs its own clocks (the UI starts at stage ready plus 1.6 s or boot plus 1.2 s, whichever is first). */
--motion-duration-logo: 2400ms; /* A logo reveal. Kept, not used by the website: on Home the 3D emblem's arrival is the logo's entrance (1.15 s, square to you by 1.9 s). */
--motion-duration-ambient: 24000ms; /* A slow idle loop. Kept, not used by the website: the emblem sways on 11 s and 13 s cycles, and a light crosses it every 9 to 14 s. */
--motion-ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* GSAP power4.out. The default for anything entering or answering the pointer. On the website: the page wipe, the phone menu opening, hovers, the focus pull-in and the fade-up reveals. */
--motion-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); /* GSAP expo.out. Long glide for big moments. On the website: headlines rising behind their masks, posters wiping in, Home's line and corner line, and the video player opening. */
--motion-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* GSAP power2.inOut. Something traveling across the screen. On the website: the glints across the logo and the posters, the phone menu closing and the player's loading pulse. */
--motion-ease-in-out-strong: cubic-bezier(0.83, 0, 0.17, 1); /* GSAP power4.inOut. Hard full-screen moves. Kept, not used by the website: its page wipe runs on motion-ease-out. */
--motion-ease-in: cubic-bezier(0.5, 0, 0.75, 0); /* GSAP power3.in. Exits, at about 0.7x the enter duration. On the website, Home's line and buttons leave on it in 160 ms. */
--motion-ease-linear: linear; /* Scrubbed motion and progress. */
--motion-stagger: 70ms; /* Between items in a quick group. On the website: the phone menu's links and the Not found stall lines. Scroll reveals step 120 ms apart. */
--motion-stagger-max: 490ms; /* Cap for a whole group's stagger. Kept, not used by the website: its scroll reveals stop stepping at the seventh item, 720 ms in. */
--motion-distance-reveal: 16px; /* How far a reveal rises while it fades in (over 600 ms on the website). */
--motion-scale-media-hover: 1.02; /* A work card's poster while the card has focus. Pointer hover runs a slow push to 1.075 over 6.5 s instead. No hover clips, never a black frame. */
--motion-ambient-state: running; /* Paused under reduced motion. Kept, not used by the website: the emblem has its own Pause motion toggle, and under reduced motion Home shows the still. */
}
/* Wide screens. From 1440 every type size keeps growing to its 2560 value and holds there, so a big
monitor gets a bigger page instead of a small one in the middle. Moved here from the site's
base.css in r8, so the whole type scale lives in one place. Below 1440 nothing changes. */
@media (min-width: 1440px) {
:root {
--type-display-1-size: clamp(10rem, 5.1786rem + 5.3571vw, 13.75rem); /* 160 at 1440, 220 at 2560 */
--type-display-2-size: clamp(7rem, 3.1429rem + 4.2857vw, 10rem); /* 112 at 1440, 160 at 2560 */
--type-display-3-size: clamp(5rem, 1.7857rem + 3.5714vw, 7.5rem); /* 80 at 1440, 120 at 2560 */
--type-heading-1-size: clamp(3.5rem, 1.5714rem + 2.1429vw, 5rem); /* 56 at 1440, 80 at 2560 */
--type-heading-2-size: clamp(2.5rem, 1.375rem + 1.25vw, 3.375rem); /* 40 at 1440, 54 at 2560 */
--type-heading-3-size: clamp(1.875rem, 1.3929rem + 0.5357vw, 2.25rem); /* 30 at 1440, 36 at 2560 */
--type-heading-4-size: clamp(1.4375rem, 1.1964rem + 0.2679vw, 1.625rem); /* 23 at 1440, 26 at 2560 */
--type-body-lead-size: clamp(1.3125rem, 0.9911rem + 0.3571vw, 1.5625rem); /* 21 at 1440, 25 at 2560 */
--type-body-size: clamp(1.125rem, 0.8839rem + 0.2679vw, 1.3125rem); /* 18 at 1440, 21 at 2560 */
--type-body-small-size: clamp(1rem, 0.8393rem + 0.1786vw, 1.125rem); /* 16 at 1440, 18 at 2560 */
--type-label-size: clamp(0.875rem, 0.6339rem + 0.2679vw, 1.0625rem); /* 14 at 1440, 17 at 2560 */
--type-label-small-size: clamp(0.75rem, 0.5893rem + 0.1786vw, 0.875rem); /* 12 at 1440, 14 at 2560 */
--type-button-size: clamp(1rem, 0.8393rem + 0.1786vw, 1.125rem); /* 16 at 1440, 18 at 2560 */
--type-script-size: clamp(3.5rem, 2.2143rem + 1.4286vw, 4.5rem); /* 56 at 1440, 72 at 2560 */
}
}
/* Roles. Light (cream) is the default, and the website's only theme.
Cream page, Paper surfaces, Navy text, Slate for muted text. Orange is never
text here: it is a mark (bars, squares, underlines, the drop shade) and the
primary button's fill, with an Ink label. Navy fills only control-sized
things (a button on hover, a selected chip, a small tag). */
:root,
[data-theme="light"] {
color-scheme: light;
--color-bg: var(--gist-cream);
--color-bg-brand: var(--gist-navy);
--color-bg-media: var(--gist-paper);
--color-surface: var(--gist-paper);
--color-surface-raised: var(--gist-paper);
--color-text: var(--gist-navy);
--color-text-muted: var(--gist-slate);
--color-text-disabled: var(--gist-haze);
--color-line: rgb(var(--gist-navy-rgb) / 0.16);
--color-line-strong: var(--gist-haze);
--color-accent: var(--gist-orange);
--color-accent-text: var(--gist-navy);
--color-action: var(--gist-orange);
--color-action-hover: var(--gist-orange-light);
--color-on-action: var(--gist-ink);
--color-link: var(--gist-navy);
--color-link-underline: var(--gist-orange);
--color-focus: var(--gist-navy);
--color-error: var(--gist-error-light);
--color-selection-bg: var(--gist-navy);
--color-selection-text: var(--gist-cream);
}
/* The three dark themes below are for video, print and documents. The website
never uses them (Bryce, 2026-11-04: no black or dark grey grounds). */
/* Dark: Ink page, Navy surfaces, Cream text. */
[data-theme="dark"] {
color-scheme: dark;
--color-bg: var(--gist-ink);
--color-bg-brand: var(--gist-navy);
--color-bg-media: var(--gist-charcoal);
--color-surface: var(--gist-navy);
--color-surface-raised: var(--gist-navy);
--color-text: var(--gist-cream);
--color-text-muted: var(--gist-steel);
--color-text-disabled: var(--gist-haze);
--color-line: rgb(var(--gist-cream-rgb) / 0.14);
--color-line-strong: var(--gist-haze);
--color-accent: var(--gist-orange);
--color-accent-text: var(--gist-orange-light);
--color-action: var(--gist-orange);
--color-action-hover: var(--gist-orange-light);
--color-on-action: var(--gist-ink);
--color-link: var(--gist-cream);
--color-link-underline: var(--gist-orange);
--color-focus: var(--gist-orange);
--color-error: var(--gist-error-dark);
--color-selection-bg: var(--gist-orange);
--color-selection-text: var(--gist-ink);
}
/* Navy brand field (end slates, print). Small orange text switches to orange-light here (orange on navy is only 4.38:1). */
[data-theme="brand"] {
color-scheme: dark;
--color-bg: var(--gist-navy);
--color-bg-brand: var(--gist-navy);
--color-bg-media: var(--gist-charcoal);
--color-surface: var(--gist-ink);
--color-surface-raised: var(--gist-ink);
--color-text: var(--gist-cream);
--color-text-muted: var(--gist-steel);
--color-text-disabled: var(--gist-haze);
--color-line: rgb(var(--gist-cream-rgb) / 0.14);
--color-line-strong: var(--gist-haze);
--color-accent: var(--gist-orange);
--color-accent-text: var(--gist-orange-light);
--color-action: var(--gist-orange);
--color-action-hover: var(--gist-orange-light);
--color-on-action: var(--gist-ink);
--color-link: var(--gist-cream);
--color-link-underline: var(--gist-orange);
--color-focus: var(--gist-orange);
--color-error: var(--gist-error-dark);
--color-selection-bg: var(--gist-orange);
--color-selection-text: var(--gist-ink);
}
/* Charcoal, for footage in video and print layouts. */
[data-theme="media"] {
color-scheme: dark;
--color-bg: var(--gist-charcoal);
--color-bg-brand: var(--gist-navy);
--color-bg-media: var(--gist-charcoal);
--color-surface: var(--gist-ink);
--color-surface-raised: var(--gist-navy);
--color-text: var(--gist-cream);
--color-text-muted: var(--gist-steel);
--color-text-disabled: var(--gist-haze);
--color-line: rgb(var(--gist-cream-rgb) / 0.14);
--color-line-strong: var(--gist-haze);
--color-accent: var(--gist-orange);
--color-accent-text: var(--gist-orange-light);
--color-action: var(--gist-orange);
--color-action-hover: var(--gist-orange-light);
--color-on-action: var(--gist-ink);
--color-link: var(--gist-cream);
--color-link-underline: var(--gist-orange);
--color-focus: var(--gist-orange);
--color-error: var(--gist-error-dark);
--color-selection-bg: var(--gist-orange);
--color-selection-text: var(--gist-ink);
}
@media (prefers-reduced-motion: reduce) {
:root {
--motion-duration-instant: 0ms;
--motion-duration-fast: 0ms;
--motion-duration-base: 160ms;
--motion-duration-slow: 160ms;
--motion-duration-slower: 160ms;
--motion-duration-intro: 160ms;
--motion-duration-logo: 0ms;
--motion-stagger: 0ms;
--motion-stagger-max: 0ms;
--motion-distance-reveal: 0px;
--motion-scale-media-hover: 1;
--motion-ambient-state: paused;
}
}