/* =========================================================================
   Simple Media — Colours & Type
   Foundational tokens. Import this file first in any Simple Media artefact.
   ========================================================================= */

/* =========================================================================
   Cascade layers (ACSS 4.0 — class-first workflow)
   -------------------------------------------------------------------------
   Layers ordered low → high specificity. Later layers win when otherwise
   equal. Match the EtchWP/ACSS 4.0 Layer Controls: each can be disabled
   independently by toggling the layer off in production.

     defaults        — element defaults, body, headings, body copy, links
     buttons-links   — .btn / .nav-cta / link styles
     card-framework  — .card, .work-card, anything card-shaped
     icon-framework  — .icon, decorative svg defaults
     utility-classes — .bg-dark / .text-l / contextual + atomic utils
   ========================================================================= */
@layer defaults, buttons-links, card-framework, icon-framework, utility-classes;

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Inter Tight";
  src: url("fonts/InterTight-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter Tight";
  src: url("fonts/InterTight-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Inter Tight";
  src: url("fonts/InterTight-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter Tight";
  src: url("fonts/InterTight-MediumItalic.ttf") format("truetype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Inter Tight";
  src: url("fonts/InterTight-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter Tight";
  src: url("fonts/InterTight-SemiBoldItalic.ttf") format("truetype");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---------- Brand colours ---------- */
  --simple-blue: #0d51fc;     /* oklch(0.5249 0.2593 263.5)  */
  --simple-dark: #0e1b2d;     /* oklch(0.2203 0.04   256.76) */
  --mid-grey:    #a5a5a5;     /* oklch(0.7219 0      0)      */
  --light-grey:  #d8d8d8;     /* oklch(0.8822 0      0)      */
  --white:       #ffffff;
  --black:       #000000;

  /* ---------- Primary scale — Simple Blue (H 263.5, C 0.2593) ---------- */
  --primary-ultra-dark:  oklch(0.10   0.2593 263.5);
  --primary-dark:        oklch(0.25   0.2593 263.5);
  --primary-semi-dark:   oklch(0.35   0.2593 263.5);
  --primary:             oklch(0.5249 0.2593 263.5); /* #0d51fc */
  --primary-hover:       oklch(0.58   0.2593 263.5);
  --primary-semi-light:  oklch(0.65   0.2593 263.5);
  --primary-light:       oklch(0.85   0.2593 263.5);
  --primary-ultra-light: oklch(0.95   0.2593 263.5);

  /* ---------- Base scale — Simple Dark (H 256.76, C 0.04) ---------- */
  --base-ultra-dark:  oklch(0.10   0.04 256.76);
  --base-dark:        oklch(0.25   0.04 256.76);
  --base:             oklch(0.2203 0.04 256.76); /* #0e1b2d */
  --base-hover:       oklch(0.16   0.04 256.76);
  --base-semi-dark:   oklch(0.35   0.04 256.76);
  --base-semi-light:  oklch(0.65   0.04 256.76);
  --base-light:       oklch(0.85   0.04 256.76);
  --base-ultra-light: oklch(0.95   0.04 256.76);

  /* ---------- Neutral scale — Mid Grey (achromatic, C 0) ---------- */
  --neutral-ultra-dark:  oklch(0.10   0 0);
  --neutral-dark:        oklch(0.25   0 0);
  --neutral-semi-dark:   oklch(0.35   0 0);
  --neutral:             oklch(0.7219 0 0); /* #a5a5a5 */
  --neutral-hover:       oklch(0.65   0 0);
  --neutral-semi-light:  oklch(0.65   0 0);
  --neutral-light:       oklch(0.85   0 0);
  --neutral-ultra-light: oklch(0.95   0 0);

  /* ---------- Type family ---------- */
  --font-sans: "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---------- Type scale ---------- */
  --fs-display:   clamp(56px, 8vw, 128px);
  --fs-h1:        clamp(40px, 5vw, 72px);
  --fs-h2:        clamp(32px, 4vw, 56px);
  --fs-h3:        clamp(24px, 2.5vw, 36px);
  --fs-h4:        20px;
  --fs-eyebrow:   13px;
  --fs-body-lg:   20px;
  --fs-body:      17px;
  --fs-body-sm:   15px;
  --fs-caption:   13px;

  --lh-display: 0.95;
  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-body:    1.55;

  --tracking-tight: -0.02em;
  --tracking-snug:  -0.01em;
  --tracking-normal: 0;
  --tracking-eyebrow: 0.12em;

  /* ============================================================
     Typography — ACSS framework
     ------------------------------------------------------------
     One family (Inter Tight) at every size. Heading and text
     scales are 1.333 (desktop) / 1.2 (mobile). Sizes fluidly
     clamp between mobile and desktop bounds.

     Heading family + colour + balance/pretty defaults are pinned
     here so every heading and paragraph inherits them.
     ============================================================ */

  --heading-font-family: "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --text-font-family:    var(--heading-font-family);
  --heading-color:       var(--text-dark);
  --heading-spacing:     1.2em;
  --heading-line-height: calc(4px + 2ex);
  --heading-text-wrap:   balance;
  --text-line-height:    calc(6px + 2ex);
  --text-wrap:           pretty;

  /* Text scale (body / inline) — desktop max | mobile min. */
  --text-xs: clamp(13px, calc(13px + 1 * ((100vw - 360px) / 1006)), 14px);
  --text-s:  clamp(14px, calc(14px + 1 * ((100vw - 360px) / 1006)), 15px);
  --text-m:  clamp(16px, calc(16px + 2 * ((100vw - 360px) / 1006)), 18px);   /* body default */
  --text-l:  clamp(19px, calc(19px + 5 * ((100vw - 360px) / 1006)), 24px);
  --text-xl: clamp(23px, calc(23px + 9 * ((100vw - 360px) / 1006)), 32px);

  /* Heading scale — base h4 (18→20), every step ×1.333 desktop / ×1.2 mobile. */
  --h6: clamp(13px, calc(13px + 1  * ((100vw - 360px) / 1006)), 14px);
  --h5: clamp(14px, calc(14px + 1  * ((100vw - 360px) / 1006)), 15px);
  --h4: clamp(18px, calc(18px + 2  * ((100vw - 360px) / 1006)), 20px);
  --h3: clamp(22px, calc(22px + 5  * ((100vw - 360px) / 1006)), 27px);
  --h2: clamp(26px, calc(26px + 10 * ((100vw - 360px) / 1006)), 36px);
  --h1: clamp(31px, calc(31px + 17 * ((100vw - 360px) / 1006)), 48px);
  --display: clamp(40px, calc(40px + 40 * ((100vw - 360px) / 1006)), 80px);  /* hero only */

  /* ============================================================
     Spacing — ACSS framework
     ------------------------------------------------------------
     Base spacing token is --space-m, derived from a 30px desktop
     base scaled by ×1.5 up, ÷1.5 down. Mobile collapses to a 24px
     base scaled by ×1.333. Each step fluidly interpolates between
     the mobile (--vp-min) and desktop (--vp-max) values via clamp().

     Use the named t-shirt scale; do not invent ad-hoc px values.
     ============================================================ */

  --vp-min: 360;  /* unitless — px assumed in clamp calculations */
  --vp-max: 1366;

  /* helper: fluid clamp between mobile (min) and desktop (max) values, in px */
  /* usage in token defs below: clamp(MINpx, calc(MINpx + (MAX - MIN) * ((100vw - VPMINpx) / (VPMAX - VPMIN))), MAXpx) */

  --space-3xs: 6px;   /* desktop 5.93 / mobile 7.59 — quantised to 6 */
  --space-2xs: 10px;  /* desktop 8.89 / mobile 13.51 — quantised to 10 */
  --space-xs:  14px;  /* desktop 13.33 / mobile 18 — quantised to 14 */
  --space-s:   clamp(18px, calc(18px + 2 * ((100vw - 360px) / 1006)), 20px);
  --space-m:   clamp(24px, calc(24px + 6 * ((100vw - 360px) / 1006)), 30px);
  --space-l:   clamp(32px, calc(32px + 13 * ((100vw - 360px) / 1006)), 45px);
  --space-xl:  clamp(43px, calc(43px + 25 * ((100vw - 360px) / 1006)), 68px);
  --space-2xl: clamp(57px, calc(57px + 44 * ((100vw - 360px) / 1006)), 101px);
  --space-3xl: clamp(76px, calc(76px + 76 * ((100vw - 360px) / 1006)), 152px);

  /* Section rhythm — ×3 base on desktop, ×2 on mobile (--space-adjust-section). */
  --space-section: clamp(48px, calc(48px + 42 * ((100vw - 360px) / 1006)), 90px);

  /* Contextual gaps — what flow / containers / grids use by default. */
  --paragraph-spacing: 1em;
  --flow-spacing: var(--paragraph-spacing);
  --contextual-container-gap: var(--space-xl);
  --contextual-content-gap:   var(--space-m);
  --contextual-grid-gap:      var(--space-m);
  --content-gap:              var(--space-m);

  /* ============================================================
     Component-default spacing — these are the names components
     should reach for FIRST. They're set globally so a card, grid,
     section, etc. inherits the right value without each component
     re-declaring its own padding/gap.
     ============================================================ */
  --container-spacing:  var(--space-xl);   /* between/around containers + columns */
  --grid-gap:           var(--space-m);    /* gaps in grid + flex layouts (prefer over --card-gap) */
  --card-padding:       var(--space-m);    /* internal padding for every card surface */
  --card-radius:        var(--radius);     /* defined later — every card + image uses --radius */
  --image-radius:       var(--radius);

  /* Section spacing — three rhythm sizes for vertical breathing between sections. */
  --section-spacing-s:  var(--space-l);    /* default — between most sections */
  --section-spacing-m:  var(--space-xl);
  --section-spacing-l:  var(--space-2xl);

  /* Lists & figures. */
  --list-spacing: var(--paragraph-spacing);
  --list-item-spacing: 0.5em;
  --list-indent-spacing: 2em;
  --nested-list-indent-spacing: 1em;
  --figure-spacing: var(--paragraph-spacing);
  --figcaption-spacing: 0.5em;

  /* Featured content (callouts, hero blocks). */
  --content-feature:     50px;
  --content-feature-max: 100px;

  /* ---------- Legacy step aliases (old code path — prefer the named scale above) ---------- */
  --space-1: var(--space-3xs);
  --space-2: var(--space-2xs);
  --space-3: var(--space-xs);
  --space-4: var(--space-xs);
  --space-5: var(--space-s);
  --space-6: var(--space-m);
  --space-7: var(--space-l);
  --space-8: var(--space-xl);
  --space-9: var(--space-2xl);
  --space-10: var(--space-3xl);
  --space-11: var(--space-section);

  /* ============================================================
     Layout — ACSS framework
     ============================================================ */
  --gutter:           clamp(16px, calc(16px + 64 * ((100vw - 360px) / 1006)), 80px);
  --sticky-offset:    60px;
  --header-height:    0px;     /* sticky topnav handled outside this token */
  --scroll-margin:    0px;

  --body-max-width:   1920px;
  --container-max:    1280px;
  --container-pad:    var(--gutter);   /* alias for legacy code */

  /* Column widths (ideal measure caps for prose and form layouts). */
  --col-s: 13rem;  /* narrow — sidebars, meta, captions */
  --col-m: 25rem;  /* default — body prose */
  --col-l: 38rem;  /* wide — long-form articles, intros */

  --col-rule-s: 0.5px;
  --col-rule-m: 1px;
  --col-rule-l: 3px;

  /* ============================================================
     Borders & radius — ACSS framework
     ============================================================ */
  --radius:        5px;            /* base */
  --radius-scale:  1.5;
  --radius-xs:     calc(var(--radius) / var(--radius-scale));      /* ≈ 3.3px */
  --radius-sm:     var(--radius);                                  /* 5px */
  --radius-md:     calc(var(--radius) * var(--radius-scale));      /* 7.5px → buttons, inputs */
  --radius-lg:     calc(var(--radius) * var(--radius-scale) * var(--radius-scale)); /* ≈ 11.25px → cards */
  --radius-xl:     calc(var(--radius) * 4);                        /* 20px → large surfaces */
  --radius-pill:   999px;

  --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);

  --divider-size:  1px;
  --divider-style: solid;
  --divider-color-dark:  color-mix(in srgb, var(--black) 20%, transparent);
  --divider-color-light: color-mix(in srgb, var(--white) 20%, transparent);

  /* ============================================================
     Shadows — ACSS framework
     Soft, low-spread. Used for floating UI only; cards stay flat.
     ============================================================ */
  --shadow-1: 0 0 40px color-mix(in srgb, black 10%, transparent);
  --shadow-2: 0 0 60px color-mix(in srgb, black 20%, transparent);
  --shadow-3: 0 0 80px color-mix(in srgb, black 30%, transparent);

  --drop-shadow-1: 0 1px 2px  color-mix(in srgb, black 15%, transparent);
  --drop-shadow-2: 0 4px 6px  color-mix(in srgb, black 20%, transparent);
  --drop-shadow-3: 0 10px 15px color-mix(in srgb, black 25%, transparent);

  /* ============================================================
     Motion — ACSS framework
     ============================================================ */
  --transition-duration: 0.3s;
  --transition-delay: 0s;
  --transition-timing: ease-in-out;
  --hover-duration: var(--transition-duration);
  --hover-timing:   var(--transition-timing);

  --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);

  /* Legacy duration aliases (prefer --transition-duration). */
  --dur-fast: 0.14s;
  --dur-base: var(--transition-duration);
  --dur-slow: 0.42s;
  --ease-out: var(--ease-snappy);
  --ease-in-out: var(--transition-timing);

  /* ============================================================
     Focus rings
     ============================================================ */
  --focus-color: var(--primary);
  --focus-offset: 2px;
  --focus-style: outline;
  --focus-width: 2px;

  /* ============================================================
     Semantic text colours
     ------------------------------------------------------------
     These are what components read by default. Inside a contextual
     background utility class (.bg-dark / .bg-light / etc.) the
     same variable names get rebound to the right inverted colour,
     so child elements automatically pick up the correct foreground
     without re-coloring them by hand.
     ============================================================ */
  --text-dark:        var(--base);                                          /* brand override: Simple Dark, not pure black */
  --text-light:       var(--white);
  --text-dark-muted:  color-mix(in srgb, var(--text-dark) 80%, transparent);
  --text-light-muted: color-mix(in srgb, var(--text-light) 80%, transparent);

  /* ============================================================
     Semantic background contexts
     ------------------------------------------------------------
     The four "stages" a block of UI can sit on. Each one declares
     not just the background colour but also which text / heading /
     icon colour and scheme its descendants should adopt — applied
     by the matching utility class below.
     ============================================================ */
  --bg-dark:        var(--base);            /* brand override: Simple Dark navy, not --neutral-dark grey */
  --bg-ultra-dark:  var(--base-hover);      /* deeper than --bg-dark */
  --bg-light:       var(--neutral-ultra-light);   /* subtle off-white surface */
  --bg-ultra-light: var(--white);

  --bg-dark-heading:        var(--text-light);
  --bg-dark-text:           var(--text-light);
  --bg-dark-icon:           dark;            /* picks the dark-scheme icon variant */
  --bg-ultra-dark-heading:  var(--text-light);
  --bg-ultra-dark-text:     var(--text-light);
  --bg-ultra-dark-icon:     dark;
  --bg-light-heading:       var(--text-dark);
  --bg-light-text:          var(--text-dark);
  --bg-light-icon:          light;
  --bg-ultra-light-heading: var(--text-dark);
  --bg-ultra-light-text:    var(--text-dark);
  --bg-ultra-light-icon:    light;

  /* ============================================================
     Body, links — ACSS framework
     ============================================================ */
  --body-bg-color:  var(--white);
  --body-color:     var(--text-dark-muted);
  --body-margin-top: 0;
  --body-box-shadow: 0 0 80px 0 color-mix(in oklch, var(--neutral) 20%, transparent);

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

  /* ============================================================
     Icons — ACSS framework
     ============================================================ */
  --icon-size-xs: 12px;
  --icon-size-s:  16px;
  --icon-size-m:  32px;
  --icon-size-l:  64px;
  --icon-size-xl: 128px;
  --icon-size-2xl: 256px;
  --icon-color:           var(--text-dark-muted);
  --icon-color-hover:     var(--primary);
  --icon-background:      var(--neutral-ultra-light);
  --icon-background-hover: var(--neutral-light);
  --icon-border-color:    var(--border-color-dark);
  --icon-border-style:    var(--border-style);
  --icon-border-width:    var(--border-width);
  --icon-padding:         0.15em;
  --icon-radius:          var(--radius);
}

/* =========================================================================
   Contextual background utility classes
   -------------------------------------------------------------------------
   Apply one of these to any container; descendants automatically pick up
   the right foreground / heading / muted colours by rebinding the same
   semantic variables that components already reference.
   ========================================================================= */
.bg-dark {
  background-color: var(--bg-dark);
  color: var(--bg-dark-text);
  color-scheme: dark;
  --text-dark:       var(--bg-dark-text);      /* invert: "dark text" now means light, because the surface is dark */
  --text-dark-muted: color-mix(in srgb, var(--bg-dark-text) 80%, transparent);
  --heading-color:   var(--bg-dark-heading);
  --icon-color:      var(--text-light-muted);
  --link-color:      var(--primary-semi-light);
  --link-color-hover: var(--white);
  --border-color-dark: var(--border-color-light);
  --divider-color-dark: var(--divider-color-light);
}
.bg-ultra-dark {
  background-color: var(--bg-ultra-dark);
  color: var(--bg-ultra-dark-text);
  color-scheme: dark;
  --text-dark:       var(--bg-ultra-dark-text);
  --text-dark-muted: color-mix(in srgb, var(--bg-ultra-dark-text) 80%, transparent);
  --heading-color:   var(--bg-ultra-dark-heading);
  --icon-color:      var(--text-light-muted);
  --link-color:      var(--primary-semi-light);
  --link-color-hover: var(--white);
  --border-color-dark: var(--border-color-light);
  --divider-color-dark: var(--divider-color-light);
}
.bg-light {
  background-color: var(--bg-light);
  color: var(--bg-light-text);
  color-scheme: light;
  --text-dark:       var(--bg-light-text);
  --text-dark-muted: color-mix(in srgb, var(--bg-light-text) 80%, transparent);
  --heading-color:   var(--bg-light-heading);
  --icon-color:      var(--text-dark-muted);
}
.bg-ultra-light {
  background-color: var(--bg-ultra-light);
  color: var(--bg-ultra-light-text);
  color-scheme: light;
  --text-dark:       var(--bg-ultra-light-text);
  --text-dark-muted: color-mix(in srgb, var(--bg-ultra-light-text) 80%, transparent);
  --heading-color:   var(--bg-ultra-light-heading);
  --icon-color:      var(--text-dark-muted);
}

/* =========================================================================
   Dark mode — set on <html data-theme="dark"> or <html.dark>
   -------------------------------------------------------------------------
   Flips the page-level body context so the entire document reads as a
   dark surface, without touching the individual brand-colour tokens.
   Components keep referencing the same semantic names; they just resolve
   to the dark-mode values.
   ========================================================================= */
[data-theme="dark"],
html.dark {
  color-scheme: dark;
  --body-bg-color:  var(--bg-dark);
  --body-color:     var(--bg-dark-text);
  --text-dark:       var(--text-light);
  --text-dark-muted: var(--text-light-muted);
  --heading-color:   var(--text-light);
  --icon-color:      var(--text-light-muted);
  --link-color:      var(--primary-semi-light);
  --link-color-hover: var(--white);
  --border-color-dark: var(--border-color-light);
  --divider-color-dark: var(--divider-color-light);

  /* Swap the bg-* contexts so utility blocks still work in dark mode. */
  --bg-light:       var(--base);
  --bg-ultra-light: var(--base-hover);
  --bg-light-heading: var(--text-light);
  --bg-light-text:    var(--text-light);
  --bg-ultra-light-heading: var(--text-light);
  --bg-ultra-light-text:    var(--text-light);
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]):not(.light) {
    /* same overrides as [data-theme="dark"] — kept here so users with system dark mode get it automatically */
    color-scheme: dark;
    --body-bg-color:  var(--bg-dark);
    --body-color:     var(--bg-dark-text);
    --text-dark:       var(--text-light);
    --text-dark-muted: var(--text-light-muted);
    --heading-color:   var(--text-light);
    --icon-color:      var(--text-light-muted);
    --link-color:      var(--primary-semi-light);
    --link-color-hover: var(--white);
    --border-color-dark: var(--border-color-light);
    --divider-color-dark: var(--divider-color-light);
    --bg-light:       var(--base);
    --bg-ultra-light: var(--base-hover);
    --bg-light-heading: var(--text-light);
    --bg-light-text:    var(--text-light);
    --bg-ultra-light-heading: var(--text-light);
    --bg-ultra-light-text:    var(--text-light);
  }
}

