/* base-tokens.css -- GENERATED, do not edit.
   generated-by:: projects-tools-studio-engine-workbench-powershell-build-base-css@4
   source:: studio\meetup-140\base-tokens\ -- edit the values there and re-run the build */

/* ==== 01-palette.css ==== */
/* 01-palette -- TOKEN SOURCE, hand-edited.
   ACSS module: palette  (assets/scss/modules/palette/)
   The name is the vendor's, not one we invented, so it can be looked up.
   build-base-css.ps1 merges every file in this folder in name order.
   A token may be declared in :root in ONE file here -- the build fails on a second.

   HOW THESE ARE USED -- this is the WHOLE colour system. Ten roles: primary, secondary,
   tertiary, accent, base, neutral (the palette) plus success, warning, danger, info (the
   contextual four). Each carries a shade scale -- ultra-light, light, semi-light, the role
   itself, semi-dark, dark, ultra-dark -- and a -hover. Nothing outside that set exists.

   only-the-ROLE-is-edited:: the shades are computed from the role input, so writing
   --primary-light by hand creates a second source for one value. To re-colour a project,
   change the role and let the scale follow.

   every-value-is-a-light-dark-PAIR:: light-dark(light-scheme, dark-scheme). Keep the shape
   when editing -- a single value here breaks the scheme switch in 23-color-scheme.css.

   base-is-the-darkest-role:: apart from true black and white. But a near-black or
   near-white SURFACE uses a --neutral shade, not --base -- --base carries brand and drifts
   with it, which is exactly what a near-neutral surface must not do.

   there-are-no-transparency-tokens:: --{role}-trans-N does not emit in 4.0.1 even with the
   toggles on -- the name survives in a vendor cheatsheet only, so referencing one resolves
   to nothing. Write color-mix(in oklch, var(--primary) 50%, transparent) instead.

   contrast-is-decided-here:: every pair a design uses meets 4.5:1 for normal text and 3:1
   for large text and UI -- settled at the palette, not audited after the page is built.

   our-law:: @ctx:cockpit-format-rules-css-template@13 -- see [#colour] and
   [#the-forbidden-names] for the names that look right and do not exist */

