/* ==========================================================================
   Al-Azhar Academy — theme.css
   Design tokens ONLY. Loaded before every other stylesheet.

   Hallmark · genre: playful · macrostructure: Long Document · theme: custom
   · enrichment: none (typography + rules) · nav: N1b (preserved)
   · footer: Ft3 (preserved)

   Look & feel: "paintbox on bright paper". A warm cream paper, a hand-made
   type system — script headings, a rounded sub-heading face, a storybook serif
   for reading — and six friendly hue families (sun, rose, leaf, sky, plum,
   berry) that rotate across a page. Surfaces are FLAT: one hairline border and
   one hairline rule carry every edge, so nothing floats, glows or frosted.

   There is exactly ONE theme. Dark mode is deliberately not supported:
   `color-scheme: light` is pinned so form controls and scrollbars cannot flip,
   and no component contains a single theme-specific rule. The tone system
   below is *section colour*, not a light/dark switch.
   ========================================================================== */

:root {
	color-scheme: light;

	/* ---- Palette: accent (blue — the brand) ----------------------------- */
	--accent-050: #eef4ff;
	--accent-100: #dee9ff;
	--accent-200: #bdd2ff;
	--accent-300: #90b3ff;
	--accent-500: #2f79ff;
	--accent-600: #0f62fe;
	--accent-700: #0b46c2;
	--accent-wash: rgba(15, 98, 254, 0.1);

	/* ---- Palette: warm highlight (decorative only) ---------------------- */
	--sun-100: #fff5e2;
	--sun-300: #ffd18b;
	--sun-500: #f2a33c;
	--sun-700: #9a5b05;

	/* ---- Palette: the joy set ------------------------------------------- */
	/* Six hues in four steps each.
	     ink   — text and rules; AA on paper and on the matching soft tint
	     soft  — the band / chip tint
	     edge  — the hairline border that pairs with the tint
	     fill  — the saturated colour for solid shapes (dots, ticks, bars) */
	--joy-sun-ink: #96590a; --joy-sun-soft: #fff4e0; --joy-sun-edge: #f6d9a5; --joy-sun-fill: #ee9714;
	--joy-rose-ink: #b01f57; --joy-rose-soft: #ffe9f1; --joy-rose-edge: #f9c6da; --joy-rose-fill: #ea4a80;
	--joy-leaf-ink: #0d6b46; --joy-leaf-soft: #e2f7ec; --joy-leaf-edge: #b4e5cd; --joy-leaf-fill: #14a06c;
	--joy-sky-ink: #0a5c88; --joy-sky-soft: #e2f4fd; --joy-sky-edge: #b2e0f6; --joy-sky-fill: #1096d1;
	--joy-plum-ink: #6234c8; --joy-plum-soft: #ede7fe; --joy-plum-edge: #d3c2fb; --joy-plum-fill: #7c4ddb;
	--joy-berry-ink: #981d8d; --joy-berry-soft: #fbe5f8; --joy-berry-edge: #efc0e9; --joy-berry-fill: #b93aa8;

	/* ---- Palette: warm neutrals (they sit on cream, so they lean warm) -- */
	--ink-050: #fdf9f2;
	--ink-100: #f6efe2;
	--ink-200: #e8ddc9;
	--ink-300: #d4c4a9;
	--ink-400: #ae9c81;
	--ink-500: #8a7a5f;
	--ink-600: #6a5b46;
	--ink-700: #4b4032;
	--ink-800: #33291f;
	--ink-900: #221b13;
	--white: #ffffff;

	/* ---- Semantic surfaces & text -------------------------------------- */
	--bg: var(--ink-050);
	--surface: var(--white);
	--surface-muted: var(--ink-100);
	--surface-sunken: var(--ink-050);
	/* The deep end of the page is a deeper sheet of the same warm paper,
	   never a dark surface: the footer and the closing band are read with the
	   normal ink ramp, not with inverted text. */
	--surface-inverse: var(--ink-100);
	--border: var(--ink-200);
	--border-strong: var(--ink-300);
	--text: var(--ink-900);
	--text-muted: var(--ink-600);
	--text-subtle: var(--ink-500);
	/* The same ink ramp, for anything that sits on the deeper paper. */
	--text-inverse: var(--ink-900);
	--text-inverse-muted: var(--ink-600);
	/* The veil behind the mobile navigation sheet. */
	--scrim: rgba(34, 27, 19, 0.46);
	/* Hairline dividers that sit on the deep-paper surfaces. */
	--border-inverse: rgba(34, 27, 19, 0.14);

	/* ---- Frosted header --------------------------------------------------
	   The sticky header is the one transparent surface on the site: a
	   translucent wash of the paper colour with a blur behind it, so the page
	   keeps its colour and its type moving underneath instead of being cut off
	   by a solid bar. The literals are `--bg` (#fdf9f2) at two alphas —
	   spelled out rather than mixed, so a browser without `color-mix()` still
	   gets a working fill.
	     --header-bg         at the top of the page: thin glass, so the hero's
	                         colour reads straight through
	     --header-bg-strong  once scrolled: firm glass. It has to stay legible
	                         with the deep footer or the closing band passing
	                         underneath it, which is the darkest thing that can
	                         end up behind this bar: at 0.62 the wash is firm
	                         enough for --text-muted body links to stay legible
	     --header-bg-solid   the opaque fallback, for a browser that cannot
	                         blur and for the reduced-transparency and
	                         high-contrast escape hatches in base.css.
	   The glass is painted by `.site-header::before`, never by the header
	   element itself: anything with `backdrop-filter` becomes the containing
	   block for its fixed descendants, and the mobile navigation sheet is
	   exactly that. See base.css. */
	--header-bg: rgba(253, 249, 242, 0.34);
	--header-bg-strong: rgba(253, 249, 242, 0.62);
	--header-bg-solid: var(--bg);
	--header-blur: 22px;
	--header-saturate: 1.8;
	--header-border: rgba(34, 27, 19, 0.1);

	/* ---- Section tone --------------------------------------------------
	   Every coloured element on the site reads one of these four names.
	   They default to the brand blue, and a `.t-*` class (or the section
	   rotation further down) re-points all four at once — so a card, a stat,
	   a timeline dot and a button inside the same section always agree. */
	--tone: var(--accent-700);
	--tone-soft: var(--accent-050);
	--tone-edge: var(--accent-200);
	--tone-fill: var(--accent-600);

	/* ---- Band dissolves --------------------------------------------------
	   A coloured band never meets the paper on a hard line. These are the
	   share of a band's own height that the tint takes to arrive at each edge,
	   so a section and a short strip ease in at the same rate and neither can
	   ever over-run its own middle. Plain percentages, on purpose: if a
	   browser cannot parse one, the band simply loses its fill rather than
	   losing the whole rule. */
	--band-fade: 7%;
	--band-fade-strip: 22%;

	/* ---- Ambient page wash (decorative) --------------------------------- */
	--wash-hero: radial-gradient(70% 60% at 8% 0%, rgba(124, 77, 219, 0.16) 0%, rgba(124, 77, 219, 0) 62%),
		radial-gradient(60% 55% at 96% 4%, rgba(238, 151, 20, 0.18) 0%, rgba(238, 151, 20, 0) 62%),
		radial-gradient(70% 60% at 70% 100%, rgba(20, 160, 108, 0.14) 0%, rgba(20, 160, 108, 0) 66%);

	/* The wash dissolves before it reaches the bottom of the band it sits in,
	   so the colour the next section meets is the paper colour and never a
	   half-strength tint that stops on a line. The top stays solid, so there
	   is still colour behind the header. */
	--wash-dissolve: linear-gradient(to bottom, rgb(0 0 0 / 1) 0%, rgb(0 0 0 / 1) 52%, rgb(0 0 0 / 0) 100%);

	/* ---- Status --------------------------------------------------------- */
	--success: var(--joy-leaf-ink);
	--success-bg: var(--joy-leaf-soft);
	--warning: var(--joy-sun-ink);
	--warning-bg: var(--joy-sun-soft);
	--danger: #b3261e;
	--danger-bg: #fcedec;

	/* ---- Focus ring (never animated away) ------------------------------- */
	--focus-ring: 0 0 0 2px var(--white), 0 0 0 4px var(--accent-600);
	--focus-ring-inverse: 0 0 0 2px var(--surface-inverse), 0 0 0 4px var(--joy-plum-fill);

	/* ---- Typography families -------------------------------------------
	   One job each, no overlap:
	     display  h1 and h2                    (Story Script)
	     heading  h3, h4, card titles, buttons,
	              the wordmark                (DynaPuff)
	     sans     body copy, everything long   (Benne)
	     label    eyebrows, tracked caps, the
	              navigation and the header tag (Original Surfer)
	     script   footer headings only         (Yellowtail)
	   The wordmark and the navigation sit on the rounded and the marker faces
	   — the childish end of the five (see the header block at the foot of this
	   file). Every stack ends in a generic family, so a face that never
	   arrives still reads. */
	--font-display: 'Story Script', 'Yellowtail', 'Segoe Script', ui-serif, Georgia, cursive;
	--font-heading: 'DynaPuff', 'Trebuchet MS', ui-rounded, 'Segoe UI', system-ui, sans-serif;
	--font-sans: 'Benne', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
	--font-label: 'Original Surfer', 'Trebuchet MS', ui-rounded, 'Segoe UI', system-ui, sans-serif;
	--font-script: 'Yellowtail', 'Story Script', 'Segoe Script', cursive;

	/* ---- Fluid type scale ---------------------------------------------- */
	--fs-100: 0.75rem; /* 12 — tracked labels */
	--fs-200: 0.8125rem; /* 13 */
	--fs-300: 0.875rem; /* 14 — small print */
	--fs-400: 1rem; /* 16 — body */
	--fs-450: 1.0625rem; /* 17 — lede */
	--fs-500: 1.1875rem; /* 19 — card titles */
	--fs-600: 1.375rem; /* 22 — sub headings */
	--fs-700: clamp(1.4rem, 1.2rem + 0.9vw, 1.75rem); /* h3 */
	--fs-800: clamp(1.65rem, 1.3rem + 1.5vw, 2.2rem); /* h2 */
	--fs-900: clamp(2rem, 1.45rem + 2.4vw, 3.1rem); /* h1 */

	/* Script and rounded faces need more air than a neutral sans. */
	--lh-tight: 1.2;
	--lh-snug: 1.35;
	--lh-normal: 1.6;
	--lh-relaxed: 1.75;

	--tracking-label: 0.14em;
	--tracking-tight: 0.005em;
	--tracking-heading: 0.005em;
	--measure: 64ch;
	--measure-narrow: 50ch;

	/* ---- Spacing scale (4px base) -------------------------------------- */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.25rem;
	--space-6: 1.5rem;
	--space-8: 2rem;
	--space-10: 2.5rem;
	--space-12: 3rem;
	--space-16: 4rem;
	--space-20: 5rem;
	--space-24: 6rem;

	/* ---- Radii ----------------------------------------------------------
	   Flat paper, small corners. Nothing on this site is a floating widget,
	   so no surface needs a 26px pill of a corner. */
	--radius-xs: 6px;
	--radius-sm: 10px;
	--radius-md: 14px;
	--radius-lg: 18px;
	--radius-xl: 24px;
	--radius-2xl: 32px;
	--radius-pill: 999px;

	/* ---- Depth ----------------------------------------------------------
	   There is none. Edges are hairlines and tone rules; nothing floats,
	   so nothing needs a shadow to explain it. The names survive so no
	   component can accidentally reintroduce one. */
	--shadow-xs: none;
	--shadow-sm: none;
	--shadow-md: none;
	--shadow-lg: none;
	--shadow-xl: none;
	--shadow-accent: none;
	--shadow-accent-lg: none;
	--shadow-inset-top: none;
	--shadow-fab: none;

	/* ---- The joy stripe -------------------------------------------------
	   The one deliberate multi-hue moment: under the header, above the
	   footer, and on the closing band's top edge. */
	--joy-stripe: linear-gradient(
		90deg,
		var(--joy-sun-fill) 0%,
		var(--joy-rose-fill) 20%,
		var(--joy-plum-fill) 40%,
		var(--joy-sky-fill) 60%,
		var(--joy-leaf-fill) 80%,
		var(--joy-berry-fill) 100%
	);
	/* The stripe's own vertical dissolve, used as a mask. A six-hue rule is a
	   colour collision by construction, so where it sits on paper or on a deep
	   surface it glows out of it rather than drawing two hard lines. The plate
	   in the middle keeps a few solid pixels, so it still reads as a painted
	   rule and not as a smudge. */
	--stripe-dissolve: linear-gradient(
		to bottom,
		rgb(0 0 0 / 0) 0%,
		rgb(0 0 0 / 1) 32%,
		rgb(0 0 0 / 1) 68%,
		rgb(0 0 0 / 0) 100%
	);

	/* How far the paper takes to darken into a deep surface — the closing band
	   and the footer. It is also the height of the two masked stripes, so a
	   stripe spans exactly the ramp it rides. Deep enough to read as a fade,
	   short enough that the surface still arrives before any content does. */
	--edge-ramp: 1.25rem;

	/* ---- Motion --------------------------------------------------------- */
	--ease: cubic-bezier(0.22, 0.9, 0.3, 1);
	--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
	--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
	--ease-back: cubic-bezier(0.16, 1, 0.3, 1);
	--dur-100: 100ms;
	--dur-150: 150ms;
	--dur-200: 200ms;
	--dur-300: 300ms;
	--dur-reveal: 400ms;
	--dur-spring: 460ms;
	--dur-flip: 720ms;
	--dur-ambient: 20s; /* slow gradient drift */
	--stagger-step: 50ms;

	/* ---- Layout --------------------------------------------------------- */
	--container: 1200px;
	--container-narrow: 760px;
	--gutter: clamp(1.25rem, 4vw, 2.5rem);
	--header-h: 4.5rem;
	--section-y: clamp(3.5rem, 7vw, 6rem);
	--tap-target: 44px;

	/* ---- Layers --------------------------------------------------------- */
	--z-header: 100;
	--z-backdrop: 80;
	--z-nav: 90;
	--z-fab: 70;
	--z-toast: 120;
	--z-skip: 200;
}

