/* GENERATED by scripts/site-build/site-css.mjs from astro/src/data/tokens.css.
* Do not edit this copy — edit the source and run `npm run site:css`.
* `npm run site:css:check` (gate 6 in scripts/site-build/verify.mjs) fails
* the build if these two ever disagree. */
/* ===========================================================================
* tokens.css — the single design-token source (plan §7 Phase 5)
* ===========================================================================
*
* AUTHORED HERE. `npm run site:css` copies this file to
* astro/public/css/tokens.css, which is what ships as /css/tokens.css.
* Never edit the copy — `site:css --check` (gate 6 in verify.mjs) fails the
* build when the two drift apart.
*
* ---------------------------------------------------------------------------
* TWO RULES THAT MAKE THIS FILE SAFE TO SHIP ON EVERY PAGE
* ---------------------------------------------------------------------------
*
* 1. IT IS PURELY ADDITIVE. Every declaration below is a custom property on
* :root. There is not one selector that sets a real CSS property, so
* linking this file cannot change a single rendered pixel on any page that
* does not reference a token by name. That is the whole reason it can be
* added site-wide in the same change as everything else in Phase 5: the
* only delta it produces is one extra in the head, and the parity
* allowlist pins exactly that.
*
* 2. EVERY TOKEN IS PREFIXED `--az-`. The tree already has three unprefixed
* variable namespaces that DO NOT AGREE with each other:
*
* /css/site.css :root --background, --accent, --radius, …
* shadcn/Tailwind HSL *triplets*
* (`--accent: 267 52% 59%`, consumed as
* `hsl(var(--accent))`)
* the article pages :root --snow, --onyx, --gold, --blue, --accent, …
* full rgb()/hsl() colours. Note `--accent`
* collides with site.css's triplet and, being
* later in the document, wins — which is why
* `hsl(var(--accent))` is already broken on the
* eight article pages today. Pre-existing; not
* touched here, and precisely the trap the
* prefix avoids.
* the funnel :root --snow, --onyx, --pink, --r-card, …
* (01 Web Funnel/public/css/paywall.css — a
* separate project, never loaded with this file)
*
* An unprefixed `--onyx` here would be a fourth definition racing the other
* three by document order. `--az-*` cannot collide with any of them.
*
* ---------------------------------------------------------------------------
* DRIFT RESOLUTIONS (plan §7 Phase 5: "recording each drift resolution")
* ---------------------------------------------------------------------------
* Each one is recorded at its token below, next to the value that won.
* =========================================================================== */
:root {
/* --- brand palette -------------------------------------------------------
* Source of truth: tailwind.config.ts `theme.extend.colors`, which is what
* compiled /css/site.css (frozen) was generated from. The article pages'
* inline rgb() forms are the same colours written differently:
* rgb(26,26,26) === #1A1A1A rgb(250,250,250) === #FAFAFA
* rgb(74,74,74) === #4A4A4A rgb(255,217,101) === #FFD965
* rgb(30,60,136) === #1E3C88
* so there is no drift to resolve on any of these — only two spellings.
*/
--az-onyx: #1a1a1a;
--az-onyx-soft: #4a4a4a;
--az-snow: #fafafa;
--az-white: #ffffff;
--az-blue: #1e3c88;
--az-blue-soft: #a2c5ff;
--az-blue-wash: #eaf1ff;
--az-blue-deep: #16306e;
--az-gold: #ffd965;
--az-acai: #8c60cd;
/* DRIFT — `pink` names two different colours in this repo.
*
* brand pink #E0568B tailwind.config.ts `colors.pink.DEFAULT`
* funnel --pink #6B1A3D 01 Web Funnel/public/css/paywall.css :root,
* which is in fact the brand's `acai.deep`
* wearing the name `pink`.
*
* RESOLUTION: the brand value wins the token name here. The funnel's
* `--pink` is DELIBERATELY LEFT ALONE — plan §6.1/§7 keep the funnel a
* byte-for-byte passthrough in every phase, and paywall.css carries a
* cross-reference comment pointing back at this block. Renaming it there
* would be a funnel edit inside an unrelated change, which is the one thing
* docs/WORKING_ON_THIS_SITE.md §5.5 forbids outright.
*/
--az-pink: #e0568b;
--az-pink-deep: #b83c6e;
/* the funnel's colour, recorded under its real brand name so nobody has to
* rediscover that `--pink: #6B1A3D` was never pink: */
--az-acai-deep: #6b1a3d;
/* --- type ----------------------------------------------------------------
* Exactly the stacks in tailwind.config.ts `fontFamily`, which is what
* `.font-sans` / `.font-display` in the frozen site.css compiled to, and
* what the article pages' inline `body` / `.display` rules already spell
* out by hand.
*/
--az-font-sans: "TikTok Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
--az-font-display: "TikTok Sans Condensed", "TikTok Sans", system-ui, sans-serif;
/* DRIFT — the display line-height is 0.98 in one place and 1.04 in another.
*
* /css/site.css .font-display { line-height: .98 } (17 SSG pages + 404)
* article pages .display { line-height: 1.04 } (8 article pages)
*
* RESOLUTION: 0.98 — the site.css value, per the Phase-5 brief. site.css is
* frozen compiled output that cannot be regenerated without reintroducing a
* Tailwind build, so it is the value that cannot move; and it is the one on
* the higher-traffic half of the site.
*
* NOTE THIS TOKEN IS NOT APPLIED ANYWHERE YET. Article `.display` keeps
* 1.04 in articles.css, byte-for-byte as extracted. Changing 8 indexed pages'
* heading metrics is a visual change, and the Phase-5 approved-delta list
* does not include it. The token records the DECISION so the next person
* restyling a heading picks 0.98 instead of re-litigating it.
*/
--az-display-leading: 0.98;
--az-display-tracking: -0.01em;
/* --- radii ---------------------------------------------------------------
* tailwind.config.ts `borderRadius` + the funnel's --r-card/--r-btn, which
* agree: card 20px, pill 26.5px. `--radius: 1rem` in site.css :root is
* shadcn's own scale and stays where it is.
*/
--az-radius-card: 20px;
--az-radius-pill: 26.5px;
--az-radius-lg: 1rem;
/* --- hard-offset shadows -------------------------------------------------
* The "no blur, solid offset" shadow is the signature of this design system.
* From tailwind.config.ts `boxShadow` plus the two literal arbitrary values
* the markup uses (`shadow-[0_4px_0_#000]` on every CTA button).
*/
--az-shadow-hard: 0 4px 0 #1a1a1a;
--az-shadow-hard-black: 0 4px 0 #000;
--az-shadow-card: 6px 6px 0 rgba(26, 26, 26, 0.08);
--az-shadow-card-lg: 10px 10px 0 rgba(26, 26, 26, 0.1);
/* DRIFT — the gold button's shadow colour.
*
* article pages .btn.gold { box-shadow: 0 4px 0 #b8912f }
* tailwind colors.gold.deep = #C9A93A
*
* RESOLUTION: #C9A93A, the Tailwind value, per the Phase-5 brief — it is the
* one that is part of the declared palette rather than a one-off literal
* that exists only inside eight copy-pasted