/* ==========================================================================
   Blue Iris K-2 theme - design tokens
   ==========================================================================

   STANDARD
   Follows the W3C Design Tokens Format Module 2025.10 (DTCG) type model:
   color, dimension (rem only), fontFamily, fontWeight, number, duration,
   cubicBezier, and the composites shadow / border / transition / typography.
   Names map 1:1 to a DTCG JSON path: --color-text-primary = color.text.primary

   ARCHITECTURE - three tiers, each only references the tier above it
     1. PRIMITIVE   raw values, named by what they ARE      --color-sky-300
     2. SEMANTIC    roles, named by what they're FOR        --color-text-primary
     3. COMPONENT   one component's decisions               --button-bg

   RULES
   - site.css uses SEMANTIC and COMPONENT tokens only, never primitives
     and never raw values. To restyle, change a token, not a component.
   - rem for every dimension. No px.
   - Mobile values are the defaults. Larger screens re-map semantic tokens in
     the RESPONSIVE MODES block at the bottom.

   BREAKPOINTS (CSS can't read variables inside @media; keep these in sync)
     sm 26.25rem (420)   md 45rem (720)   lg 64rem (1024)   xl 80rem (1280)
   Container queries in site.css size components by their .wrap width:
     30rem hero search + buttons in a row   40rem 3-col grids, excerpts
     48rem hero / feature split, 6 tiles in a row   60rem 4-col grids

   LOOK
   Bright classroom stickers on clean white paper: lots of white space, navy
   ink outlines with a hard offset shadow, iris blue for the brand, and one
   cheerful colour per season, subject and teaching need.

   TONES
   Every season, subject, grade and teaching need has a color tone, chosen
   per term in wp-admin. data-tone="<tone>" in the markup picks up its tint
   (light background) and fill (stronger accent).
   ========================================================================== */