/* ==========================================================================
   Section tones
   The site's colour system, and the direct replacement for the old light/dark
   switch. A tone class re-points the four `--tone-*` names for everything
   inside it: cards, stat chips, timeline dots, rules, figures and the primary
   button all take the section's colour without a single component rule.

   Six hues, used in rotation down a page so the site reads colourful and
   joyful, not branded.
   ========================================================================== */
.t-sun {
	--tone: var(--joy-sun-ink);
	--tone-soft: var(--joy-sun-soft);
	--tone-edge: var(--joy-sun-edge);
	--tone-fill: var(--joy-sun-fill);
}

.t-rose {
	--tone: var(--joy-rose-ink);
	--tone-soft: var(--joy-rose-soft);
	--tone-edge: var(--joy-rose-edge);
	--tone-fill: var(--joy-rose-fill);
}

.t-leaf {
	--tone: var(--joy-leaf-ink);
	--tone-soft: var(--joy-leaf-soft);
	--tone-edge: var(--joy-leaf-edge);
	--tone-fill: var(--joy-leaf-fill);
}

.t-sky {
	--tone: var(--joy-sky-ink);
	--tone-soft: var(--joy-sky-soft);
	--tone-edge: var(--joy-sky-edge);
	--tone-fill: var(--joy-sky-fill);
}