/* =========================================================================
   Token usage guide (semantic — but using the canonical token names directly)

   Foreground text on light:     color: var(--base);            (body, headings)
                                 color: var(--base-semi-light); (secondary, eyebrow, captions)
                                 color: var(--neutral);         (tertiary / disabled)

   Foreground text on dark:      color: var(--white);
                                 color: var(--neutral-light);   (secondary on dark)

   Backgrounds (light surfaces): background: var(--white);
                                 background: var(--neutral-ultra-light);  (subtle surface tint)
                                 background: var(--light-grey);           (muted block)

   Inverse / dark surfaces:      background: var(--base);
                                 background: var(--base-hover);           (deeper inverse)

   Accent surface:               background: var(--primary);
                                 background: var(--primary-hover);        (on hover)

   Borders & dividers:           border-color: var(--light-grey);         (hairline / card edge)
                                 border-color: var(--base);               (strong, intentional)

   Links inline:                 color: currentColor + underline.
                                 :hover  → color: var(--primary).
   ========================================================================= */

html, body {
  font-family: var(--text-font-family);
  color: var(--body-color);
  background: var(--body-bg-color);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
}
@layer defaults {
  /* Flow rhythm — every direct child of an article / .flow block inherits a top margin
     equal to --flow-spacing. Components don't need to set this per-element. */
  .flow > * + *,
  article > * + *  { margin-top: var(--flow-spacing); }
  p + p            { margin-top: var(--paragraph-spacing); }

  /* Default grid + flex spacing — any container that opts into ".grid" or ".cluster"
     picks up --grid-gap automatically. */
  .grid    { display: grid; gap: var(--grid-gap); }
  .cluster { display: flex; flex-wrap: wrap; gap: var(--grid-gap); align-items: center; }
  .stack   { display: flex; flex-direction: column; gap: var(--content-gap); }

  /* Section vertical rhythm. Apply .section-s/m/l for explicit sizing; the bare
     <section> element gets --section-spacing-s by default. */
  section,
  .section,
  .section-s { padding-block: var(--section-spacing-s); }
  .section-m { padding-block: var(--section-spacing-m); }
  .section-l { padding-block: var(--section-spacing-l); }

  /* Page gutter — applied to .container / .wrap. */
  .container,
  .wrap { padding-inline: var(--gutter); max-width: var(--container-max); margin-inline: auto; }

  /* Images — by default round to --image-radius. */
  img, picture, video, svg.media { border-radius: var(--image-radius); }
}