:root {
  color-scheme: light;

  /* ========================================================================
     1. PRIMITIVE TOKENS
     ======================================================================== */

  /* ---- Color: paper (clean white, cool greys) -------------------------- */
  --color-paper-0: oklch(1 0 0);
  --color-paper-50: oklch(0.985 0.004 270);
  --color-paper-100: oklch(0.97 0.006 270);
  --color-paper-200: oklch(0.94 0.008 270);
  --color-paper-300: oklch(0.9 0.01 270);

  /* ---- Color: ink (deep navy) ------------------------------------------ */
  --color-ink-300: oklch(0.72 0.03 265);
  --color-ink-500: oklch(0.52 0.04 265);
  --color-ink-600: oklch(0.44 0.045 265);
  --color-ink-800: oklch(0.32 0.05 265);
  --color-ink-900: oklch(0.25 0.05 265);
  --color-ink-950: oklch(0.2 0.045 265);

  /* ---- Color: iris (brand) --------------------------------------------- */
  --color-iris-50: oklch(0.975 0.015 280);
  --color-iris-100: oklch(0.94 0.04 280);
  --color-iris-300: oklch(0.78 0.12 280);
  --color-iris-400: oklch(0.66 0.17 278);
  --color-iris-500: oklch(0.52 0.2 276);
  --color-iris-600: oklch(0.46 0.2 276);

  /* ---- Color: tones (100 tint, 300 fill, 400 bold) ---------------------- */
  --color-sky-100: oklch(0.95 0.04 235);
  --color-sky-300: oklch(0.83 0.12 235);
  --color-sky-400: oklch(0.74 0.15 235);
  --color-bubblegum-100: oklch(0.95 0.04 355);
  --color-bubblegum-300: oklch(0.83 0.13 355);
  --color-bubblegum-400: oklch(0.75 0.17 355);
  --color-tangerine-100: oklch(0.95 0.05 60);
  --color-tangerine-300: oklch(0.84 0.15 60);
  --color-tangerine-400: oklch(0.77 0.17 55);
  --color-lilac-100: oklch(0.95 0.035 300);
  --color-lilac-300: oklch(0.82 0.11 300);
  --color-lilac-400: oklch(0.73 0.14 300);
  --color-sunshine-100: oklch(0.97 0.06 95);
  --color-sunshine-300: oklch(0.91 0.17 95);
  --color-sunshine-400: oklch(0.87 0.18 90);
  --color-frog-100: oklch(0.95 0.05 145);
  --color-frog-300: oklch(0.85 0.16 145);
  --color-frog-400: oklch(0.75 0.18 145);
  --color-frog-600: oklch(0.58 0.15 148);
  --color-teal-100: oklch(0.95 0.04 190);
  --color-teal-300: oklch(0.84 0.11 190);
  --color-teal-400: oklch(0.76 0.13 190);
  --color-coral-100: oklch(0.95 0.04 25);
  --color-coral-300: oklch(0.8 0.14 25);
  --color-coral-400: oklch(0.71 0.17 25);

  /* ---- Color: alpha ---------------------------------------------------- */
  --color-ink-a10: oklch(0.25 0.05 265 / 0.1);
  --color-ink-a40: oklch(0.25 0.05 265 / 0.4);
  --color-paper-a90: oklch(1 0 0 / 0.9);
  --color-sunshine-a75: oklch(0.91 0.17 95 / 0.75);

  /* ---- Typography: families -------------------------------------------- */
  --font-family-fredoka: "Fredoka", ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif;
  --font-family-nunito: "Nunito", ui-rounded, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* ---- Typography: weights --------------------------------------------- */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* ---- Typography: size scale ------------------------------------------ */
  --font-size-2xs: 0.75rem;     /* 12 */
  --font-size-xs: 0.8125rem;    /* 13 */
  --font-size-sm: 0.9375rem;    /* 15 */
  --font-size-base: 1.0625rem;  /* 17 */
  --font-size-lg: 1.1875rem;    /* 19 */
  --font-size-xl: 1.375rem;     /* 22 */
  --font-size-2xl: 1.625rem;    /* 26 */
  --font-size-3xl: 2rem;        /* 32 */
  --font-size-4xl: 2.5rem;      /* 40 */
  --font-size-5xl: 3.25rem;     /* 52 */
  --font-size-6xl: 4.25rem;     /* 68 */

  /* ---- Typography: line heights ---------------------------------------- */
  --line-height-tight: 1.05;
  --line-height-snug: 1.2;
  --line-height-normal: 1.55;
  --line-height-relaxed: 1.65;

  /* ---- Typography: tracking -------------------------------------------- */
  --tracking-tight: -0.015em;
  --tracking-normal: 0em;
  --tracking-wide: 0.06em;

  /* ---- Dimension: spacing scale ---------------------------------------- */
  --space-0: 0rem;
  --space-0-5: 0.125rem;
  --space-1: 0.25rem;
  --space-1-5: 0.375rem;
  --space-2: 0.5rem;
  --space-2-5: 0.625rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-28: 7rem;

  /* ---- Dimension: stroke ----------------------------------------------- */
  --stroke-thin: 0.0625rem;
  --stroke-base: 0.125rem;
  --stroke-thick: 0.1875rem;

  /* ---- Dimension: radius ----------------------------------------------- */
  --radius-xs: 0.25rem;
  --radius-sm: 0.5rem;
  --radius-md: 0.875rem;
  --radius-lg: 1.25rem;
  --radius-xl: 1.75rem;
  --radius-2xl: 2.25rem;
  --radius-full: 999rem;

  /* ---- Shadow: hard offset "sticker" shadows ---------------------------- */
  --shadow-offset-sm: 0.125rem 0.125rem 0 var(--color-ink-900);
  --shadow-offset-md: 0.1875rem 0.1875rem 0 var(--color-ink-900);
  --shadow-offset-lg: 0.3125rem 0.3125rem 0 var(--color-ink-900);
  --shadow-soft: 0 0.75rem 2rem var(--color-ink-a10);

  /* ---- Motion ---------------------------------------------------------- */
  --duration-instant: 90ms;
  --duration-fast: 160ms;
  --duration-base: 240ms;
  --duration-slow: 600ms;
  --duration-float: 4s;
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);

  /* ========================================================================
     2. SEMANTIC TOKENS - roles, mapped from primitives
     ======================================================================== */

  /* ---- Surface --------------------------------------------------------- */
  --color-bg-canvas: var(--color-paper-0);
  --color-bg-surface: var(--color-paper-50);
  --color-bg-raised: var(--color-paper-0);
  --color-bg-inverse: var(--color-ink-900);
  --color-bg-sunny: var(--color-sunshine-100);
  --color-bg-brand-soft: var(--color-iris-50);
  --color-bg-brand-tint: var(--color-iris-100);

  /* ---- Text ------------------------------------------------------------ */
  --color-text-primary: var(--color-ink-900);
  --color-text-secondary: var(--color-ink-600);
  --color-text-tertiary: var(--color-ink-500);
  --color-text-inverse: var(--color-paper-0);
  --color-text-inverse-muted: var(--color-ink-300);
  --color-text-on-brand: var(--color-paper-0);
  --color-text-brand: var(--color-iris-600);

  /* ---- Line / outline -------------------------------------------------- */
  --color-line-ink: var(--color-ink-900);
  --color-line-subtle: var(--color-ink-a10);
  --color-line-inverse: var(--color-ink-600);

  /* ---- Accent ---------------------------------------------------------- */
  --color-accent-brand: var(--color-iris-500);
  --color-accent-brand-hover: var(--color-iris-600);
  --color-accent-brand-soft: var(--color-iris-300);
  --color-accent-highlight: var(--color-sunshine-300);
  --color-accent-blush: var(--color-bubblegum-300);
  --color-accent-leaf: var(--color-frog-400);
  --color-accent-leaf-deep: var(--color-frog-600);
  --color-accent-star: var(--color-sunshine-400);

  /* ---- Tones (per-term colors) ------------------------------------------ */
  --color-tone-sky-tint: var(--color-sky-100);
  --color-tone-sky-fill: var(--color-sky-300);
  --color-tone-bubblegum-tint: var(--color-bubblegum-100);
  --color-tone-bubblegum-fill: var(--color-bubblegum-300);
  --color-tone-tangerine-tint: var(--color-tangerine-100);
  --color-tone-tangerine-fill: var(--color-tangerine-300);
  --color-tone-lilac-tint: var(--color-lilac-100);
  --color-tone-lilac-fill: var(--color-lilac-300);
  --color-tone-sunshine-tint: var(--color-sunshine-100);
  --color-tone-sunshine-fill: var(--color-sunshine-300);
  --color-tone-frog-tint: var(--color-frog-100);
  --color-tone-frog-fill: var(--color-frog-300);
  --color-tone-teal-tint: var(--color-teal-100);
  --color-tone-teal-fill: var(--color-teal-300);
  --color-tone-coral-tint: var(--color-coral-100);
  --color-tone-coral-fill: var(--color-coral-300);

  /* ---- Type roles ------------------------------------------------------ */
  --font-family-display: var(--font-family-fredoka);
  --font-family-body: var(--font-family-nunito);

  --type-display-size: var(--font-size-4xl);
  --type-display-line-height: var(--line-height-tight);
  --type-display-weight: var(--font-weight-semibold);
  --type-display-tracking: var(--tracking-tight);

  --type-heading-2-size: var(--font-size-3xl);
  --type-heading-2-line-height: var(--line-height-snug);
  --type-heading-2-weight: var(--font-weight-semibold);
  --type-heading-2-tracking: var(--tracking-tight);

  --type-heading-3-size: var(--font-size-xl);
  --type-heading-3-line-height: var(--line-height-snug);
  --type-heading-3-weight: var(--font-weight-semibold);

  --type-title-sm-size: var(--font-size-base);
  --type-title-sm-line-height: var(--line-height-snug);
  --type-title-sm-weight: var(--font-weight-semibold);

  --type-lead-size: var(--font-size-lg);
  --type-lead-line-height: var(--line-height-normal);

  --type-body-size: var(--font-size-base);
  --type-body-line-height: var(--line-height-relaxed);
  --type-body-weight: var(--font-weight-regular);
  --type-body-sm-size: var(--font-size-sm);
  --type-caption-size: var(--font-size-xs);

  --type-label-size: var(--font-size-sm);
  --type-label-weight: var(--font-weight-semibold);
  --type-label-line-height: var(--line-height-snug);

  --type-eyebrow-size: var(--font-size-2xs);
  --type-eyebrow-weight: var(--font-weight-extrabold);
  --type-eyebrow-tracking: var(--tracking-wide);

  --type-weight-soft: var(--font-weight-medium);
  --type-weight-strong: var(--font-weight-bold);

  /* ---- Spacing roles --------------------------------------------------- */
  --space-gutter: var(--space-5);
  --space-section: var(--space-16);
  --space-section-head: var(--space-6);
  --space-stack-xs: var(--space-1);
  --space-stack-sm: var(--space-2);
  --space-stack-md: var(--space-4);
  --space-stack-lg: var(--space-6);
  --space-inline-xs: var(--space-1-5);
  --space-inline-sm: var(--space-2);
  --space-inline-md: var(--space-3);
  --space-inline-2xs: var(--space-1);
  --space-stack-xl: var(--space-8);
  --space-stack-2xl: var(--space-10);
  --space-nudge: var(--space-0-5);

  /* ---- Radius roles ---------------------------------------------------- */
  --radius-pill: var(--radius-full);
  --radius-control: var(--radius-sm);
  --radius-badge: var(--radius-md);
  --radius-inset: var(--radius-xs);

  /* ---- Lines: hairlines and underlines --------------------------------- */
  --hairline-width: var(--stroke-thin);
  --underline-thickness: var(--stroke-base);
  --underline-thickness-bold: var(--stroke-thick);
  --underline-offset: var(--space-1);
  --underline-offset-loose: var(--space-1-5);

  /* ---- Icons ----------------------------------------------------------- */
  --icon-size-sm: var(--space-4);

  /* ---- Sticker outline + shadow roles ---------------------------------- */
  --outline-width: var(--stroke-base);
  --outline-color: var(--color-line-ink);
  --elevation-sticker-sm: var(--shadow-offset-sm);
  --elevation-sticker-md: var(--shadow-offset-md);
  --elevation-sticker-lg: var(--shadow-offset-lg);
  --elevation-lift: -0.125rem;
  --elevation-press: 0.125rem;

  /* ---- Layout ---------------------------------------------------------- */
  --layout-max-width: 75rem;
  --layout-measure: 36rem;

  /* ---- Layering -------------------------------------------------------- */
  --layer-header: 100;
  --layer-menu: 200;

  /* ---- Focus ----------------------------------------------------------- */
  --focus-ring-width: 0.1875rem;
  --focus-ring-offset: 0.1875rem;
  --focus-ring-color: var(--color-iris-600);

  /* ---- Motion roles ---------------------------------------------------- */
  --motion-duration-press: var(--duration-instant);
  --motion-duration-hover: var(--duration-fast);
  --motion-duration-state: var(--duration-base);
  --motion-duration-float: var(--duration-float);
  --motion-ease-default: var(--ease-out);
  --motion-ease-playful: var(--ease-bounce);
  --motion-ease-float: var(--ease-in-out);
  --motion-float-distance: -0.375rem;
  --motion-wiggle-angle: -6deg;
  --motion-pop-scale: 1.06;

  /* ========================================================================
     3. COMPONENT TOKENS - one component's decisions
     ======================================================================== */

  /* ---- Header ---------------------------------------------------------- */
  --header-height: 3.5rem;
  --header-offset: var(--space-3);
  --header-padding-start: var(--space-3);
  --header-padding-end: var(--space-1-5);
  --header-radius: var(--radius-full);
  --header-bg: var(--color-paper-a90);
  --header-blur: 0.75rem;
  --header-saturate: 1.3;
  --header-shadow: var(--elevation-sticker-md);
  --header-max-width: calc(var(--layout-max-width) - 2 * var(--space-gutter) + 2 * var(--header-padding-start));
  --site-nav-gap: var(--space-6);

  /* ---- Brand ----------------------------------------------------------- */
  --brand-font-size: var(--font-size-xl);
  --brand-font-weight: var(--font-weight-semibold);
  --brand-mark-size: 2.25rem;
  --brand-logo-height: 2.5rem;
  --brand-logo-max-width: 12rem;
  --brand-grade-bg: var(--color-accent-highlight);
  --brand-grade-size: var(--font-size-2xs);
  --brand-grade-padding: var(--space-0-5) var(--space-1-5);

  /* ---- Iris illustration (logo mark + hero) ---------------------------- */
  --iris-petal: var(--color-iris-300);
  --iris-petal-deep: var(--color-iris-500);
  --iris-beard: var(--color-sunshine-300);
  --iris-leaf: var(--color-frog-400);
  --iris-stem: var(--color-frog-600);
  --iris-ink: var(--color-ink-900);
  --mark-bg: var(--color-sunshine-100);

  /* ---- Icon button (round sticker) ------------------------------------- */
  --icon-button-size: 2.75rem;
  --icon-button-icon: 1.375rem;
  --icon-button-bg: var(--color-bg-raised);

  /* ---- Button ---------------------------------------------------------- */
  --button-height-md: 3.25rem;
  --button-height-sm: 2.75rem;
  --button-padding-x-md: var(--space-6);
  --button-padding-x-sm: var(--space-4);
  --button-radius: var(--radius-full);
  --button-gap: var(--space-2);
  --button-font-size: var(--font-size-lg);
  --button-font-size-sm: var(--font-size-sm);
  --button-font-weight: var(--font-weight-semibold);
  --button-fg: var(--color-text-primary);
  --button-primary-fg: var(--color-text-on-brand);
  --button-primary-bg: var(--color-accent-brand);
  --button-primary-bg-hover: var(--color-accent-brand-hover);
  --button-secondary-bg: var(--color-bg-raised);
  --button-secondary-bg-hover: var(--color-bg-brand-soft);
  --button-sunny-bg: var(--color-accent-highlight);
  --button-sunny-bg-hover: var(--color-sunshine-400);
  --button-shadow: var(--elevation-sticker-md);
  --button-shadow-hover: var(--elevation-sticker-lg);
  --button-shadow-press: 0 0 0 var(--color-ink-900);
  --button-icon-size: 1.25rem;

  /* ---- Search ---------------------------------------------------------- */
  --search-height: 3.25rem;
  --search-icon-size: 1.25rem;
  --search-padding-start: var(--space-12);
  --search-icon-inset: var(--space-4);
  --search-button-padding-x: var(--space-5);
  --search-height-compact: var(--button-height-sm);
  --search-icon-size-compact: 1.125rem;
  --search-icon-inset-compact: var(--space-3);
  --search-padding-start-compact: var(--space-10);

  /* ---- Chip (filter pill) ---------------------------------------------- */
  --chip-height: 2.5rem;
  --chip-height-sm: 2.125rem;
  --chip-padding-x: var(--space-4);
  --chip-padding-x-sm: var(--space-3);
  --chip-bg: var(--color-bg-raised);
  --chip-bg-active: var(--color-ink-900);
  --chip-fg-active: var(--color-text-inverse);
  --chip-shadow: var(--elevation-sticker-sm);
  --chip-dot-size: var(--space-2-5);
  --chips-room-top: var(--space-1);
  --chips-room-bottom: var(--space-3);

  /* ---- Filters (catalog facets) ---------------------------------------- */
  --filter-label-width: 4.5rem;
  --filter-row-gap: var(--space-1);
  --filter-chips-room: var(--space-1);
  --filter-pill-bg: var(--color-bg-brand-tint);

  /* ---- Tag (category label on cards) ----------------------------------- */
  --tag-height: 1.625rem;
  --tag-padding-x: var(--space-2);
  --tag-radius: var(--radius-full);
  --tag-font-size: var(--font-size-2xs);
  --tag-outline-width: var(--stroke-thin);

  /* ---- Grade badge ----------------------------------------------------- */
  --grade-height: 1.375rem;
  --grade-padding-x: var(--space-1-5);
  --grade-bg: var(--color-bg-brand-tint);
  --grade-fg: var(--color-text-brand);

  /* ---- Meta row (grade, subject) --------------------------------------- */
  --meta-icon-size: 0.875rem;
  --meta-gap: var(--space-inline-xs);

  /* ---- Eyebrow sticker ------------------------------------------------- */
  --eyebrow-bg: var(--color-bg-raised);
  --eyebrow-padding: var(--space-1-5) var(--space-3);
  --eyebrow-rotate: -2deg;

  /* ---- Hero ------------------------------------------------------------ */
  --hero-padding-top: var(--space-8);
  --hero-padding-bottom: var(--space-12);
  --hero-underline-color: var(--color-accent-highlight);
  --hero-collage-height: 20.75rem;
  --hero-collage-max-width: 32rem;
  --hero-polaroid-width: 10.5rem;
  --hero-polaroid-padding: var(--space-2);
  --hero-polaroid-caption-space: var(--space-7);
  --hero-polaroid-bg: var(--color-bg-raised);
  --hero-tape-bg: var(--color-sunshine-a75);
  --hero-tape-rotate: -4deg;
  --hero-polaroid-left-rotate: -6deg;
  --hero-polaroid-right-rotate: 5deg;
  --hero-polaroid-spread: 3deg;
  --hero-iris-size: 7.5rem;
  --hero-grid-gap: var(--space-10);
  --hero-tape-overhang: var(--space-2-5);
  --hero-tape-width: var(--space-14);
  --hero-tape-height: var(--space-5);
  --hero-polaroid-right-drop: var(--space-12);
  --hero-star-one-top: var(--space-2);
  --hero-star-two-bottom: var(--space-12);
  --hero-star-two-left: var(--space-2);
  --hero-star-three-bottom: var(--space-6);
  --hero-star-three-right: var(--space-4);
  --hero-star-size: 1.75rem;
  --hero-star-size-sm: 1.3125rem;
  --hero-star-one-color: var(--color-accent-blush);
  --hero-star-one-rotate: 12deg;
  --hero-star-two-color: var(--color-tone-sky-fill);
  --hero-star-two-rotate: -14deg;
  --hero-star-three-color: var(--color-accent-highlight);
  --hero-star-three-rotate: 20deg;

  /* ---- Category tiles -------------------------------------------------- */
  --tile-radius: var(--radius-lg);
  --tile-padding: var(--space-4) var(--space-2) var(--space-3);
  --tile-icon-size: 2.25rem;
  --tile-gap: var(--space-3);
  --tile-label-size: var(--font-size-sm);
  --tile-icon-box: calc(var(--tile-icon-size) + var(--space-3));

  /* ---- Collections (teaching needs) ------------------------------------ */
  --collection-padding: var(--space-3);
  --collection-icon-box: 2.75rem;
  --collection-icon-size: 1.375rem;
  --collection-gap: var(--space-3);

  /* ---- Cards ----------------------------------------------------------- */
  --card-radius: var(--radius-lg);
  --card-bg: var(--color-bg-raised);
  --card-shadow: var(--elevation-sticker-md);
  --card-shadow-hover: var(--elevation-sticker-lg);
  --card-media-ratio: 4 / 3;
  --product-media-ratio: 1 / 1;
  --card-title-lines: 3;
  --card-excerpt-lines: 3;
  --card-padding: var(--space-3);
  --card-gap: var(--space-4);
  --card-tag-inset: var(--space-2);
  --posts-gap-row: var(--space-6);
  --posts-gap-column: var(--space-3);
  --posts-gap-row-wide: var(--space-8);
  --posts-gap-column-wide: var(--space-6);
  --scroller-room-top: var(--space-2);
  --scroller-room-bottom: var(--space-4);

  --feature-padding: var(--space-5);
  --feature-badge-rotate: 4deg;
  --feature-badge-inset: var(--space-3);
  --feature-badge-padding: var(--space-1) var(--space-3);
  --feature-padding-wide: var(--space-10);

  /* ---- Blog: post cards, page heads, posts ------------------------------ */
  --post-card-media-ratio: 4 / 5;
  --post-card-media-width-wide: 40%;
  --post-card-padding-wide: var(--space-6);
  --post-card-title-size: var(--font-size-lg);
  --post-card-title-size-wide: var(--font-size-xl);
  --page-head-padding-top: var(--space-6);
  --page-head-padding-bottom: var(--space-10);
  --page-head-icon-box: 3.5rem;
  --type-page-title-size: var(--font-size-3xl);
  --type-page-title-size-compact: var(--font-size-2xl);
  --type-post-title-size: var(--font-size-2xl);
  --type-prose-size: var(--font-size-base);
  --prose-measure: 42rem;
  --post-pin-width: 18rem;
  --product-embed-media: 5.5rem;
  --product-embed-media-wide: 8rem;
  --space-inline-lg: var(--space-5);

  /* ---- Spotlight (seasonal "more" list) -------------------------------- */
  --spotlight-thumb-size: 4.5rem;
  --spotlight-gap: var(--space-3);

  /* ---- Resource cards (TPT products) ------------------------ */
  --scroller-card-width: 12.5rem;
  --card-badge-padding: var(--space-0-5) var(--space-2);
  --price-was-color: var(--color-text-tertiary);

  /* ---- Store band ------------------------------------------------------ */
  --store-bg: var(--color-bg-brand-soft);
  --rating-star-color: var(--color-accent-star);
  --rating-star-size: 1.125rem;

  /* ---- Newsletter ------------------------------------------------------ */
  --newsletter-bg: var(--color-bg-brand-tint);
  --newsletter-radius: var(--radius-2xl);
  --newsletter-padding: var(--space-6);
  --newsletter-padding-end: var(--space-10);
  --newsletter-iris-size: 5.5rem;
  --newsletter-media-size: 15rem;
  --newsletter-media-size-compact: 16rem;
  --newsletter-media-gap: var(--space-8);
  --newsletter-padding-wide: var(--space-12);
  --newsletter-media-radius: var(--radius-xl);
  --input-height: 3.25rem;
  --input-bg: var(--color-bg-raised);
  --input-padding-x: var(--space-5);
  --newsletter-iris-clearance: var(--space-4);

  /* ---- Footer ---------------------------------------------------------- */
  --footer-bg: var(--color-bg-inverse);
  --footer-fg: var(--color-text-inverse);
  --footer-muted: var(--color-text-inverse-muted);
  --footer-accent: var(--color-accent-brand-soft);
  --footer-wave-height: 1.75rem;
  --footer-padding-top: var(--space-12);
  --footer-padding-bottom: var(--space-8);
  --footer-nav-gap-row: var(--space-8);
  --footer-nav-gap-column: var(--space-4);

  /* ---- Inline images (SVG data URIs; colors are literal by necessity) --- */
  --squiggle-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 200 20%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M3 12C25 3 45 3 67 11s43 8 66 0 42-8 64-1%22 fill=%22none%22 stroke=%22%23ffdf3d%22 stroke-width=%227%22 stroke-linecap=%22round%22/%3E%3C/svg%3E");
  --sparkle-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23232845%22 stroke-width=%222%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 3c.6 4.6 2.4 6.4 9 9-6.6 2.6-8.4 4.4-9 9-.6-4.6-2.4-6.4-9-9 6.6-2.6 8.4-4.4 9-9Z%22/%3E%3C/svg%3E");
  --iris-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 140%22%3E%3Cpath d=%22M58 138C40 120 30 100 32 78c14 12 24 32 26 60Z%22 fill=%22%234cc46d%22 stroke=%22%23232845%22 stroke-width=%223%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M62 138c14-16 24-34 24-56-14 12-22 30-24 56Z%22 fill=%22%234cc46d%22 stroke=%22%23232845%22 stroke-width=%223%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M60 136V72%22 fill=%22none%22 stroke=%22%232f9a55%22 stroke-width=%225%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M58 62C44 60 34 46 36 26c14 4 24 18 22 36Z%22 fill=%22%23a9a5f6%22 stroke=%22%23232845%22 stroke-width=%223%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M62 62c14-2 24-16 22-36-14 4-24 18-22 36Z%22 fill=%22%23a9a5f6%22 stroke=%22%23232845%22 stroke-width=%223%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M58 64C46 58 26 60 16 74c6 14 26 14 42-10Z%22 fill=%22%235a4fd8%22 stroke=%22%23232845%22 stroke-width=%223%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M62 64c12-6 32-4 42 10-6 14-26 14-42-10Z%22 fill=%22%235a4fd8%22 stroke=%22%23232845%22 stroke-width=%223%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M52 67c-6 0-13 2-18 7M68 67c6 0 13 2 18 7%22 fill=%22none%22 stroke=%22%23ffdf3d%22 stroke-width=%224%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M60 66C47 54 45 30 60 10c15 20 13 44 0 56Z%22 fill=%22%23a9a5f6%22 stroke=%22%23232845%22 stroke-width=%223%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M60 24v30%22 fill=%22none%22 stroke=%22%23232845%22 stroke-width=%222%22 stroke-linecap=%22round%22/%3E%3Ccircle cx=%2260%22 cy=%2267%22 r=%225%22 fill=%22%23ffdf3d%22 stroke=%22%23232845%22 stroke-width=%223%22/%3E%3C/svg%3E");
  --stars-image:
    url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22m12 2.5 2.7 5.9 6.4.7-4.8 4.4 1.4 6.4L12 16.6l-5.7 3.3 1.4-6.4L2.9 9.1l6.4-.7Z%22 fill=%22%23ff8fc2%22 stroke=%22%23232845%22 stroke-width=%221.6%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E") top 0.5rem right 42% / 1.75rem no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22m12 2.5 2.7 5.9 6.4.7-4.8 4.4 1.4 6.4L12 16.6l-5.7 3.3 1.4-6.4L2.9 9.1l6.4-.7Z%22 fill=%22%236cc8f5%22 stroke=%22%23232845%22 stroke-width=%221.6%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E") bottom 3rem left 0.5rem / 1.3rem no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22m12 2.5 2.7 5.9 6.4.7-4.8 4.4 1.4 6.4L12 16.6l-5.7 3.3 1.4-6.4L2.9 9.1l6.4-.7Z%22 fill=%22%23ffdf3d%22 stroke=%22%23232845%22 stroke-width=%221.6%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E") bottom 1.5rem right 1rem / 1.75rem no-repeat;
  --print-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23232845%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M7 8V3h10v5M7 17H4.5v-6.5a2.5 2.5 0 0 1 2.5-2.5h10a2.5 2.5 0 0 1 2.5 2.5V17H17%22/%3E%3Cpath d=%22M7 13.5h10V21H7z%22/%3E%3C/svg%3E");
  --check-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23232845%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%223.5%22 y=%223.5%22 width=%2217%22 height=%2217%22 rx=%224%22/%3E%3Cpath d=%22m8 12.5 2.8 2.8L16.5 9%22/%3E%3C/svg%3E");
  --palette-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23232845%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 3a9 9 0 1 0 0 18c1.2 0 2-.8 2-1.8 0-.6-.3-1-.6-1.4-.3-.4-.6-.8-.6-1.4 0-1 .8-1.8 1.8-1.8H17a4 4 0 0 0 4-4C21 6.2 17 3 12 3Z%22/%3E%3Ccircle cx=%227.5%22 cy=%2211.5%22 r=%221.3%22 fill=%22%23232845%22/%3E%3Ccircle cx=%2210%22 cy=%227.5%22 r=%221.3%22 fill=%22%23232845%22/%3E%3Ccircle cx=%2214.5%22 cy=%227.5%22 r=%221.3%22 fill=%22%23232845%22/%3E%3C/svg%3E");
  --wave-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 390 28%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M0 28V14C32 2 65 2 97 14s65 12 98 0 65-12 97 0 66 12 98 0v14Z%22 fill=%22%23000%22/%3E%3C/svg%3E");

  /* ---- Menu drawer ----------------------------------------------------- */
  --menu-bg: var(--color-bg-canvas);
  --menu-link-size: var(--font-size-2xl);
  --menu-chevron-size: 2rem;

}