:root {
  --primary: light-dark(oklch(0.664 0.107 221), oklch(0.664 0.107 221));
  --primary-hover: light-dark(oklch(0.748 0.107 221), oklch(0.748 0.107 221));
  --primary-ultra-light: light-dark(oklch(0.95 0.038 220.961471301), oklch(0.1 0.024 221));
  --primary-ultra-dark: light-dark(oklch(0.1 0.024 221), oklch(0.95 0.038 220.961471301));
  --primary-light: light-dark(oklch(0.85 0.107 221), oklch(0.25 0.061 221.010477519));
  --primary-dark: light-dark(oklch(0.25 0.061 221.010477519), oklch(0.85 0.107 221));
  --primary-semi-light: light-dark(oklch(0.65 0.107 221), oklch(0.35 0.085 221));
  --primary-semi-dark: light-dark(oklch(0.35 0.085 221), oklch(0.65 0.107 221));
  --secondary: light-dark(oklch(0.229 0.044 288), oklch(0.229 0.044 288));
  --secondary-hover: light-dark(oklch(0.747 0.044 288), oklch(0.747 0.044 288));
  --secondary-ultra-light: light-dark(oklch(0.95 0.028 288), oklch(0.1 0.044 288));
  --secondary-ultra-dark: light-dark(oklch(0.1 0.044 288), oklch(0.95 0.028 288));
  --secondary-light: light-dark(oklch(0.85 0.044 288), oklch(0.25 0.044 288));
  --secondary-dark: light-dark(oklch(0.25 0.044 288), oklch(0.85 0.044 288));
  --secondary-semi-light: light-dark(oklch(0.65 0.044 288), oklch(0.35 0.044 288));
  --secondary-semi-dark: light-dark(oklch(0.35 0.044 288), oklch(0.65 0.044 288));
  --tertiary: light-dark(oklch(0.582 0.047 89), oklch(0.582 0.047 89));
  --tertiary-hover: light-dark(oklch(0.748 0.047 89), oklch(0.748 0.047 89));
  --tertiary-ultra-light: light-dark(oklch(0.95 0.047 89), oklch(0.1 0.024 88.9944551964));
  --tertiary-ultra-dark: light-dark(oklch(0.1 0.024 88.9944551964), oklch(0.95 0.047 89));
  --tertiary-light: light-dark(oklch(0.85 0.047 89), oklch(0.25 0.047 89));
  --tertiary-dark: light-dark(oklch(0.25 0.047 89), oklch(0.85 0.047 89));
  --tertiary-semi-light: light-dark(oklch(0.65 0.047 89), oklch(0.35 0.047 89));
  --tertiary-semi-dark: light-dark(oklch(0.35 0.047 89), oklch(0.65 0.047 89));
  --accent: light-dark(oklch(0.814 0.053 122), oklch(0.814 0.053 122));
  --accent-hover: light-dark(oklch(0.748 0.053 122), oklch(0.748 0.053 122));
  --accent-ultra-light: light-dark(oklch(0.95 0.053 122), oklch(0.1 0.028 122.005143053));
  --accent-ultra-dark: light-dark(oklch(0.1 0.028 122.005143053), oklch(0.95 0.053 122));
  --accent-light: light-dark(oklch(0.85 0.053 122), oklch(0.25 0.053 122));
  --accent-dark: light-dark(oklch(0.25 0.053 122), oklch(0.85 0.053 122));
  --accent-semi-light: light-dark(oklch(0.65 0.053 122), oklch(0.35 0.053 122));
  --accent-semi-dark: light-dark(oklch(0.35 0.053 122), oklch(0.65 0.053 122));
  --base: light-dark(oklch(0.249 0.044 239), oklch(0.249 0.044 239));
  --base-hover: light-dark(oklch(0.747 0.044 239), oklch(0.747 0.044 239));
  --base-ultra-light: light-dark(oklch(0.95 0.029 238.995402683), oklch(0.1 0.029 239.018089844));
  --base-ultra-dark: light-dark(oklch(0.1 0.029 239.018089844), oklch(0.95 0.029 238.995402683));
  --base-light: light-dark(oklch(0.85 0.044 239), oklch(0.25 0.044 239));
  --base-dark: light-dark(oklch(0.25 0.044 239), oklch(0.85 0.044 239));
  --base-semi-light: light-dark(oklch(0.65 0.044 239), oklch(0.35 0.044 239));
  --base-semi-dark: light-dark(oklch(0.35 0.044 239), oklch(0.65 0.044 239));
  --neutral: light-dark(oklch(0 0 0), oklch(0 0 0));
  --neutral-hover: light-dark(oklch(0 0 0), oklch(0 0 0));
  --neutral-ultra-light: light-dark(oklch(0.95 0 0), oklch(0.1 0 0));
  --neutral-ultra-dark: light-dark(oklch(0.1 0 0), oklch(0.95 0 0));
  --neutral-light: light-dark(oklch(0.85 0 0), oklch(0.25 0 0));
  --neutral-dark: light-dark(oklch(0.25 0 0), oklch(0.85 0 0));
  --neutral-semi-light: light-dark(oklch(0.65 0 0), oklch(0.35 0 0));
  --neutral-semi-dark: light-dark(oklch(0.35 0 0), oklch(0.65 0 0));
  --white: light-dark(#fff, #000);
  --black: light-dark(#000, #fff);
  --danger: light-dark(oklch(0.592 0.202 21), oklch(0.592 0.202 21));
  --danger-hover: light-dark(oklch(0.747 0.196 21), oklch(0.747 0.196 21));
  --danger-ultra-light: light-dark(oklch(0.95 0.032 21.0016296119), oklch(0.1 0.045 21));
  --danger-ultra-dark: light-dark(oklch(0.1 0.045 21), oklch(0.95 0.032 21.0016296119));
  --danger-light: light-dark(oklch(0.85 0.106 21.0001581755), oklch(0.15 0.068 21));
  --danger-dark: light-dark(oklch(0.15 0.068 21), oklch(0.85 0.106 21.0001581755));
  --danger-semi-light: light-dark(oklch(0.65 0.202 21), oklch(0.35 0.159 21));
  --danger-semi-dark: light-dark(oklch(0.35 0.159 21), oklch(0.65 0.202 21));
  --warning: light-dark(oklch(0.844 0.172 85), oklch(0.844 0.172 85));
  --warning-hover: light-dark(oklch(0.747 0.154 85), oklch(0.747 0.154 85));
  --warning-ultra-light: light-dark(oklch(0.95 0.065 85), oklch(0.1 0.024 85));
  --warning-ultra-dark: light-dark(oklch(0.1 0.024 85), oklch(0.95 0.065 85));
  --warning-light: light-dark(oklch(0.85 0.154 85), oklch(0.15 0.035 84.990939209));
  --warning-dark: light-dark(oklch(0.15 0.035 84.990939209), oklch(0.85 0.154 85));
  --warning-semi-light: light-dark(oklch(0.65 0.154 85), oklch(0.35 0.083 85));
  --warning-semi-dark: light-dark(oklch(0.35 0.083 85), oklch(0.65 0.154 85));
  --info: light-dark(oklch(0.655 0.11 212), oklch(0.655 0.11 212));
  --info-hover: light-dark(oklch(0.747 0.11 212), oklch(0.747 0.11 212));
  --info-ultra-light: light-dark(oklch(0.95 0.045 212), oklch(0.1 0.023 212));
  --info-ultra-dark: light-dark(oklch(0.1 0.023 212), oklch(0.95 0.045 212));
  --info-light: light-dark(oklch(0.85 0.11 212), oklch(0.15 0.035 212));
  --info-dark: light-dark(oklch(0.15 0.035 212), oklch(0.85 0.11 212));
  --info-semi-light: light-dark(oklch(0.65 0.11 212), oklch(0.35 0.081 212));
  --info-semi-dark: light-dark(oklch(0.35 0.081 212), oklch(0.65 0.11 212));
  --success: light-dark(oklch(0.64 0.175 147), oklch(0.64 0.175 147));
  --success-hover: light-dark(oklch(0.747 0.175 147), oklch(0.747 0.175 147));
  --success-ultra-light: light-dark(oklch(0.95 0.096 147), oklch(0.1 0.042 147));
  --success-ultra-dark: light-dark(oklch(0.1 0.042 147), oklch(0.95 0.096 147));
  --success-light: light-dark(oklch(0.85 0.175 147), oklch(0.15 0.062 147));
  --success-dark: light-dark(oklch(0.15 0.062 147), oklch(0.85 0.175 147));
  --success-semi-light: light-dark(oklch(0.65 0.175 147), oklch(0.35 0.146 147));
  --success-semi-dark: light-dark(oklch(0.35 0.146 147), oklch(0.65 0.175 147));
  --base-text-lh: calc(6px + 2ex);
  --base-heading-lh: calc(4px + 2ex);
}

/* ==== 02-contextual-colors.css ==== */
/* 02-contextual-colors -- TOKEN SOURCE, hand-edited.
   ACSS module: contextual-colors  (assets/scss/modules/contextual-colors/)
   The name is the vendor's, not one we invented, so it can be looked up.
   build-base-css.ps1 merges every file in this folder in name order.
   A token may be declared in :root in ONE file here -- the build fails on a second.

   HOW THESE ARE USED -- these are the two halves of a PAIR, and a section picks the pair
   by carrying a .bg--{role} class in its MARKUP. The class sets the surface from --bg-*
   and recolours the text, heading, link, button and icon under it for contrast, so
   choosing the background chooses everything below it too. The wiring that reads these
   tokens is in base-classes\29-section-styles.css.

   So a template never writes a colour to suit a background. Swap .bg--dark for
   bg--ultra-light on the section and every colour underneath follows. Write a colour
   underneath instead and it OVERRIDES the pair, and the section stops answering its own
   class -- silently, because the flip is written with :where() and has zero specificity.

   the-PAGE-surface-is-its-own-token:: body-bg-color is what the page sits on, and it is
   the one surface in this file that no class sets -- there is no bg-- class for the body,
   so a project changes the page background by giving this token a value. It points at
   white by default, which is why a section carrying no bg-- class reads as light.

   the-flip-is-a-setting:: it is driven by option-relate-bg-text, and per-context values
   live as bg-{context}-{element} in automatic_css_settings -- so the right place to change
   what a context looks like is that setting, not a colour written under the class.

   the-framework-behaviour:: @ctx:atlas-wordpress-plugins-automaticcss-utilities@3 -- see
   [#color--contextual-auto-flip] for the mechanism and the observed per-context defaults
   our-law:: @ctx:cockpit-format-rules-css-template@13 -- see
   [#the-background-class-carries-the-text-colours-with-it] */

:root {
  /* This deck is projected in a dark room, so the PAGE surface is dark rather
     than white -- and it points at the same token .bg--dark uses, so a slide
     and the page it sits on can never drift apart. Set here rather than as a
     background written on body in style.css: that would be a colour outside
     the pair system, and the section flip would stop answering for it. */
  --body-bg-color: var(--neutral-dark);

  /* surfaces -- one of these is chosen by the .bg--{role} class on the section */
  --bg-ultra-light: var(--neutral-ultra-light);
  --bg-light: var(--neutral-light);
  --bg-dark: var(--neutral-dark);
  --bg-ultra-dark: var(--neutral-ultra-dark);

  /* the text side of each pair -- LIGHT text belongs on a DARK surface and vice versa.
     The -muted pair is the only deliberate quieter variant; naming the wrong polarity
     (--text-light-muted on a light panel) is not a style choice, it is invisible text. */
  --text-light: var(--white);
  --text-light-muted: color-mix(in srgb, var(--text-light) 80%, transparent);
  --text-dark: var(--black);
  --text-dark-muted: color-mix(in srgb, var(--text-dark) 80%, transparent);
}

/* ==== 03-text.css ==== */
/* 03-text -- TOKEN SOURCE, hand-edited.
   ACSS module: text  (assets/scss/modules/text/)
   The name is the vendor's, not one we invented, so it can be looked up.
   build-base-css.ps1 merges every file in this folder in name order.
   A token may be declared in :root in ONE file here -- the build fails on a second.

   HOW THESE ARE USED -- two scales, and they are not interchangeable. --text-xs..--text-xxl
   is BODY copy; --h6..--h1 is HEADINGS. A heading element takes its size from the h-scale
   automatically, so a template sets font-size only when it wants a size the element does
   not already imply.

   the-heading-LEVEL-is-not-a-size:: h2 vs h3 is a position in the document outline, decided
   by structure. Never pick h3 because h2 looks too big -- keep the level and set the size.

   the-to-forms-are-RESPONSIVE-RANGES:: --h2-to-h4 clamps from h2 down to h4 across the
   viewport, so one token replaces a media query. Same for --text-l-to-s. Reach for these
   before writing a breakpoint.

   every-size-is-already-fluid:: each value is a clamp() -- so a token does not need a
   media query wrapped around it, and wrapping one in a breakpoint fights the clamp.

   the-name-is-xxl-not-2xl:: --text-2xl and --h1-2xl do not exist. A var() naming nothing
   resolves to the inherited value, so the page still renders and the typo survives review.

   the-page-default-colours-live-here:: text-color and heading-color. Inside a .bg--{role}
   section both are superseded by the contextual flip, so a template does not restate them
   to suit a background -- see base-tokens\02-contextual-colors.css.

   our-law:: @ctx:cockpit-format-rules-css-template@13 -- [#the-forbidden-names]
   heading-structure:: @ctx:cockpit-format-rules-html-markup@7 -- [#headings] */

:root {
  --root-font-size: 100%;
  --heading-color: var(--text-dark);
  --text-xxl-max-width: 45ch;
  --text-xl-max-width: 55ch;
  --text-l-max-width: 70ch;
  --text-m-line-height: calc(6px + 2ex);
  --text-m-max-width: 85ch;
  --text-s-max-width: 90ch;
  --text-xs-max-width: 90ch;
  --text-color: var(--text-dark-muted);
  --text-line-height: calc(6px + 2ex);
  --text-text-wrap: pretty;
  --text-xs: clamp(0.8125rem, calc(0.0994035785vw + 0.7901341948rem), 0.875rem);
  --text-s: clamp(0.875rem, calc(0.0994035785vw + 0.8526341948rem), 0.9375rem);
  --text-m: clamp(1rem, calc(0.1988071571vw + 0.9552683897rem), 1.125rem);
  --text-l: clamp(1.2rem, calc(0.4765407555vw + 1.09277833rem), 1.499625rem);
  --text-xl: clamp(1.44rem, calc(0.8890658052vw + 1.2399601938rem), 1.999000125rem);
  --text-xxl: clamp(1.728rem, calc(1.489729092vw + 1.3928109543rem), 2.6646671666rem);
  --text-s-to-xs: clamp(0.8125rem, calc(0.1988071571vw + 0.7677683897rem), 0.9375rem);
  --text-m-to-s: clamp(0.875rem, calc(0.3976143141vw + 0.7855367793rem), 1.125rem);
  --text-m-to-xs: clamp(0.8125rem, calc(0.4970178926vw + 0.7006709742rem), 1.125rem);
  --text-l-to-m: clamp(1rem, calc(0.7946322068vw + 0.8212077535rem), 1.499625rem);
  --text-l-to-s: clamp(0.875rem, calc(0.9934393638vw + 0.6514761431rem), 1.499625rem);
  --text-l-to-xs: clamp(0.8125rem, calc(1.0928429423vw + 0.566610338rem), 1.499625rem);
  --text-xl-to-l: clamp(1.2rem, calc(1.2707755467vw + 0.914075502rem), 1.999000125rem);
  --text-xl-to-m: clamp(1rem, calc(1.588866998vw + 0.6425049254rem), 1.999000125rem);
  --text-xl-to-s: clamp(0.875rem, calc(1.7876741551vw + 0.4727733151rem), 1.999000125rem);
  --text-xl-to-xs: clamp(0.8125rem, calc(1.8870777336vw + 0.3879075099rem), 1.999000125rem);
  --text-xxl-to-xl: clamp(1.44rem, calc(1.9477807819vw + 1.0017493241rem), 2.6646671666rem);
  --text-xxl-to-l: clamp(1.2rem, calc(2.3294905235vw + 0.6758646322rem), 2.6646671666rem);
  --text-xxl-to-m: clamp(1rem, calc(2.6475819748vw + 0.4042940557rem), 2.6646671666rem);
  --text-xxl-to-s: clamp(0.875rem, calc(2.8463891318vw + 0.2345624453rem), 2.6646671666rem);
  --text-xxl-to-xs: clamp(0.8125rem, calc(2.9457927103vw + 0.1496966402rem), 2.6646671666rem);
  --text-font-family: "Inter", sans-serif;
  --heading-line-height: calc(4px + 2ex);
  --heading-font-weight: 700;
  --heading-text-wrap: balance;
  --h1-max-width: 40ch;
  --h4-line-height: calc(4px + 2ex);
  --h6: clamp(0.8125rem, calc(0.0994035785vw + 0.7901341948rem), 0.875rem);
  --h5: clamp(0.875rem, calc(0.0994035785vw + 0.8526341948rem), 0.9375rem);
  --h4: clamp(1.125rem, calc(0.1988071571vw + 1.0802683897rem), 1.25rem);
  --h3: clamp(1.35rem, calc(0.5029821074vw + 1.2368290258rem), 1.66625rem);
  --h2: clamp(1.62rem, calc(0.9560417495vw + 1.4048906064rem), 2.22111125rem);
  --h1: clamp(1.944rem, calc(1.6170835726vw + 1.5801561962rem), 2.9607412963rem);
  --h5-to-h6: clamp(0.8125rem, calc(0.1988071571vw + 0.7677683897rem), 0.9375rem);
  --h4-to-h5: clamp(0.875rem, calc(0.5964214712vw + 0.740805169rem), 1.25rem);
  --h4-to-h6: clamp(0.8125rem, calc(0.6958250497vw + 0.6559393638rem), 1.25rem);
  --h3-to-h4: clamp(1.125rem, calc(0.8608349901vw + 0.9313121272rem), 1.66625rem);
  --h3-to-h5: clamp(0.875rem, calc(1.2584493042vw + 0.5918489066rem), 1.66625rem);
  --h3-to-h6: clamp(0.8125rem, calc(1.3578528827vw + 0.5069831014rem), 1.66625rem);
  --h2-to-h3: clamp(1.35rem, calc(1.3854652087vw + 1.038270328rem), 2.22111125rem);
  --h2-to-h4: clamp(1.125rem, calc(1.7433180915vw + 0.7327534294rem), 2.22111125rem);
  --h2-to-h5: clamp(0.875rem, calc(2.1409324056vw + 0.3932902087rem), 2.22111125rem);
  --h2-to-h6: clamp(0.8125rem, calc(2.2403359841vw + 0.3084244036rem), 2.22111125rem);
  --h1-to-h2: clamp(1.62rem, calc(2.1323917237vw + 1.1402118622rem), 2.9607412963rem);
  --h1-to-h3: clamp(1.35rem, calc(2.5618151829vw + 0.7735915838rem), 2.9607412963rem);
  --h1-to-h4: clamp(1.125rem, calc(2.9196680656vw + 0.4680746852rem), 2.9607412963rem);
  --h1-to-h5: clamp(0.875rem, calc(3.3172823797vw + 0.1286114646rem), 2.9607412963rem);
  --h1-to-h6: clamp(0.8125rem, calc(3.4166859583vw + 0.0437456594rem), 2.9607412963rem);
  --heading-letter-spacing: normal;
  --heading-font-family: "Work Sans", sans-serif;
  --heading-spacing: 1.2em;
  --text-shadow-1: 0 1px 2px color-mix(in srgb, black 20%, transparent);
  --text-shadow-2: 0 2px 4px color-mix(in srgb, black 30%, transparent);
  --text-shadow-3: 0 4px 8px color-mix(in srgb, black 40%, transparent);
}

/* ==== 04-sections.css ==== */
/* 04-sections -- TOKEN SOURCE, hand-edited.
   ACSS module: sections  (assets/scss/modules/sections/)
   The name is the vendor's, not one we invented, so it can be looked up.
   build-base-css.ps1 merges every file in this folder in name order.
   A token may be declared in :root in ONE file here -- the build fails on a second.
   HOW THESE ARE USED -- this is the SECTION rhythm, the vertical breathing between bands
   of a page. It is a separate scale from --space-* in 05-spacing.css: --space-* is spacing
   INSIDE a section, --section-space-* is the size of the section itself.

   the-one-a-section-reads:: --section-padding-block, which points at --section-space-m by
   default. The .section--{size} classes in base-classes\30-section-padding.css repoint it,
   so a section changes height by swapping a class rather than by writing padding.

   the-to-forms-are-RESPONSIVE-RANGES:: --section-space-l-to-m shrinks from l down to m
   across the viewport -- one token instead of a media query.

   never-write-padding-block-on-a-section:: it overrides the rhythm every other section
   follows, and the page stops being evenly spaced the moment one band opts out.

   our-law:: @ctx:cockpit-format-rules-css-template@13 -- see [#spacing] */

:root {
  --section-padding-block: var(--section-space-m);
  --section-space-xs: clamp(1.6883440665rem, calc(1.2909040692vw + 1.3978906509rem), 2.5rem);
  --section-space-s: clamp(2.2505626407rem, calc(2.3847910288vw + 1.7139846592rem), 3.75rem);
  --section-space-s-to-xs: clamp(1.6883440665rem, calc(3.2789756397vw + 0.9505745476rem), 3.75rem);
  --section-space-m: clamp(3rem, calc(4.1749502982vw + 2.0606361829rem), 5.625rem);
  --section-space-m-to-s: clamp(2.2505626407rem, calc(5.3668983846vw + 1.0430105041rem), 5.625rem);
  --section-space-m-to-xs: clamp(1.6883440665rem, calc(6.2610829956vw + 0.2796003925rem), 5.625rem);
  --section-space-l: clamp(3.999rem, calc(7.0592445328vw + 2.4106699801rem), 8.4375rem);
  --section-space-l-to-m: clamp(3rem, calc(8.648111332vw + 1.0541749503rem), 8.4375rem);
  --section-space-l-to-s: clamp(2.2505626407rem, calc(9.8400594184vw + 0.0365492715rem), 8.4375rem);
  --section-space-l-to-xs: clamp(1.6883440665rem, calc(10.7342440294vw + -0.7268608401rem), 8.4375rem);
  --section-space-xl: clamp(5.330667rem, calc(11.6510266402vw + 2.709186006rem), 12.65625rem);
  --section-space-xl-to-l: clamp(3.999rem, calc(13.7689860835vw + 0.9009781312rem), 12.65625rem);
  --section-space-xl-to-m: clamp(3rem, calc(15.3578528827vw + -0.4555168986rem), 12.65625rem);
  --section-space-xl-to-s: clamp(2.2505626407rem, calc(16.5498009691vw + -1.4731425774rem), 12.65625rem);
  --section-space-xl-to-xs: clamp(1.6883440665rem, calc(17.4439855801vw + -2.236552689rem), 12.65625rem);
  --section-space-xxl: clamp(7.105779111rem, calc(18.8923990282vw + 2.8549893296rem), 18.984375rem);
  --section-space-xxl-to-xl: clamp(5.330667rem, calc(21.7156389662vw + 0.4446482326rem), 18.984375rem);
  --section-space-xxl-to-l: clamp(3.999rem, calc(23.8335984095vw + -1.3635596421rem), 18.984375rem);
  --section-space-xxl-to-m: clamp(3rem, calc(25.4224652087vw + -2.720054672rem), 18.984375rem);
  --section-space-xxl-to-s: clamp(2.2505626407rem, calc(26.6144132952vw + -3.7376803508rem), 18.984375rem);
  --section-space-xxl-to-xs: clamp(1.6883440665rem, calc(27.5085979061vw + -4.5010904624rem), 18.984375rem);
}

/* ==== 05-spacing.css ==== */
/* 05-spacing -- TOKEN SOURCE, hand-edited.
   ACSS module: spacing  (assets/scss/modules/spacing/)
   The name is the vendor's, not one we invented, so it can be looked up.
   build-base-css.ps1 merges every file in this folder in name order.
   A token may be declared in :root in ONE file here -- the build fails on a second.

   HOW THESE ARE USED -- gap is the only spacing primitive between siblings, and the
   CONTEXTUAL gaps are what a template reaches for first: --container-gap between a
   section's top-level children, --grid-gap between repeated items, --content-gap between
   heading, text and button. The --space-* scale below is the fallback for when no
   contextual gap fits.

   when-a-gap-is-nearly-right-multiply-it:: calc(var(--content-gap) * 0.75) keeps the gap's
   MEANING and keeps tracking the scale when the project's spacing base changes -- jumping
   to a --space-* token throws both away for a number that happens to look right today.

   the-scale-has-a-FLOOR:: --space-xs is the smallest step. Below it there is no token, so
   a 4px nav padding or a 2px radius on a 4px bar is geometry rather than a skipped token --
   write the literal. Above the floor, a literal is drift.

   the-names-that-do-not-exist:: --space-2xl is not a token; the top of the scale is spelled
   --space-xxl. A var() naming nothing resolves to the inherited value, so the page still
   renders and the mistake survives review.

   the-GUTTER-is-not-part-of-that-scale:: it is the page's inline breathing room, a clamp
   from 1rem to 5rem, and every section and header applies it through padding-inline. A
   template reads it when it deliberately gives up the section padding and carries the
   gutter on an inner container instead, which is how a full-bleed band keeps its text
   aligned with every other band. Setting padding-inline to a --space-* token in its place
   is the one substitution that breaks alignment across the whole page.

   the-FLOW-family-spaces-prose-rather-than-siblings:: paragraph-spacing is the base
   measure, and flow-spacing and figure-spacing both point at it so running text, figures
   and lists share one rhythm. figcaption-spacing is deliberately tighter, because a
   caption belongs to the image above it rather than to the column.

   they-are-em-not-rem:: the flow family is written in em, so it scales with the text it
   separates -- a small print block gets proportionally smaller gaps without a second
   token. Overriding one with a rem value is what breaks that.

   our-law:: @ctx:cockpit-format-rules-css-template@13 -- see [#spacing]
   the-framework-stance:: @ctx:atlas-wordpress-plugins-automaticcss-utilities@3 -- see
   [#spacing-stance], and note v4 removed the .pad--N / .margin--N utility catalogue */

:root {
  --gutter: clamp(1rem, calc(6.3618290258vw + -0.4314115308rem), 5rem);
  --space-xs: clamp(0.8333333333rem, calc(-0.0172384889vw + 0.8480506933rem), 0.8441720333rem);
  --space-s: clamp(1.1252813203rem, calc(0.1983597291vw + 1.0806503813rem), 1.25rem);
  --space-s-to-xs: clamp(0.8441720333rem, calc(0.6454520346vw + 0.6989453255rem), 1.25rem);
  --space-m: clamp(1.5rem, calc(0.5964214712vw + 1.365805169rem), 1.875rem);
  --space-m-to-s: clamp(1.1252813203rem, calc(1.1923955144vw + 0.8569923296rem), 1.875rem);
  --space-m-to-xs: clamp(0.8441720333rem, calc(1.6394878199vw + 0.4752872738rem), 1.875rem);
  --space-l: clamp(1.9995rem, calc(1.2930417495vw + 1.7085656064rem), 2.8125rem);
  --space-l-to-m: clamp(1.5rem, calc(2.0874751491vw + 1.0303180915rem), 2.8125rem);
  --space-l-to-s: clamp(1.1252813203rem, calc(2.6834491923vw + 0.5215052521rem), 2.8125rem);
  --space-l-to-xs: clamp(0.8441720333rem, calc(3.1305414978vw + 0.1398001963rem), 2.8125rem);
  --space-xl: clamp(2.6653335rem, calc(2.4706425447vw + 2.1094389274rem), 4.21875rem);
  --space-xl-to-l: clamp(1.9995rem, calc(3.5296222664vw + 1.2053349901rem), 4.21875rem);
  --space-xl-to-m: clamp(1.5rem, calc(4.324055666vw + 0.5270874751rem), 4.21875rem);
  --space-xl-to-s: clamp(1.1252813203rem, calc(4.9200297092vw + 0.0182746358rem), 4.21875rem);
  --space-xl-to-xs: clamp(0.8441720333rem, calc(5.3671220147vw + -0.3634304201rem), 4.21875rem);
  --space-xxl: clamp(3.5528895555rem, calc(4.4138933511vw + 2.5597635515rem), 6.328125rem);
  --space-xxl-to-xl: clamp(2.6653335rem, calc(5.8255133201vw + 1.354593003rem), 6.328125rem);
  --space-xxl-to-l: clamp(1.9995rem, calc(6.8844930417vw + 0.4504890656rem), 6.328125rem);
  --space-xxl-to-m: clamp(1.5rem, calc(7.6789264414vw + -0.2277584493rem), 6.328125rem);
  --space-xxl-to-s: clamp(1.1252813203rem, calc(8.2749004846vw + -0.7365712887rem), 6.328125rem);
  --space-xxl-to-xs: clamp(0.8441720333rem, calc(8.7219927901vw + -1.1182763445rem), 6.328125rem);
  --content-gap: var(--space-m);
  --container-gap: var(--space-xl);
  --grid-gap: var(--space-m);
  --paragraph-spacing: 1em;
  --flow-spacing: var(--paragraph-spacing);
  --figure-spacing: var(--paragraph-spacing);
  --figcaption-spacing: 0.5em;
}

/* ==== 06-width.css ==== */
/* 06-width -- TOKEN SOURCE, hand-edited.
   ACSS module: width  (assets/scss/modules/width/)
   The name is the vendor's, not one we invented, so it can be looked up.
   build-base-css.ps1 merges every file in this folder in name order.
   A token may be declared in :root in ONE file here -- the build fails on a second.
   HOW THESE ARE USED -- --content-width is the page measure, and the container element is
   what applies it. A template does not set its own max width to line up with other
   sections; it uses the container and inherits the measure.

   --content-width-safe:: the measure MINUS the gutter on both sides, so content never
   touches the viewport edge on a small screen. This is the one to reach for when an element
   sets its own width.

   --width-N-are-FRACTIONS-of-the-measure:: --width-50 is half the content width, not half
   the viewport -- so two of them line up with the grid rather than with the window.

   a-narrower-measure-is-a-reading-decision:: capping a text column at --width-70 keeps the
   line length readable, and that is a legitimate use. Capping it at a raw rem value is not.

   our-law:: @ctx:cockpit-format-rules-css-template@13 */

:root {
  --content-width: 85.375rem;
  --content-width-safe: min(var(--content-width), calc(100% - var(--gutter) * 2));
  --width-10: calc(var(--content-width) * 0.1);
  --width-20: calc(var(--content-width) * 0.2);
  --width-30: calc(var(--content-width) * 0.3);
  --width-40: calc(var(--content-width) * 0.4);
  --width-50: calc(var(--content-width) * 0.5);
  --width-60: calc(var(--content-width) * 0.6);
  --width-70: calc(var(--content-width) * 0.7);
  --width-80: calc(var(--content-width) * 0.8);
  --width-90: calc(var(--content-width) * 0.9);
  --width-full: calc(var(--content-width) * 100%);
}

/* ==== 07-grid.css ==== */
/* 07-grid -- TOKEN SOURCE, hand-edited.
   ACSS module: grid  (assets/scss/modules/grid/)
   The name is the vendor's, not one we invented, so it can be looked up.
   build-base-css.ps1 merges every file in this folder in name order.
   A token may be declared in :root in ONE file here -- the build fails on a second.
   HOW THESE ARE USED -- grid-template-columns values, applied as
   grid-template-columns: var(--grid-3). The named ratios (--grid-1-2, --grid-3-1) are the
   asymmetric splits, so a two-column layout with a wide left side is a token, not a
   hand-written fr pair.

   prefer---grid-auto-N-for-anything-repeating:: it is auto-fit, so cards reflow from N
   columns down to one WITHOUT a media query. A fixed --grid-3 stays three columns and needs
   a breakpoint written by hand for every step down.

   --auto-grid-aggressiveness:: how early the auto grids break -- 0.7 means an item may
   shrink to 70% of its ideal share before a column drops. Tune it here, once, rather than
   per section.

   the-gap-is-not-here:: column and row spacing come from --grid-gap in 05-spacing.css --
   these tokens describe the COLUMNS only.

   our-law:: @ctx:cockpit-format-rules-css-template@13 */

:root {
  --grid-1: repeat(1, minmax(0, 1fr));
  --grid-2: repeat(2, minmax(0, 1fr));
  --grid-3: repeat(3, minmax(0, 1fr));
  --grid-4: repeat(4, minmax(0, 1fr));
  --grid-5: repeat(5, minmax(0, 1fr));
  --grid-6: repeat(6, minmax(0, 1fr));
  --grid-7: repeat(7, minmax(0, 1fr));
  --grid-8: repeat(8, minmax(0, 1fr));
  --grid-9: repeat(9, minmax(0, 1fr));
  --grid-10: repeat(10, minmax(0, 1fr));
  --grid-11: repeat(11, minmax(0, 1fr));
  --grid-12: repeat(12, minmax(0, 1fr));
  --grid-1-2: minmax(0, 1fr) minmax(0, 2fr);
  --grid-1-3: minmax(0, 1fr) minmax(0, 3fr);
  --grid-2-1: minmax(0, 2fr) minmax(0, 1fr);
  --grid-2-3: minmax(0, 2fr) minmax(0, 3fr);
  --grid-3-1: minmax(0, 3fr) minmax(0, 1fr);
  --grid-3-2: minmax(0, 3fr) minmax(0, 2fr);
  --grid-auto-2: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - ((2 - 1) * var(--grid-gap))) / 2) * 0.7, (100% - (2 - 1) * var(--grid-gap)) / 2)), 1fr));
  --grid-auto-3: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - ((3 - 1) * var(--grid-gap))) / 3) * 0.7, (100% - (3 - 1) * var(--grid-gap)) / 3)), 1fr));
  --grid-auto-4: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - ((4 - 1) * var(--grid-gap))) / 4) * 0.7, (100% - (4 - 1) * var(--grid-gap)) / 4)), 1fr));
  --grid-auto-5: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - ((5 - 1) * var(--grid-gap))) / 5) * 0.7, (100% - (5 - 1) * var(--grid-gap)) / 5)), 1fr));
  --grid-auto-6: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - ((6 - 1) * var(--grid-gap))) / 6) * 0.7, (100% - (6 - 1) * var(--grid-gap)) / 6)), 1fr));
  --grid-auto-7: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - ((7 - 1) * var(--grid-gap))) / 7) * 0.7, (100% - (7 - 1) * var(--grid-gap)) / 7)), 1fr));
  --grid-auto-8: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - ((8 - 1) * var(--grid-gap))) / 8) * 0.7, (100% - (8 - 1) * var(--grid-gap)) / 8)), 1fr));
  --grid-auto-9: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - ((9 - 1) * var(--grid-gap))) / 9) * 0.7, (100% - (9 - 1) * var(--grid-gap)) / 9)), 1fr));
  --grid-auto-10: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - ((10 - 1) * var(--grid-gap))) / 10) * 0.7, (100% - (10 - 1) * var(--grid-gap)) / 10)), 1fr));
  --grid-auto-11: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - ((11 - 1) * var(--grid-gap))) / 11) * 0.7, (100% - (11 - 1) * var(--grid-gap)) / 11)), 1fr));
  --grid-auto-12: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - ((12 - 1) * var(--grid-gap))) / 12) * 0.7, (100% - (12 - 1) * var(--grid-gap)) / 12)), 1fr));
  --auto-grid-aggressiveness: 0.7;
}