.sm-display, .display {
  font-family: var(--heading-font-family);
  font-weight: 500;
  font-size: var(--display);
  line-height: var(--heading-line-height);
  letter-spacing: var(--tracking-tight);
  color: var(--heading-color);
  text-wrap: var(--heading-text-wrap);
}

h1, .sm-h1 {
  font-family: var(--heading-font-family);
  font-weight: 500;
  font-size: var(--h1);
  line-height: var(--heading-line-height);
  letter-spacing: var(--tracking-tight);
  color: var(--heading-color);
  text-wrap: var(--heading-text-wrap);
  margin: 0;
}

h2, .sm-h2 {
  font-family: var(--heading-font-family);
  font-weight: 500;
  font-size: var(--h2);
  line-height: var(--heading-line-height);
  letter-spacing: var(--tracking-snug);
  color: var(--heading-color);
  text-wrap: var(--heading-text-wrap);
  margin: 0;
}

h3, .sm-h3 {
  font-family: var(--heading-font-family);
  font-weight: 500;
  font-size: var(--h3);
  line-height: var(--heading-line-height);
  letter-spacing: var(--tracking-snug);
  color: var(--heading-color);
  margin: 0;
}

h4, .sm-h4 {
  font-family: var(--heading-font-family);
  font-weight: 600;
  font-size: var(--h4);
  line-height: var(--heading-line-height);
  letter-spacing: var(--tracking-snug);
  color: var(--heading-color);
  margin: 0;
}