.t-plum {
	--tone: var(--joy-plum-ink);
	--tone-soft: var(--joy-plum-soft);
	--tone-edge: var(--joy-plum-edge);
	--tone-fill: var(--joy-plum-fill);
}

.t-berry {
	--tone: var(--joy-berry-ink);
	--tone-soft: var(--joy-berry-soft);
	--tone-edge: var(--joy-berry-edge);
	--tone-fill: var(--joy-berry-fill);
}

/* ---- The page rhythm -------------------------------------------------
   Every `<section>` that sits directly inside `<main>` takes the next hue in
   the rotation, so all eleven pages are colourful without a class on each
   band. `:where()` keeps the specificity at 0 so an explicit `.t-*` class on
   the same element always wins. The rotation repeats every six sections. */
main > section:where(:nth-of-type(6n + 1)) {
	--tone: var(--joy-sun-ink);
	--tone-soft: var(--joy-sun-soft);
	--tone-edge: var(--joy-sun-edge);
	--tone-fill: var(--joy-sun-fill);
}

main > section:where(:nth-of-type(6n + 2)) {
	--tone: var(--joy-rose-ink);
	--tone-soft: var(--joy-rose-soft);
	--tone-edge: var(--joy-rose-edge);
	--tone-fill: var(--joy-rose-fill);
}