/* ==== 08-columns.css ==== */
/* 08-columns -- TOKEN SOURCE, hand-edited.
   ACSS module: columns  (assets/scss/modules/columns/)
   The name is the vendor's, not one we invented, so it can be looked up.
   build-base-css.ps1 merges every file in this folder in name order.
   A token may be declared in :root in ONE file here -- the build fails on a second.
   HOW THESE ARE USED -- CSS MULTI-COLUMN (column-count / column-width / column-rule), the
   newspaper flow where one block of text splits across columns. This is NOT the grid --
   a set of cards is a grid, and reaching here for one puts the second card above the third.

   the-rule-widths-are-hairlines:: 0.5px, 1px and 3px are deliberate literals -- a divider
   line is geometry rather than a spacing step, and the scale has no token this small.

   our-law:: @ctx:cockpit-format-rules-css-template@13 */

:root {
  --col-width-s: 13rem;
  --col-width-m: 25rem;
  --col-width-l: 38rem;
  --col-rule-width-s: 0.5px;
  --col-rule-width-m: 1px;
  --col-rule-width-l: 3px;
}

/* ==== 09-buttons.css ==== */
/* 09-buttons -- TOKEN SOURCE, hand-edited.
   ACSS module: buttons  (assets/scss/modules/buttons/)
   The name is the vendor's, not one we invented, so it can be looked up.
   build-base-css.ps1 merges every file in this folder in name order.
   A token may be declared in :root in ONE file here -- the build fails on a second.
   HOW THESE ARE USED -- a button is styled by OVERRIDING these tokens, never by writing
   child selectors. Set --btn-padding-inline on a block and every button inside it follows,
   including ones added later.

   the-role-comes-from-the-CLASS:: .btn--primary, .btn--secondary and the rest carry the
   colours. Inside a .bg--{role} section those colours are flipped for you -- see
   base-classes\29-section-styles.css -- so a button on a dark band needs no special case.

   --option-*-btn-outline-are-SETTINGS-not-values:: on/off switches read by the button
   rules, so setting one to a colour does nothing and reports no error.

   the-em-units-are-deliberate:: padding in em scales with the button font size, so one
   size change resizes the whole control instead of leaving the padding behind.

   our-law:: @ctx:cockpit-format-rules-css-template@13 -- see [#component-tokens] */