.sm-eyebrow, .eyebrow {
  font-family: var(--text-font-family);
  font-weight: 500;
  font-size: var(--text-xs);
  line-height: 1;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-dark-muted);
}

p, .sm-body {
  font-family: var(--text-font-family);
  font-weight: 400;
  font-size: var(--text-m);
  line-height: var(--text-line-height);
  color: var(--body-color);
  text-wrap: var(--text-wrap);
  margin: 0;
}

.sm-body-lg { font-size: var(--text-l); line-height: 1.45; }
.sm-body-sm { font-size: var(--text-s); line-height: 1.5; }
.sm-caption { font-size: var(--text-xs); line-height: 1.4; color: var(--text-dark-muted); }

a, .sm-link {
  color: var(--link-color);
  text-decoration: var(--link-decoration);
  border-bottom: 1px solid currentColor;
  font-weight: var(--link-weight);
  transition: color var(--transition-duration) var(--transition-timing), border-color var(--transition-duration) var(--transition-timing);
}
a:hover, .sm-link:hover { color: var(--link-color-hover); border-color: var(--link-color-hover); }

code, .sm-mono {
  font-family: var(--font-mono);
  font-size: 0.94em;
}

/* Legacy: .sm-on-dark — kept for backward compat. Prefer .bg-dark on new code. */
.sm-on-dark {
  color: var(--text-light);
  --text-dark:       var(--text-light);
  --text-dark-muted: var(--text-light-muted);
  --heading-color:   var(--text-light);
  --link-color:      var(--primary-semi-light);
  --link-color-hover: var(--white);
}