/* ==========================================================================
   RESPONSIVE MODES - semantic re-mapping per breakpoint.
   ========================================================================== */
@media (min-width: 26.25rem) {
  :root {
    --type-display-size: var(--font-size-5xl);
  }
}

@media (min-width: 45rem) {
  :root {
    --type-display-size: var(--font-size-6xl);
    --type-heading-2-size: var(--font-size-4xl);
    --type-lead-size: var(--font-size-xl);
    --space-gutter: var(--space-8);
    --space-section: var(--space-24);
    --hero-padding-top: var(--space-16);
    --hero-padding-bottom: var(--space-20);
    --hero-collage-height: 26rem;
    --hero-polaroid-width: 14rem;
    --hero-iris-size: 10rem;
    --type-page-title-size: var(--font-size-5xl);
    --type-page-title-size-compact: var(--font-size-4xl);
    --type-post-title-size: var(--font-size-4xl);
    --type-prose-size: var(--font-size-lg);
    --page-head-padding-top: var(--space-10);
    --page-head-padding-bottom: var(--space-16);
    --post-pin-width: 22rem;
  }
}

@media (min-width: 64rem) {
  :root {
    --space-gutter: var(--space-12);
    --space-section: var(--space-28);
  }
}

/* ==========================================================================
   ACCESSIBILITY MODES
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-duration-press: 0ms;
    --motion-duration-hover: 0ms;
    --motion-duration-state: 0ms;
    --motion-float-distance: 0rem;
    --motion-wiggle-angle: 0deg;
    --elevation-lift: 0rem;
    --elevation-press: 0rem;
  }
}

@media (prefers-contrast: more) {
  :root {
    --color-text-secondary: var(--color-ink-900);
    --color-text-tertiary: var(--color-ink-800);
    --color-line-subtle: var(--color-ink-a40);
  }
}