:root {
  --option-primary-btn-outline: on;
  --option-secondary-btn-outline: on;
  --btn-padding-block: 0.5em;
  --btn-padding-inline: 1.25em;
  --btn-min-width: 8.75rem;
  --btn-width: max-content;
  --btn-line-height: 1;
  --btn-font-size: var(--text-m);
  --btn-font-weight: 400;
  --btn-font-family: inherit;
  --btn-font-style: normal;
  --btn-text-decoration: none;
  --btn-text-decoration-hover: none;
  --btn-letter-spacing: 0;
  --btn-text-transform: none;
  --btn-border-width: 1.5px;
  --btn-border-style: solid;
  --btn-border-radius: var(--radius);
  --btn-radius: var(--radius);
  --btn-justify-content: center;
  --btn-align-items: center;
  --btn-text-align: center;
}

/* ==== 10-links.css ==== */
/* 10-links -- TOKEN SOURCE, hand-edited.
   ACSS module: links  (assets/scss/modules/links/)
   The name is the vendor's, not one we invented, so it can be looked up.
   build-base-css.ps1 merges every file in this folder in name order.
   A token may be declared in :root in ONE file here -- the build fails on a second.
   HOW THESE ARE USED -- the defaults for every inline link. A block that wants different
   link colours overrides --link-color at block level rather than selecting its own a tags.

   inside-a-bg--section-these-are-superseded:: the contextual flip recolours links per
   context via the bg-{context}-link setting -- see base-tokens\02-contextual-colors.css.

   a-link-styled-as-a-button-is-still-a-link:: it takes .btn--{role} for the look, and the
   element stays an a with a real href.

   our-law:: @ctx:cockpit-format-rules-css-template@13 -- see [#component-tokens] */