main > section:where(:nth-of-type(6n + 3)) {
	--tone: var(--joy-leaf-ink);
	--tone-soft: var(--joy-leaf-soft);
	--tone-edge: var(--joy-leaf-edge);
	--tone-fill: var(--joy-leaf-fill);
}

main > section:where(:nth-of-type(6n + 4)) {
	--tone: var(--joy-sky-ink);
	--tone-soft: var(--joy-sky-soft);
	--tone-edge: var(--joy-sky-edge);
	--tone-fill: var(--joy-sky-fill);
}

main > section:where(:nth-of-type(6n + 5)) {
	--tone: var(--joy-plum-ink);
	--tone-soft: var(--joy-plum-soft);
	--tone-edge: var(--joy-plum-edge);
	--tone-fill: var(--joy-plum-fill);
}

main > section:where(:nth-of-type(6n + 6)) {
	--tone: var(--joy-berry-ink);
	--tone-soft: var(--joy-berry-soft);
	--tone-edge: var(--joy-berry-edge);
	--tone-fill: var(--joy-berry-fill);
}

/* ---- Inside a grid ----------------------------------------------------
   Each item takes the next hue, so a row of cards or tiles reads as a paintbox
   rather than as six copies of one box. `:where()` again keeps the specificity
   at zero, so an explicit tone class on an item still wins. */