/* =========================================================================
   @layer buttons-links
   ========================================================================= */
@layer buttons-links {
  .btn {
    font-family: var(--btn-font-family, inherit);
    font-size: var(--btn-font-size, var(--text-m));
    font-weight: var(--btn-font-weight, 500);
    line-height: var(--btn-line-height, 1);
    letter-spacing: var(--btn-letter-spacing, 0);
    text-transform: var(--btn-text-transform, none);
    text-decoration: var(--btn-text-decoration, none);
    text-align: var(--btn-text-align, center);
    justify-content: var(--btn-justify-content, center);
    padding-block: var(--btn-padding-block, 0.6em);
    padding-inline: var(--btn-padding-inline, 1.25em);
    border-radius: var(--btn-border-radius, var(--radius-md));
    border: var(--btn-border-width, 1.5px) var(--btn-border-style, solid) transparent;
    min-width: var(--btn-min-width, 140px);
    width: var(--btn-width, max-content);
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--transition-duration) var(--transition-timing),
                color var(--transition-duration) var(--transition-timing),
                border-color var(--transition-duration) var(--transition-timing),
                transform var(--transition-duration) var(--transition-timing);
  }
  .btn:active { transform: translateY(1px); }
  .btn-primary { background: var(--primary); color: var(--white); }
  .btn-primary:hover { background: var(--primary-hover); }
  .btn-dark    { background: var(--base); color: var(--white); }
  .btn-dark:hover { background: var(--base-hover); }
  .btn-ghost   { background: transparent; color: currentColor; border-color: currentColor; }
  .btn-ghost:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
  .btn-text    { background: transparent; color: var(--link-color); padding-inline: 0; min-width: 0; }
  .btn-text:hover { color: var(--link-color-hover); }
}