:root {
  --link-color: var(--primary);
  --link-color-hover: var(--primary-hover);
  --link-transition: var(--transition);
  --link-decoration: inherit;
  --link-decoration-hover: inherit;
  --link-underline-offset: auto;
  --link-weight: inherit;
}

/* ==== 11-cards.css ==== */
/* 11-cards -- TOKEN SOURCE, hand-edited.
   ACSS module: cards  (assets/scss/modules/cards/)
   The name is the vendor's, not one we invented, so it can be looked up.
   build-base-css.ps1 merges every file in this folder in name order.
   A token may be declared in :root in ONE file here -- the build fails on a second.
   HOW THESE ARE USED -- the card system is one long token list precisely so a card variant
   is a handful of overrides at block level, never a restated set of child selectors. A
   variant such as card--feature sets --card-background and --card-padding and is done.

   a-card-sets-BOTH-its-surface-and-its-text:: --card-background with --card-heading-color
   and --card-text-color. A card is its own surface, so this is not the same act as
   overriding a section colour -- see base-tokens\02-contextual-colors.css for that line.

   --card-min-radius:: a floor, so a card never renders with a sharper corner than 4px even
   if --card-radius is set smaller.

   most-values-POINT-at-another-token:: --card-icon-* mirror the icon system, --card-radius
   points at --radius. Overriding the thing they point at changes cards too, which is
   usually what is wanted -- override the --card-* name only when cards should differ.

   our-law:: @ctx:cockpit-format-rules-css-template@13 -- see [#component-tokens] */