.grid > :where(:nth-child(6n + 1)),
.tl > :where(:nth-child(6n + 1)) {
	--tone: var(--joy-sun-ink);
	--tone-soft: var(--joy-sun-soft);
	--tone-edge: var(--joy-sun-edge);
	--tone-fill: var(--joy-sun-fill);
}

.grid > :where(:nth-child(6n + 2)),
.tl > :where(:nth-child(6n + 2)) {
	--tone: var(--joy-rose-ink);
	--tone-soft: var(--joy-rose-soft);
	--tone-edge: var(--joy-rose-edge);
	--tone-fill: var(--joy-rose-fill);
}

.grid > :where(:nth-child(6n + 3)),
.tl > :where(:nth-child(6n + 3)) {
	--tone: var(--joy-leaf-ink);
	--tone-soft: var(--joy-leaf-soft);
	--tone-edge: var(--joy-leaf-edge);
	--tone-fill: var(--joy-leaf-fill);
}

.grid > :where(:nth-child(6n + 4)),
.tl > :where(:nth-child(6n + 4)) {
	--tone: var(--joy-sky-ink);
	--tone-soft: var(--joy-sky-soft);
	--tone-edge: var(--joy-sky-edge);
	--tone-fill: var(--joy-sky-fill);
}

.grid > :where(:nth-child(6n + 5)),
.tl > :where(:nth-child(6n + 5)) {
	--tone: var(--joy-plum-ink);
	--tone-soft: var(--joy-plum-soft);
	--tone-edge: var(--joy-plum-edge);
	--tone-fill: var(--joy-plum-fill);
}

.grid > :where(:nth-child(6n + 6)),
.tl > :where(:nth-child(6n + 6)) {
	--tone: var(--joy-berry-ink);
	--tone-soft: var(--joy-berry-soft);
	--tone-edge: var(--joy-berry-edge);
	--tone-fill: var(--joy-berry-fill);
}

/* ---- Two short lists that take the same rotation -----------------------
   The mobile navigation sheet and the footer are lists of a handful of
   destinations, and they were the last two places on the site where a column
   of identical grey rows survived. Both read the six hues in the same order
   as a grid, so the sheet opens as a paintbox and the footer closes the page
   in four colours. Everything inside an item — the dot, the border, the label
   — takes its hue from the item it sits in. */
.nav__list > :where(:nth-child(6n + 1)),
.footer-grid > :where(:nth-child(6n + 1)) {
	--tone: var(--joy-sun-ink);
	--tone-soft: var(--joy-sun-soft);
	--tone-edge: var(--joy-sun-edge);
	--tone-fill: var(--joy-sun-fill);
}

.nav__list > :where(:nth-child(6n + 2)),
.footer-grid > :where(:nth-child(6n + 2)) {
	--tone: var(--joy-rose-ink);
	--tone-soft: var(--joy-rose-soft);
	--tone-edge: var(--joy-rose-edge);
	--tone-fill: var(--joy-rose-fill);
}

.nav__list > :where(:nth-child(6n + 3)),
.footer-grid > :where(:nth-child(6n + 3)) {
	--tone: var(--joy-leaf-ink);
	--tone-soft: var(--joy-leaf-soft);
	--tone-edge: var(--joy-leaf-edge);
	--tone-fill: var(--joy-leaf-fill);
}