/* =========================================================================
   @layer card-framework
   -------------------------------------------------------------------------
   Any element with .card inherits all the right tokens. Components may
   override individual tokens locally; they should not re-declare padding
   or radius numerically.
   ========================================================================= */
@layer card-framework {
  .card {
    background: var(--card-background, var(--neutral-ultra-light));
    border: var(--card-border-width, var(--border-width)) var(--card-border-style, var(--border-style)) var(--card-border-color, var(--border-color-dark));
    border-radius: var(--card-radius, var(--radius));
    padding: var(--card-padding);
    box-shadow: var(--card-shadow, none);
    display: flex;
    flex-direction: column;
    gap: var(--card-gap, calc(var(--content-gap) / 2));
  }
  .card > .card-media,
  .card > img,
  .card > picture,
  .card > video {
    aspect-ratio: var(--card-media-aspect-ratio, 4 / 3);
    object-fit: var(--card-media-object-fit, cover);
    border-radius: var(--card-media-radius, var(--radius));
  }
  .card h2, .card h3, .card h4 { color: var(--card-heading-color, var(--heading-color)); }
  .card h3 { font-size: var(--card-heading-size, var(--h3)); }
  .card p  { color: var(--card-text-color, var(--text-dark-muted)); font-size: var(--card-text-size, var(--text-s)); }
  .card a  { color: var(--card-link-color, var(--link-color)); }
  .card a:hover { color: var(--card-link-hover-color, var(--link-color-hover)); }
  .card .avatar {
    width: var(--card-avatar-size, 140px);
    height: var(--card-avatar-size, 140px);
    border-radius: var(--card-avatar-radius, var(--radius));
    object-fit: cover;
  }
}