:root {
  --card-padding: var(--space-m);
  --card-gap: calc(var(--content-gap) / 2);
  --card-border-width: var(--border-width);
  --card-border-style: solid;
  --card-display: flex;
  --card-radius: var(--radius);
  --card-min-radius: 4px;
  --card-heading-size: var(--h3);
  --card-text-size: var(--text-s);
  --card-button-font-size: var(--text-s);
  --card-icon-size: var(--icon-size-l);
  --card-icon-padding: var(--icon-padding);
  --card-icon-border-width: var(--icon-border-width);
  --card-icon-border-style: var(--icon-border-style);
  --card-icon-radius: var(--icon-radius);
  --card-icon-background: var(--icon-background);
  --card-icon-color: var(--icon-color);
  --card-icon-border-color: var(--icon-border-color);
  --card-line-height: 1.4;
  --card-avatar-radius: var(--radius);
  --card-avatar-border-width: var(--border-width);
  --card-avatar-border-style: var(--border-style);
  --card-avatar-size: 140px;
  --card-avatar-aspect-ratio: 1;
  --card-media-radius: var(--radius);
  --card-media-aspect-ratio: 1.3333333333;
  --card-media-object-fit: cover;
  --card-background: var(--neutral-ultra-light);
  --card-heading-color: var(--text-dark);
  --card-text-color: var(--text-dark-muted);
  --card-link-color: var(--primary);
  --card-link-color-hover: var(--primary-hover);
  --card-button-style: primary;
  --card-border-color: var(--border-color-dark);
}

/* ==== 12-icons.css ==== */
/* 12-icons -- TOKEN SOURCE, hand-edited.
   ACSS module: icons  (assets/scss/modules/icons/)
   The name is the vendor's, not one we invented, so it can be looked up.
   build-base-css.ps1 merges every file in this folder in name order.
   A token may be declared in :root in ONE file here -- the build fails on a second.
   HOW THESE ARE USED -- --icon-size-xs..xl is the size scale; --icon-size is what an icon
   actually reads, so a block resizes its icons by repointing that one name.

   the-variable-spells-it-xl-and-the-CLASS-spells-it-2xl:: the utility is .icon--2xl while
   the variable side stops at xl. ACSS is genuinely inconsistent here, so the spelling
   depends on whether you are naming a variable or a class.

   the-padding-scale-is-flat-by-default:: --icon-padding-xs..xl all point at --icon-padding.
   That is deliberate, not an oversight -- repoint the ones a project needs to differ.

   an-icon-is-not-an-image:: it sits inline in the flow, is aria-hidden by default, and is
   never wrapped in a figure -- see @ctx:cockpit-format-rules-html-markup@7 [#icons]

   our-law:: @ctx:cockpit-format-rules-css-template@13 -- see [#component-tokens] */

:root {
  --icon-scheme: inherit;
  --icon-size: 32px;
  --icon-padding: 0.15em;
  --icon-radius: var(--radius);
  --icon-background: var(--neutral-ultra-light);
  --icon-background-hover: var(--neutral-light);
  --icon-border-color: var(--border-color-dark);
  --icon-border-color-hover: inherit;
  --icon-border-width: var(--border-width);
  --icon-border-style: var(--border-style);
  --icon-color: var(--text-dark-muted);
  --icon-color-hover: var(--primary);
  --icon-list-icon-size: 1em;
  --icon-list-gap: 1em;
  --icon-size-xs: 12px;
  --icon-size-s: 16px;
  --icon-size-m: 32px;
  --icon-size-l: 64px;
  --icon-size-xl: 128px;
  --icon-padding-xs: var(--icon-padding);
  --icon-padding-s: var(--icon-padding);
  --icon-padding-m: var(--icon-padding);
  --icon-padding-l: var(--icon-padding);
  --icon-padding-xl: var(--icon-padding);
}

/* ==== 13-borders.css ==== */
/* 13-borders -- TOKEN SOURCE, hand-edited.
   ACSS module: borders  (assets/scss/modules/borders/)
   The name is the vendor's, not one we invented, so it can be looked up.
   build-base-css.ps1 merges every file in this folder in name order.
   A token may be declared in :root in ONE file here -- the build fails on a second.
   HOW THESE ARE USED -- --radius is the project corner, and everything else points at it,
   so one edit rounds the whole site. --radius-s / --radius-l are the deliberate steps away
   from it, and --radius-50 / --radius-circle are the shapes rather than sizes.

   the-COMPOSITE-tokens-save-three-declarations:: --border is width + style + colour in one
   value, so border: var(--border) is the normal form. Reach for --border-light on a dark
   surface and --border-dark on a light one.

   the-border-colours-are-computed-not-picked:: color-mix against black or white at 20%, so
   they sit on any surface without being tied to a palette role.

   a-1px-border-is-an-allowed-LITERAL:: a hairline is structure rather than design and the
   scale has no token that small -- but the width tokens exist, so prefer --border-width.

   our-law:: @ctx:cockpit-format-rules-css-template@13 */

:root {
  --radius: 5px;
  --radius-50: 50%;
  --radius-circle: 50vw;
  --radius-none: 0;
  --radius-m: var(--radius);
  --border-size: 1px;
  --border-width: 1px;
  --border-style: solid;
  --border-color-dark: color-mix(in oklch, var(--black) 20%, transparent);
  --border-color-light: color-mix(in oklch, var(--white) 20%, transparent);
  --border: var(--border-size) var(--border-style) var(--border-color-dark);
  --border-light: var(--border-size) var(--border-style) var(--border-color-light);
  --border-dark: var(--border-size) var(--border-style) var(--border-color-dark);
  --radius-s: 0.25rem;
  --radius-l: 1rem;
}