.nav__list > :where(:nth-child(6n + 4)),
.footer-grid > :where(:nth-child(6n + 4)) {
	--tone: var(--joy-sky-ink);
	--tone-soft: var(--joy-sky-soft);
	--tone-edge: var(--joy-sky-edge);
	--tone-fill: var(--joy-sky-fill);
}

.nav__list > :where(:nth-child(6n + 5)) {
	--tone: var(--joy-plum-ink);
	--tone-soft: var(--joy-plum-soft);
	--tone-edge: var(--joy-plum-edge);
	--tone-fill: var(--joy-plum-fill);
}

.nav__list > :where(:nth-child(6n + 6)) {
	--tone: var(--joy-berry-ink);
	--tone-soft: var(--joy-berry-soft);
	--tone-edge: var(--joy-berry-edge);
	--tone-fill: var(--joy-berry-fill);
}

/* ==========================================================================
   Header chrome — the paintbox lid
   --------------------------------------------------------------------------
   The bar at the top of every page is the one strip of the site that shows the
   whole palette at once, and it is the *same* strip on all eleven pages: a
   destination's hue comes from the rotation above, never from the page you are
   on, so nothing shifts as a visitor moves around the site.

   Three parts:
     the wash    a faint pass of the same six hues over the glass, so the bar
                 reads as a colour and not as tinted grey
     the links   each destination keeps the hue the rotation dealt its list
                 item — the label, the pill that parks under it (main.js copies
                 the hue as it measures) and the marker on the current page all
                 read that one hue
     the actions the wordmark badge (plum → berry), the "School" tag (sky), the
                 menu button (berry) and the two buttons (plum fill, sun
                 outline) are named hues instead of the brand blue

   Button fills use the *ink* steps, never the saturated `--joy-*-fill` steps:
   ink is the step dark enough for white text at AA, while the fills are light
   and stay on dots, rules and the badge.
   ========================================================================== */
.site-header {
	/* The literals are the six `--joy-*-fill` values at 11%, spelled out
	   rather than mixed, so a browser without `color-mix()` still paints the
	   wash instead of dropping the whole declaration. */
	--header-wash: linear-gradient(
		90deg,
		rgb(238 151 20 / 0.11) 0%,
		rgb(234 74 128 / 0.11) 22%,
		rgb(124 77 219 / 0.11) 42%,
		rgb(16 150 209 / 0.11) 62%,
		rgb(20 160 108 / 0.11) 82%,
		rgb(185 58 168 / 0.11) 100%
	);
}

/* A two-hue badge behind the mortar board, echoing the two buttons beside it.
   The flat blue underneath it lives in base.css and is only ever a fallback. */
.brand__mark {
	background-image: linear-gradient(135deg, var(--joy-plum-fill) 0%, var(--joy-berry-fill) 100%);
}

/* The one word in the lockup that is allowed to be a colour word itself. The
   footer's copy of the lockup stays muted (see `.site-footer .brand__tag`). */
.site-header .brand__tag {
	color: var(--joy-sky-ink);
}

/* The menu button is the lid's handle: berry, because it is the same control
   the wordmark badge's second hue belongs to. */
.nav-toggle {
	--tone: var(--joy-berry-ink);
	--tone-soft: var(--joy-berry-soft);
	--tone-edge: var(--joy-berry-edge);
	--tone-fill: var(--joy-berry-ink);
}

/* The school-office line inside the sheet: leaf, so the phone number reads as a
   way in rather than as four lines of small print. */
.nav__meta {
	--tone: var(--joy-leaf-ink);
	--tone-soft: var(--joy-leaf-soft);
	--tone-edge: var(--joy-leaf-edge);
	--tone-fill: var(--joy-leaf-fill);
}

/* The primary action is plum and the quiet one is sun, wherever the header puts
   them: the desktop bar carries both inside the navigation, and a phone's bar
   carries the primary on its own (see the note in base.css). */
.nav__actions .btn--primary,
.site-header__actions .btn--primary {
	--tone: var(--joy-plum-ink);
	--tone-soft: var(--joy-plum-soft);
	--tone-edge: var(--joy-plum-edge);
	--tone-fill: var(--joy-plum-ink);
}

.nav__actions .btn--secondary {
	--tone: var(--joy-sun-ink);
	--tone-soft: var(--joy-sun-soft);
	--tone-edge: var(--joy-sun-edge);
	--tone-fill: var(--joy-sun-ink);
}