:root {
  --clr-white: #ffffff;
  --clr-black: #000000;

  --clr-primary-5: #fde5e0;
  --clr-primary-10: #facac0;
  --clr-primary-20: #f8b0a1;
  --clr-primary-40: #f69581;
  --clr-primary-60: #f47b62;
  --clr-primary-80: #f16042;
  --clr-primary-100: #ef4623;
  --clr-primary-120: #bf381c;
  --clr-primary-140: #8f2a15;
  --clr-primary-160: #601c0e;
  --clr-primary-180: #300e07;

  --clr-neutral-5: #f5f5f5;
  --clr-neutral-10: #ebebeb;
  --clr-neutral-20: #e0e0e0;
  --clr-neutral-40: #c2c2c2;
  --clr-neutral-60: #999999;
  --clr-neutral-80: #8d8d8d;
  --clr-neutral-100: #666666;
  --clr-neutral-120: #585858;
  --clr-neutral-140: #444444;
  --clr-neutral-160: #333333;
  --clr-neutral-180: #212529;

  --clr-secondary-5: #fef2fe;
  --clr-secondary-10: #fce1fd;
  --clr-secondary-20: #fad0fc;
  --clr-secondary-40: #f8bffb;
  --clr-secondary-60: #f7aef8;
  --clr-secondary-80: #d778da;
  --clr-secondary-100: #a768aa;
  --clr-secondary-120: #7f4583;
  --clr-secondary-140: #56215d;
  --clr-secondary-160: #39163e;
  --clr-secondary-180: #1c0b1f;

  --clr-success-5: #eefffb;
  --clr-success-10: #ccfff2;
  --clr-success-20: #88fade;
  --clr-success-40: #44f5ca;
  --clr-success-60: #00f0b5;
  --clr-success-80: #00c393;
  --clr-success-100: #0ea88d;
  --clr-success-120: #158479;
  --clr-success-140: #1a5e63;

  --clr-alert-5: #fee8eb;
  --clr-alert-10: #fbbbc3;
  --clr-alert-20: #f88e9b;
  --clr-alert-40: #f56173;
  --clr-alert-60: #f2334a;
  --clr-alert-80: #d20018;
  --clr-alert-100: #ac2534;
  --clr-alert-120: #891e29;
  --clr-alert-140: #66171e;
  --clr-alert-160: #431013;
  --clr-alert-180: #200908;

  --clr-warning-5: #fffae2;
  --clr-warning-10: #fff5c5;
  --clr-warning-20: #fff0a8;
  --clr-warning-40: #ffeb8b;
  --clr-warning-60: #ffe66d;
  --clr-warning-80: #f8d423;
  --clr-warning-100: #ebcc38;
  --clr-warning-120: #d1b21d;
  --clr-warning-140: #766929;
  --clr-warning-160: #534a18;
  --clr-warning-180: #302b07;

  --clr-user-lime: #acf589;
  --clr-user-blue: #42cafd;
  --clr-user-periwinkle: #9381ff;
  --clr-user-pink: #ff7787;
  --clr-user-mauve: #c08f88;

  /* --ff-primary IS GONE, 2026-10-28, Joy's call: "let's get rid of Open Sans
     everywhere--including Google Fonts request." It defined
     `'Open Sans', system-ui, sans-serif` and was the document's face until
     2026-10-25, when style.css:97 moved <body> onto --brand-font-family-sans.

     It had no live reference left at that point. The two rules that pinned it
     explicitly -- the search field and the paginator digits, both on the search
     results page -- were deleted in the same pass, and neither was a real
     exception: the document's own family was --ff-primary too, so each pin and
     the value it inherited were the same face and the pin changed nothing. Left
     standing they would have become the only Open Sans on an Inter site. The
     full history, including a correction that wrongly called the digits
     deliberate, is at css-page-search-results.css:1784.

     The Google Fonts request stopped downloading the face in the same commit as
     this deletion; document_head.hbs has the note on the one risk that carries,
     which is article bodies naming the family inline. */

  --ff-logo: 'Sora', system-ui, sans-serif;

  /* Monospace font. SPACE MONO AS OF 2026-10-29, Joy's call -- "the codex mono
     font is Space Mono... the one we are currently using we will not be using
     any more" -- so this is sitewide, not an article_page change, and the
     Inconsolata download came off the Google Fonts request in the same commit.

     THIS IS NOW AN ALIAS AND THAT FIXES A DEFECT ON THE WAY PAST.
     --brand-font-family-mono already named Space Mono, captured from Codex in
     Phase 1, and nothing had ever read it. The value this replaces was
     `'Inconsolata', serif` -- a PROPORTIONAL SERIF fallback, so any failure of
     the font request rendered every code block in Times with its columns out of
     alignment. The brand token ends in `monospace`, which is what a mono stack
     has to do.

     RETIRING THIS TOKEN IS A CANDIDATE, DELIBERATELY NOT TAKEN HERE. The
     direction of travel is consumers naming the brand token outright -- that is
     what killed --ff-primary on 2026-10-28 and what <body> already does with
     --brand-font-family-sans. The difference is that --ff-primary had no live
     reference left and this has five: `:is(code, kbd, samp)` in css-reset.css,
     and .zd-code-wrapper, .zd-code-header, its `pre` and its `pre code` in
     css-page-article.css. Converting them is a five-rule edit with no visual
     result, so it is named rather than smuggled into a typeface swap.

     NO `ch` EXPOSURE, CHECKED BEFORE THE SWAP RATHER THAN AFTER. `ch` is the
     advance width of the font's zero, so it is typeface-dependent and a font
     change is a layout change wherever one is used -- that is how the Inter swap
     became sitewide (see the --ff-primary note above and css-utilities.css).
     Every `ch` in the theme was pinned to rem on 2026-10-25. The only relative
     type unit left anywhere is `5ex` on `:target`'s scroll-margin in
     css-reset.css, which resolves against body text and never against this
     stack. So this swap moves no layout. */
  --ff-mono: var(--brand-font-family-mono);

  /* Font Awesome */
  --fa-style-family: 'FontAwesome6Pro';

  /* Font sizes */
  /* @link https://utopia.fyi/type/calculator?c=320,14,1.125,1440,14.22,1.125,9,1,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l|l-2xl&g=s,l,xl,4 */
  /* Step -1: 12.4444px → 12.64px */
  --step--1: clamp(0.7778rem, 0.7743rem + 0.0175vi, 0.79rem);
  /* Step 0: 14px → 14.22px */
  --step-0: clamp(0.875rem, 0.8711rem + 0.0196vi, 0.8888rem);
  /* Step 1: 15.75px → 15.9975px */
  --step-1: clamp(0.9844rem, 0.98rem + 0.0221vi, 0.9998rem);
  /* Step 2: 17.7188px → 17.9972px */
  --step-2: clamp(1.1074rem, 1.1024rem + 0.0249vi, 1.1248rem);
  /* Step 3: 19.9336px → 20.2468px */
  --step-3: clamp(1.2458rem, 1.2403rem + 0.028vi, 1.2654rem);
  /* Step 4: 22.4253px → 22.7777px */
  --step-4: clamp(1.4016rem, 1.3953rem + 0.0315vi, 1.4236rem);
  /* Step 5: 25.2285px → 25.6249px */
  --step-5: clamp(1.5768rem, 1.5697rem + 0.0354vi, 1.6016rem);
  /* Step 6: 28.382px → 28.828px */
  --step-6: clamp(1.7739rem, 1.7659rem + 0.0398vi, 1.8018rem);
  /* Step 7: 31.9298px → 32.4315px */
  --step-7: clamp(1.9956rem, 1.9867rem + 0.0448vi, 2.027rem);
  /* Step 8: 35.921px → 36.4855px */
  --step-8: clamp(2.2451rem, 2.235rem + 0.0504vi, 2.2803rem);
  /* Step 9: 40.4111px → 41.0461px */
  --step-9: clamp(2.5257rem, 2.5144rem + 0.0567vi, 2.5654rem);

  /* Line heights, paired 1:1 to the step scale above.
     Headings hold a 1.3 plateau through step-4 (~23px) and tighten above it;
     body stays loose for reading; controls are 1.0 so they keep a fixed height.
     The plateau was set by eye in preview. That role split and the curve come
     from Codex's typography spec, interpolated onto these step values -- Codex's
     own px sizes are deliberately NOT used, the step scale above remains the
     single source of truth for size.

     Heading leading only goes down to step-0, and body leading only up to
     step-2, because outside those ranges the pairing stops making sense (a
     12px heading or a 40px paragraph isn't a thing this theme needs).
     --step--1 is the accessibility floor -- don't size text below it.

     No longer opt-in only: this block said "nothing consumes these yet" until
     2026-10-25, and by then 50 rules did. The global h1-h4 rule in
     css-reset.css does still set a flat 1.3 at every size; replacing that is a
     Phase 4 decision, since article bodies inherit it.

     --step-1 is the document's base size as of 2026-10-25 (style.css:2). Before
     that nothing set one and the base was the browser's 16px, from outside this
     scale entirely. UI chrome opts *down* to --step-0; prose inherits --step-1. */
  --leading-heading-0: 1.3;
  --leading-heading-1: 1.3;
  --leading-heading-2: 1.3;
  --leading-heading-3: 1.3;
  --leading-heading-4: 1.3;
  --leading-heading-5: 1.25;
  --leading-heading-6: 1.2;
  --leading-heading-7: 1.15;
  --leading-heading-8: 1.1;
  --leading-heading-9: 1.1;

  --leading-body--1: 1.3;
  --leading-body-0: 1.4;
  --leading-body-1: 1.5;
  --leading-body-2: 1.5;

  --leading-control: 1;

  /* Font-weights */
  --font-light: 300;
  --font-regular: 400;
  --font-medium: 500;
  --font-bold: 600;
  --font-bolder: 700;

  /*Borders*/
  --border-radius: 0.5rem;
  --border-active: var(--clr-neutral-40);

  --card-border: 1px solid var(--clr-neutral-40);

  --box-shadow: 0px 0px 0px 2px var(--clr-primary-10);

  --shadow-dropdown: 0px 4px 6px 0px rgba(0, 0, 0, 0.1);

  /* Animations */
  --transition-translate-factor: 0.5;
  --transition-rotate-factor: -4deg;
  --transition-scale-factor: 0.05;
  --transition-skew-factor: -4deg;
  --transition-duration: 300ms;

  /*ANCHOR - Padding and Margins */
  /* @link https://utopia.fyi/space/calculator?c=320,16,1.2,1440,24,1.333,4,1,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l|l-2xl&g=s,l,xl,4 */

  /* @link https://utopia.fyi/space/calculator?c=320,16,1.2,1440,24,1.333,4,1,&s=0.75|0.5|0.25,1.5|2|2.5|3|4|6,&g=s,l,xl,4 */

  /* Space 3xs: 4px → 6px */
  --space-3xs: clamp(0.25rem, 0.2143rem + 0.1786vi, 0.375rem);
  /* Space 2xs: 8px → 12px */
  --space-2xs: clamp(0.5rem, 0.4286rem + 0.3571vi, 0.75rem);
  /* Space xs: 12px → 18px */
  --space-xs: clamp(0.75rem, 0.6429rem + 0.5357vi, 1.125rem);
  /* Space s: 16px → 24px */
  --space-s: clamp(1rem, 0.8571rem + 0.7143vi, 1.5rem);
  /* Space m: 24px → 36px */
  --space-m: clamp(1.5rem, 1.2857rem + 1.0714vi, 2.25rem);
  /* Space l: 32px → 48px */
  --space-l: clamp(2rem, 1.7143rem + 1.4286vi, 3rem);
  /* Space xl: 40px → 60px */
  --space-xl: clamp(2.5rem, 2.1429rem + 1.7857vi, 3.75rem);
  /* Space 2xl: 48px → 72px */
  --space-2xl: clamp(3rem, 2.5714rem + 2.1429vi, 4.5rem);
  /* Space 3xl: 64px → 96px */
  --space-3xl: clamp(4rem, 3.4286rem + 2.8571vi, 6rem);
  /* Space 4xl: 96px → 144px */
  --space-4xl: clamp(6rem, 5.1429rem + 4.2857vi, 9rem);

  /* One-up pairs */
  /* Space 3xs-2xs: 4px → 12px */
  --space-3xs-2xs: clamp(0.25rem, 0.1071rem + 0.7143vi, 0.75rem);
  /* Space 2xs-xs: 8px → 18px */
  --space-2xs-xs: clamp(0.5rem, 0.3214rem + 0.8929vi, 1.125rem);
  /* Space xs-s: 12px → 24px */
  --space-xs-s: clamp(0.75rem, 0.5357rem + 1.0714vi, 1.5rem);
  /* Space s-m: 16px → 36px */
  --space-s-m: clamp(1rem, 0.6429rem + 1.7857vi, 2.25rem);
  /* Space m-l: 24px → 48px */
  --space-m-l: clamp(1.5rem, 1.0714rem + 2.1429vi, 3rem);
  /* Space l-xl: 32px → 60px */
  --space-l-xl: clamp(2rem, 1.5rem + 2.5vi, 3.75rem);
  /* Space xl-2xl: 40px → 72px */
  --space-xl-2xl: clamp(2.5rem, 1.9286rem + 2.8571vi, 4.5rem);
  /* Space 2xl-3xl: 48px → 96px */
  --space-2xl-3xl: clamp(3rem, 2.1429rem + 4.2857vi, 6rem);
  /* Space 3xl-4xl: 64px → 144px */
  --space-3xl-4xl: clamp(4rem, 2.5714rem + 7.1429vi, 9rem);

  --gap-sm: clamp(1rem, 3vmax, 1.5rem);
  --gap-md: clamp(1.5rem, 6vmax, 3rem);
  --gap-lg: clamp(3rem, 8vmax, 4rem);
  --gap-xl: clamp(6rem, 12vmax, 6rem);
  --gap-2xl: clamp(9rem, 15vmax, 8rem);

  /* Margins */
  --block-flow-sm: min(2rem, 4vh);
  --block-flow-md: min(4rem, 8vh);
  --block-flow-lg: min(8rem, 16vh);

  /*ANCHOR - Flex Properties */
  --cluster-outer: space-between;
  --cluster-inner: flex-start;

  /*SECTION - Relative Sizes */
  --one-rem: 1rem;
  --one-half-rem: 1.5rem;
  --two-rem: 2rem;
}