/* =========================================================================
   @layer icon-framework
   ========================================================================= */
@layer icon-framework {
  .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width:  var(--icon-size, var(--icon-size-m));
    height: var(--icon-size, var(--icon-size-m));
    color: var(--icon-color);
    background: var(--icon-background, transparent);
    border: var(--icon-border-width, 0) var(--icon-border-style) var(--icon-border-color);
    border-radius: var(--icon-radius);
    padding: var(--icon-padding);
    transition: color var(--transition-duration) var(--transition-timing),
                background var(--transition-duration) var(--transition-timing);
  }
  .icon:hover { color: var(--icon-color-hover); background: var(--icon-background-hover, var(--icon-background)); }
  .icon-xs { --icon-size: var(--icon-size-xs); }
  .icon-s  { --icon-size: var(--icon-size-s); }
  .icon-m  { --icon-size: var(--icon-size-m); }
  .icon-l  { --icon-size: var(--icon-size-l); }
  .icon-xl { --icon-size: var(--icon-size-xl); }
  .icon-2xl{ --icon-size: var(--icon-size-2xl); }
  .icon svg { width: 100%; height: 100%; }
}

/* =========================================================================
   @layer utility-classes
   -------------------------------------------------------------------------
   Last layer — wins over everything else. Atomic helpers + the bg-context
   classes already declared above (they live here logically).
   ========================================================================= */