/* ==== 14-dividers.css ==== */
/* 14-dividers -- TOKEN SOURCE, hand-edited.
   ACSS module: dividers  (assets/scss/modules/dividers/)
   The name is the vendor's, not one we invented, so it can be looked up.
   build-base-css.ps1 merges every file in this folder in name order.
   A token may be declared in :root in ONE file here -- the build fails on a second.
   HOW THESE ARE USED -- a divider is a horizontal rule between content, and --divider is
   the composite: border-block-start: var(--divider) is the whole declaration.

   pick-the-polarity-to-match-the-surface:: --divider-dark on a light band, --divider-light
   on a dark one. Unlike text colour, this one does NOT flip automatically.

   the-divider-gap-follows-the-content-gap:: so a divider breathes like the content around it
   rather than carrying its own spacing decision.

   our-law:: @ctx:cockpit-format-rules-css-template@13 */

:root {
  --divider-size: 1px;
  --divider-style: solid;
  --divider-inline-size: 100%;
  --divider-gap: var(--content-gap);
  --divider-color-dark: color-mix(in srgb, var(--black) 20%, transparent);
  --divider-color-light: color-mix(in srgb, var(--white) 20%, transparent);
  --divider: var(--divider-size) var(--divider-style) var(--divider-color-dark);
  --divider-light: var(--divider-size) var(--divider-style) var(--divider-color-light);
  --divider-dark: var(--divider-size) var(--divider-style) var(--divider-color-dark);
}

/* ==== 15-shadows.css ==== */
/* 15-shadows -- TOKEN SOURCE, hand-edited.
   ACSS module: shadows  (assets/scss/modules/shadows/)
   The name is the vendor's, not one we invented, so it can be looked up.
   build-base-css.ps1 merges every file in this folder in name order.
   A token may be declared in :root in ONE file here -- the build fails on a second.
   HOW THESE ARE USED -- three levels, and three is the whole set. The ACSS source defines
   five slots and only these three emit, so --box-shadow-4 resolves to nothing and the
   element renders unshadowed without an error.

   box-shadow-vs-drop-shadow:: --box-shadow-* is the box-shadow property and follows the
   border box. --drop-shadow-* is a filter() value and follows the ALPHA SHAPE -- which is
   what a transparent PNG or an svg icon needs, since a box shadow would trace its rectangle.

   the-elevation-is-the-BLUR-not-the-offset:: 1 to 3 widen the blur at a fixed 0 0 origin,
   so they read as ambient lift rather than as a light source.

   our-law:: @ctx:cockpit-format-rules-css-template@13 */

:root {
  --box-shadow-1: 0 0 40px color-mix(in srgb, black 10%, transparent);
  --box-shadow-2: 0 0 60px color-mix(in srgb, black 20%, transparent);
  --box-shadow-3: 0 0 80px color-mix(in srgb, black 30%, transparent);
  --drop-shadow-1: drop-shadow(0 1px 2px color-mix(in srgb, black 15%, transparent));
  --drop-shadow-2: drop-shadow(0 4px 6px color-mix(in srgb, black 20%, transparent));
  --drop-shadow-3: drop-shadow(0 10px 15px color-mix(in srgb, black 25%, transparent));
}

/* ==== 16-transition.css ==== */
/* 16-transition -- TOKEN SOURCE, hand-edited.
   ACSS module: transition  (assets/scss/modules/transition/)
   The name is the vendor's, not one we invented, so it can be looked up.
   build-base-css.ps1 merges every file in this folder in name order.
   A token may be declared in :root in ONE file here -- the build fails on a second.
   HOW THESE ARE USED -- --transition is the composite (duration, timing, delay) so
   transition: var(--transition) is the normal form and every animation on the site shares
   one speed.

   the-named-eases-are-the-CHARACTER:: smooth is the neutral default, snappy decelerates
   hard for a UI response, gentle is symmetric for a slow reveal, bouncy overshoots and
   elastic settles through several passes. Pick by what the motion should FEEL like, then
   pair it with --transition-duration.

   name-the-properties-being-transitioned:: transition-property stays explicit -- transition
   on all animates layout properties too and turns a colour change into a repaint of the box.

   motion-is-a-preference:: anything beyond a colour or opacity change belongs inside a
   prefers-reduced-motion guard.

   our-law:: @ctx:cockpit-format-rules-css-template@13 */

:root {
  --transition-duration: 0.3s;
  --transition-timing: ease-in-out;
  --transition-delay: 0s;
  --transition: 0.3s ease-in-out 0s;
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-snappy: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-gentle: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-bouncy: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease-elastic: linear(0, 0.029 1.6%, 0.123 3.5%, 0.651 10.6%, 0.862 14.1%, 1.002 17.7%, 1.046 19.6%, 1.074 21.6%, 1.087 23.9%, 1.086 26.6%, 1.014 38.5%, 0.994 46.3%, 1);
}

/* ==== 17-blockquotes.css ==== */
/* 17-blockquotes -- TOKEN SOURCE, hand-edited.
   ACSS module: blockquotes  (assets/scss/modules/blockquotes/)
   The name is the vendor's, not one we invented, so it can be looked up.
   build-base-css.ps1 merges every file in this folder in name order.
   A token may be declared in :root in ONE file here -- the build fails on a second.
   HOW THESE ARE USED -- a quotation is a blockquote with a footer and a cite inside it,
   and the three token groups here match those three parts. Restyle by overriding the group,
   not by selecting the elements.

   --blockquote-border-width-is-a-FOUR-SIDED-value:: 0 0 0 3px is the left accent bar. Swap
   the position rather than adding a pseudo-element to draw a line.

   inherit-is-a-deliberate-default:: --blockquote-text-color and the cite colours inherit so
   a quote inside a .bg--{role} section follows the contextual flip instead of fighting it.

   the-source-belongs-in-the-markup:: cite inside a footer, not a styled span -- see
   @ctx:cockpit-format-rules-html-markup@7 [#text-level-semantics]

   our-law:: @ctx:cockpit-format-rules-css-template@13 -- see [#component-tokens] */

:root {
  --blockquote-spacing: var(--paragraph-spacing);
  --blockquote-padding: var(--space-m);
  --blockquote-gap: 1em;
  --blockquote-border-width: 0 0 0 3px;
  --blockquote-border-style: solid;
  --blockquote-border-color: var(--primary);
  --blockquote-border-radius: var(--radius);
  --blockquote-background: transparent;
  --blockquote-box-shadow: none;
  --blockquote-text-color: inherit;
  --blockquote-text-font-family: inherit;
  --blockquote-text-font-style: normal;
  --blockquote-text-font-size: var(--h2);
  --blockquote-text-font-weight: normal;
  --blockquote-text-line-height: 1.25;
  --blockquote-text-text-align: left;
  --blockquote-text-text-transform: none;
  --blockquote-footer-padding: 0;
  --blockquote-footer-margin-block: 1em 0;
  --blockquote-footer-font-family: inherit;
  --blockquote-footer-font-size: var(--text-s);
  --blockquote-footer-font-weight: normal;
  --blockquote-footer-font-style: normal;
  --blockquote-footer-line-height: 1.5;
  --blockquote-footer-text-transform: uppercase;
  --blockquote-footer-color: currentColor;
  --blockquote-cite-font-family: inherit;
  --blockquote-cite-font-size: inherit;
  --blockquote-cite-font-weight: inherit;
  --blockquote-cite-font-style: inherit;
  --blockquote-cite-line-height: inherit;
  --blockquote-cite-text-transform: inherit;
  --blockquote-cite-color: currentColor;
}