@layer utility-classes {
  /* Text sizes */
  .text-xs { font-size: var(--text-xs); }
  .text-s  { font-size: var(--text-s); }
  .text-m  { font-size: var(--text-m); }
  .text-l  { font-size: var(--text-l); }
  .text-xl { font-size: var(--text-xl); }

  /* Heading sizes (apply size only — colour comes from context) */
  .h1 { font-size: var(--h1); }
  .h2 { font-size: var(--h2); }
  .h3 { font-size: var(--h3); }
  .h4 { font-size: var(--h4); }
  .h5 { font-size: var(--h5); }
  .h6 { font-size: var(--h6); }

  /* Alignment + flow */
  .text-balance { text-wrap: balance; }
  .text-pretty  { text-wrap: pretty; }
  .text-muted   { color: var(--text-dark-muted); }

  /* Container constraints */
  .max-col-s { max-width: var(--col-s); }
  .max-col-m { max-width: var(--col-m); }
  .max-col-l { max-width: var(--col-l); }

  /* Gap overrides — when a layout needs a non-default rhythm */
  .gap-content { gap: var(--content-gap); }
  .gap-grid    { gap: var(--grid-gap); }
  .gap-container { gap: var(--container-spacing); }
  .gap-s { gap: var(--space-s); }
  .gap-m { gap: var(--space-m); }
  .gap-l { gap: var(--space-l); }

  /* Section sizes */
  .section-s { padding-block: var(--section-spacing-s); }
  .section-m { padding-block: var(--section-spacing-m); }
  .section-l { padding-block: var(--section-spacing-l); }
}