/* ==== 18-lists.css ==== */
/* 18-lists -- TOKEN SOURCE, hand-edited.
   ACSS module: lists  (assets/scss/modules/lists/)
   The name is the vendor's, not one we invented, so it can be looked up.
   build-base-css.ps1 merges every file in this folder in name order.
   A token may be declared in :root in ONE file here -- the build fails on a second.
   HOW THESE ARE USED -- the defaults for a real ul/ol in prose: the indent, the space
   between items, and the tighter indent for a nested level.

   this-is-for-CONTENT-lists-not-layout:: a card grid is a list in the markup but takes its
   spacing from --grid-gap, and .basic-list strips these defaults for a list that is
   structural rather than prose.

   the-em-units-are-deliberate:: indent and item spacing scale with the list font size, so a
   smaller list stays proportionate instead of keeping a fixed gap.

   whether-something-IS-a-list:: decided in the markup, not here -- see
   @ctx:cockpit-format-rules-html-markup@7 [#lists]

   our-law:: @ctx:cockpit-format-rules-css-template@13 */

:root {
  --list-spacing: var(--paragraph-spacing);
  --list-indent-spacing: 2em;
  --list-item-spacing: 0.5em;
  --nested-list-indent-spacing: 1em;
}

/* ==== 19-is-bg.css ==== */
/* 19-is-bg -- TOKEN SOURCE, hand-edited.
   ACSS module: is-bg  (assets/scss/modules/is-bg/)
   The name is the vendor's, not one we invented, so it can be looked up.
   build-base-css.ps1 merges every file in this folder in name order.
   A token may be declared in :root in ONE file here -- the build fails on a second.
   THIS IS THE CONTROL PANEL FOR THE CONTEXTUAL FLIP. Four contexts (ultra-light, light,
   dark, ultra-dark) x five elements (text, heading, button, icon, and the link values where
   a project sets them). When a section carries .bg--dark, the rules in
   base-classes\29-section-styles.css read --bg-dark-text and --bg-dark-heading from here.

   SO THIS IS WHERE YOU CHANGE WHAT A DARK SECTION LOOKS LIKE -- not by writing a colour
   inside the section. Change --bg-dark-text once and every dark band on the site follows.
   Write it into one component instead and that component alone stops answering its class.

   --bg-*-button-and---bg-*-icon-are-ROLE-NAMES-not-colours:: primary / light / dark are
   read as names by the button and icon rules -- putting a var() or a hex here does nothing
   and reports no error.

   the-pairing-is-the-point:: light contexts take --text-dark and dark contexts take
   --text-light. Breaking that pairing is not a style choice, it is unreadable text.

   the-flip-can-be-switched-off:: it is driven by option-relate-bg-text.

   the-tokens-it-reads:: base-tokens\02-contextual-colors.css
   the-rules-that-read-it:: base-classes\29-section-styles.css
   the-framework-behaviour:: @ctx:atlas-wordpress-plugins-automaticcss-utilities@3 -- see
   [#color--contextual-auto-flip]
   our-law:: @ctx:cockpit-format-rules-css-template@13 -- see
   [#the-background-class-carries-the-text-colours-with-it] */

:root {
  --bg-ultra-light-text: var(--text-dark);
  --bg-light-text: var(--text-dark);
  --bg-dark-text: var(--text-light);
  --bg-ultra-dark-text: var(--text-light);
  --bg-ultra-light-heading: var(--text-dark);
  --bg-light-heading: var(--text-dark);
  --bg-dark-heading: var(--text-light);
  --bg-ultra-dark-heading: var(--text-light);
  --bg-ultra-light-button: primary;
  --bg-light-button: primary;
  --bg-dark-button: primary;
  --bg-ultra-dark-button: primary;
  --bg-ultra-light-icon: light;
  --bg-light-icon: light;
  --bg-dark-icon: dark;
  --bg-ultra-dark-icon: dark;
}

/* ==== 20-focus.css ==== */
/* 20-focus -- TOKEN SOURCE, hand-edited.
   ACSS module: focus  (assets/scss/modules/focus/)
   The name is the vendor's, not one we invented, so it can be looked up.
   build-base-css.ps1 merges every file in this folder in name order.
   A token may be declared in :root in ONE file here -- the build fails on a second.
   HOW THESE ARE USED -- the keyboard focus ring, drawn by base-classes\28-focus-styles.css.
   Every interactive element shares it, so it is set once here and not per component.

   NEVER-set-outline-none:: removing the ring makes the site unusable by keyboard and is a
   WCAG failure. A focus style that does not suit a component is RESTYLED -- override
   --focus-color on that block -- never removed.

   the-offset-is-what-keeps-it-visible:: the gap between element and ring, so the ring
   does not disappear into a border of the same colour.

   on-a-dark-surface:: --focus-color is per-context via --bg-{context}-focus-color rather
   than overridden locally -- see base-tokens\19-is-bg.css.

   our-law:: @ctx:cockpit-format-rules-css-template@13 */

:root {
  --focus-color: var(--primary);
  --focus-width: 2px;
  --focus-offset: 2px;
}

/* ==== 21-header-height.css ==== */
/* 21-header-height -- TOKEN SOURCE, hand-edited.
   ACSS module: header-height  (assets/scss/modules/header-height/)
   The name is the vendor's, not one we invented, so it can be looked up.
   build-base-css.ps1 merges every file in this folder in name order.
   A token may be declared in :root in ONE file here -- the build fails on a second.
   HOW THESE ARE USED -- --offset is the sum a page needs when scrolling to an anchor: the
   sticky header plus any extra scroll margin. Use it for scroll-margin-block-start so a
   linked heading does not land underneath a fixed header.

   set---header-height-when-the-header-is-STICKY:: the 0rem default is correct for a header
   that scrolls away. A sticky header that leaves this at 0 hides every anchor target it
   overlaps, and nothing reports it.

   --admin-bar-height-is-WordPress-only:: it reads a WP variable with a 0px fallback, so it
   costs nothing on a static export and is correct in the builder.

   our-law:: @ctx:cockpit-format-rules-css-template@13 */

:root {
  --header-height: clamp(0rem, calc(0vw + 0rem), 0rem);
  --admin-bar-height: var(--wp-admin--admin-bar--height, 0px);
  --scroll-margin: clamp(0rem, calc(0vw + 0rem), 0rem);
  --offset: calc(var(--scroll-margin) + var(--header-height));
}

/* ==== 22-position.css ==== */
/* 22-position -- TOKEN SOURCE, hand-edited.
   ACSS module: position  (assets/scss/modules/position/)
   The name is the vendor's, not one we invented, so it can be looked up.
   build-base-css.ps1 merges every file in this folder in name order.
   A token may be declared in :root in ONE file here -- the build fails on a second.
   HOW THESE ARE USED -- --sticky-offset is where a sticky element comes to rest:
   inset-block-start: var(--sticky-offset). It resolves to the header height when there is
   one, and falls back to --sticky-offset-custom otherwise.

   sticky-needs-a-SCROLLING-ANCESTOR:: position sticky does nothing inside a parent with
   overflow hidden or a fixed height -- and it fails silently, which is why a sticky element
   that will not stick is nearly always the ancestor rather than this value.

   our-law:: @ctx:cockpit-format-rules-css-template@13 */

:root {
  --sticky-offset-custom: 60px;
  --sticky-offset: var(--header-height, var(--sticky-offset-custom, 0));
}

/* ==== 23-color-scheme.css ==== */
/* 23-color-scheme -- TOKEN SOURCE, hand-edited.
   ACSS module: color-scheme  (assets/scss/modules/color-scheme/)
   The name is the vendor's, not one we invented, so it can be looked up.

   Not a custom property -- a plain declaration, which is why the regroup that
   only moved --tokens dropped it. Nothing but the merge diff caught that.
   build-base-css.ps1 merges every file in this folder in name order.

   HOW THIS IS USED -- it decides which half of every light-dark() pair in the palette
   renders. "light only" means the light value always wins and the dark half sits unused.

   this-is-the-SWITCH-for-dark-mode:: change it to "light dark" and the whole site follows
   the visitor's OS preference -- because every colour in base-tokens\01-palette.css is
   already a light-dark() pair. That is why the pair shape is kept even when a project has
   no dark mode: turning it on later is one word here rather than a re-colour.

   which-is-why-a-single-value-in-the-palette-is-a-defect:: it renders identically today and
   silently breaks the day this line changes.

   our-law:: @ctx:cockpit-format-rules-css-template@13 -- see [#colour] */

:root {
  color-scheme: light only;
}