/* ==========================================================================
   SMW Design System
   --------------------------------------------------------------------------
   Extracted from the existing hand-built child theme, not invented.
   Every value below traces back to smwtheme_child/style.css or to the token
   block that already lived inside content-page-utilities.php.

   Load order matters:
     1. parent style.css        (GeneratePress base)
     2. child style.css         (the canon — page layout, sections, nav)
     3. THIS FILE               (tokens, element coverage, components)

   Nothing here is scoped to a template. It is the shared layer that the blog
   and the utilities both sit on, so a restyle happens in the token block at
   the top of this file and nowhere else.

   Naming: SMW- (uppercase), one namespace, no exceptions — including on the
   specimen page. Post content in the database hardcodes SMW-hintbox /
   SMW-infobox / SMW-notice-important / SMW-definition 1,054 times, so those
   names are fixed. Rather than invent a parallel set and bridge between them,
   everything editable adopts the hardcoded names. The part that cannot change
   sets the vocabulary; tools and templates follow it.
   ========================================================================== */


/* ==========================================================================
   1. TOKENS
   The only block you edit to restyle the site.
   ========================================================================== */

:root {

  /* --- Brand ------------------------------------------------------------
     #03c96a is the one asset that survives from the original site (20 uses
     in the child stylesheet). The blog used #02964f as its hover, the
     utilities used #02b05c — two hovers for one green. Reconciled to the
     blog's value, because the blog is the canon.                           */
  --smw-green:              #03c96a;
  --smw-green-hover:        #02964f;
  --smw-green-active:       #027a41;
  --smw-green-soft:         rgba(3, 201, 106, 0.10);
  --smw-green-glow:         rgba(3, 201, 106, 0.45);

  /* --- Neutrals ---------------------------------------------------------
     The blog palette, hand-picked. The utilities' Tailwind slate ramp
     (#0f172a / #64748b / #f8fafc / #e2e8f0 / #cbd5e1) maps onto these.     */
  --smw-navy:               #193247;   /* headings                          */
  --smw-navy-deep:          #15222e;   /* footer, deepest surface           */
  --smw-navy-mid:           #1c2c3c;
  --smw-slate:              #526d7a;   /* body text, secondary nav          */
  --smw-slate-muted:        #96a6bf;   /* meta, captions, disabled          */
  --smw-mist:               #f2f4f7;   /* alternate surface                 */
  --smw-line:               #e3ebf1;   /* borders                           */
  --smw-white:              #ffffff;
  --smw-black:              #000000;

  /* --- Semantic surface + text ------------------------------------------ */
  --smw-bg:                 var(--smw-white);
  --smw-bg-alt:             var(--smw-mist);
  --smw-bg-input:           var(--smw-mist);
  --smw-bg-inverse:         var(--smw-navy-deep);

  --smw-text:               var(--smw-slate);
  --smw-text-strong:        var(--smw-navy);
  --smw-text-muted:         var(--smw-slate-muted);
  --smw-text-inverse:       var(--smw-white);

  --smw-border:             var(--smw-line);
  --smw-border-strong:      var(--smw-slate-muted);

  /* --- Status -----------------------------------------------------------
     Derived: success reuses the brand green; the rest are tuned to sit
     beside the navy/slate palette rather than shouting over it.            */
  --smw-info:               #2f7fbf;
  --smw-info-soft:          #eaf3fa;
  --smw-success:            var(--smw-green);
  --smw-success-soft:       var(--smw-green-soft);
  --smw-warn:               #d98218;
  --smw-warn-soft:          #fdf4e7;
  --smw-danger:             #cf3b3b;
  --smw-danger-soft:        #fbeded;

  /* --- Typography -------------------------------------------------------
     Roboto, self-hosted. Decided 2026-08-03.

     Before this, the site shipped NO webfont — everything inherited the
     parent's system stack, so it rendered in Segoe UI on Windows, SF on
     Apple and Roboto on Android. Three typefaces, three sets of metrics.
     That was the single largest source of visual inconsistency, and it is
     now closed: every visitor sees the same face.

     Self-hosted rather than the Google Fonts CDN on purpose. A CDN embed
     ships the visitor's IP to Google on every page load, which a Munich
     court ruled a GDPR violation in 2022 (LG München I, 3 O 17493/20) —
     a live exposure for a German-operated site. Self-hosting also removes
     a third-party connection from the critical path.

     JetBrains Mono is not a new choice: the utilities stylesheet already
     specifies it for .SMW-fixed-height-textarea.                           */
  --smw-font-sans:  "Roboto", -apple-system, system-ui, BlinkMacSystemFont,
                    "Segoe UI", Helvetica, Arial, sans-serif,
                    "Apple Color Emoji", "Segoe UI Emoji";
  --smw-font-mono:  "JetBrains Mono", "Menlo", "Monaco", "Consolas",
                    "Courier New", monospace;

  /* Fluid type scale. The child theme's 75px h1 is preserved at the top of
     the range and scales down rather than overflowing a phone.             */
  /* Base is 17px, not the reflexive 16px: that is what the site already
     reads at (set in the GeneratePress Customizer). Dropping to 16px would
     have shrunk the body text on every page of the site for no reason. */
  --smw-text-xs:    0.75rem;                                  /* 12px       */
  --smw-text-sm:    0.875rem;                                 /* 14px       */
  --smw-text-base:  1.0625rem;                                /* 17px       */
  --smw-text-lg:    1.1875rem;                                /* 19px       */
  --smw-h6:         clamp(1.125rem, 0.35vw + 1.05rem, 1.25rem);   /* →20px  */
  --smw-h5:         clamp(1.1875rem, 0.6vw + 1.06rem, 1.375rem);  /* →22px  */
  --smw-h4:         clamp(1.375rem, 1vw + 1.15rem, 1.625rem);     /* →26px  */
  --smw-h3:         clamp(1.625rem, 1.6vw + 1.25rem, 2.125rem);   /* →34px  */
  --smw-h2:         clamp(1.875rem, 2.6vw + 1.3rem, 2.625rem);    /* →42px  */
  --smw-h1:         clamp(2.375rem, 5.2vw + 1.2rem, 4.6875rem);   /* →75px  */

  /* Contextual heading sizes used by the page templates. These were hardcoded
     px in style.css and out-specified the base scale, so hero headings never
     responded to it. Desktop values are unchanged — 50 / 25 / 35 — they are
     simply fluid now and driven from here. */
  --smw-h1-hero:    clamp(1.875rem, 2.4vw + 1.15rem, 3.125rem);   /* → 50px */
  --smw-h2-hero:    clamp(1.25rem, 0.55vw + 1.1rem, 1.5625rem);   /* → 25px */
  --smw-h2-section: clamp(1.5rem, 1.4vw + 1.1rem, 2.1875rem);     /* → 35px */

  --smw-weight-normal:    400;
  --smw-weight-medium:    500;
  --smw-weight-semibold:  600;
  --smw-weight-bold:      700;
  --smw-weight-black:     800;

  /* h1-h3 carried their line-height (1.2em). h4/h5/h6 never had one and
     fell through to the browser default — that gap is closed here.         */
  --smw-leading-tight:    1.2;
  --smw-leading-snug:     1.35;
  --smw-leading-body:     1.65;

  /* --- Spacing (4px base) ----------------------------------------------- */
  --smw-space-1:   4px;
  --smw-space-2:   8px;
  --smw-space-3:   12px;
  --smw-space-4:   16px;
  --smw-space-5:   20px;   /* the theme's default heading margin-bottom      */
  --smw-space-6:   24px;
  --smw-space-8:   32px;
  --smw-space-10:  40px;   /* utility card padding                          */
  --smw-space-12:  50px;   /* SMW-section-padding-small                     */
  --smw-space-16:  100px;  /* SMW-section-padding                           */

  /* --- Radius (from the existing utilities token block) ------------------ */
  --smw-radius-sm:    6px;
  --smw-radius-md:    8px;
  --smw-radius-lg:    12px;
  --smw-radius-xl:    20px;
  --smw-radius-pill:  9999px;

  /* --- Elevation --------------------------------------------------------
     The green glow under buttons is the theme's signature and is kept.     */
  --smw-shadow-sm:      0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --smw-shadow-md:      0 4px 6px -1px rgba(0, 0, 0, 0.05),
                        0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --smw-shadow-lg:      0 10px 15px -3px rgba(0, 0, 0, 0.05),
                        0 4px 6px -4px rgba(0, 0, 0, 0.02);
  --smw-shadow-card:    0 0 24px 0 rgba(0, 0, 0, 0.10);
  --smw-shadow-green:   0 5px 10px var(--smw-green-glow);
  --smw-shadow-muted:   0 5px 10px rgba(150, 166, 191, 0.45);

  /* --- Focus ------------------------------------------------------------
     The parent ships `.using-mouse :focus { outline: 0 }` and the utilities
     defined focus for inputs only, so none of the 270 tool buttons had a
     focus state at all. On a site that is almost entirely interactive
     tools that is the most consequential gap in the stylesheet.            */
  --smw-focus-ring:       0 0 0 3px rgba(3, 201, 106, 0.35);
  --smw-focus-ring-dark:  0 0 0 3px rgba(255, 255, 255, 0.55);
  --smw-focus-width:      2px;

  /* --- Motion ----------------------------------------------------------- */
  --smw-ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --smw-duration:    0.25s;
  --smw-transition:  all var(--smw-duration) var(--smw-ease);

  /* --- Layout ----------------------------------------------------------- */
  --smw-container:      1140px;
  --smw-container-prose: 720px;

  /* --- Control sizing --------------------------------------------------- */
  --smw-control-height:     46px;
  --smw-control-height-sm:  36px;
  --smw-control-height-lg:  54px;
  --smw-control-padding-x:  16px;
}


/* ==========================================================================
   2. WEBFONT — Roboto, self-hosted, variable

   One variable file covers the whole 100-900 range, so the 600 and 800
   weights this system uses are real cuts rather than browser-synthesised
   fakes. Classic static Roboto has no 600 or 800, which is why the variable
   build is the one shipped.

   Two subsets: latin (43 KB) and latin-ext (29 KB). latin-ext is what
   carries the German diacritics, and the unicode-range means a visitor
   reading English-only content never downloads it. 72 KB total, worst case.

   Files live at  smwtheme_child/assets/fonts/  — paths below are relative to
   this stylesheet, so it must be enqueued from the child theme root.

   font-display: swap — text paints immediately in the fallback and reflows
   when Roboto lands, rather than holding the page blank.
   ========================================================================== */

@font-face {
  font-family: "Roboto";
  src: url("assets/fonts/roboto-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 100%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
                 U+FFFD;
}

@font-face {
  font-family: "Roboto";
  src: url("assets/fonts/roboto-latin-ext-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 100%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
                 U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ==========================================================================
   3. BASE / ELEMENT COVERAGE
   Everything a browser would otherwise style on its own.
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--smw-font-sans);
  font-size: var(--smw-text-base);
  font-weight: var(--smw-weight-normal);
  line-height: var(--smw-leading-body);
  color: var(--smw-text);
  background-color: var(--smw-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--smw-green);
  color: var(--smw-white);
}

/* --- Headings -------------------------------------------------------------
   Sizes preserved from the child theme. The parent resets all six to
   `font-weight: inherit`, and only h1/h2/h3 were ever given a weight — so
   h4, h5 and h6 were rendering at body weight, i.e. not bold at all, with
   no line-height. Both are fixed here.                                     */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--smw-font-sans);
  color: var(--smw-text-strong);
  margin-top: 0;
  margin-bottom: var(--smw-space-5);
  text-transform: none;
  text-wrap: balance;
}

h1, .h1 { font-size: var(--smw-h1); font-weight: var(--smw-weight-black);    line-height: var(--smw-leading-tight); letter-spacing: -0.02em; }
h2, .h2 { font-size: var(--smw-h2); font-weight: var(--smw-weight-bold);     line-height: var(--smw-leading-tight); letter-spacing: -0.015em; }
h3, .h3 { font-size: var(--smw-h3); font-weight: var(--smw-weight-semibold); line-height: var(--smw-leading-tight); letter-spacing: -0.01em; }
h4, .h4 { font-size: var(--smw-h4); font-weight: var(--smw-weight-semibold); line-height: var(--smw-leading-snug); }
h5, .h5 { font-size: var(--smw-h5); font-weight: var(--smw-weight-semibold); line-height: var(--smw-leading-snug); }
h6, .h6 { font-size: var(--smw-h6); font-weight: var(--smw-weight-bold);     line-height: var(--smw-leading-snug);
          letter-spacing: 0.02em; text-transform: uppercase; color: var(--smw-slate); }

/* --- Text ---------------------------------------------------------------- */

p { margin-top: 0; margin-bottom: var(--smw-space-5); }
p:last-child { margin-bottom: 0; }

small, .SMW-small { font-size: var(--smw-text-sm); color: var(--smw-text-muted); }

strong, b { font-weight: var(--smw-weight-bold); color: var(--smw-text-strong); }
em, i     { font-style: italic; }

mark {
  background: var(--smw-green-soft);
  color: var(--smw-text-strong);
  padding: 0.1em 0.3em;
  border-radius: var(--smw-radius-sm);
}

del { text-decoration: line-through; color: var(--smw-text-muted); }
ins { text-decoration: none; background: var(--smw-green-soft); padding: 0.1em 0.3em; }

abbr[title] {
  text-decoration: underline dotted;
  text-underline-offset: 0.2em;
  cursor: help;
}

sub, sup { font-size: 0.75em; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }

/* --- Links --------------------------------------------------------------- */

a {
  color: var(--smw-green);
  text-decoration: none;
  transition: color var(--smw-duration) var(--smw-ease);
}
a:hover,
a:active { color: var(--smw-black); }

/* Body copy gets an underline; navigation and components opt out via
   their own rules. An unmarked inline link is not discoverable. */
.SMW-prose a,
.entry-content p > a,
.entry-content li > a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

/* --- Lists --------------------------------------------------------------- */

ul, ol { margin-top: 0; margin-bottom: var(--smw-space-5); padding-left: var(--smw-space-6); }
li { margin-bottom: var(--smw-space-2); }
li:last-child { margin-bottom: 0; }
ul ul, ol ol, ul ol, ol ul { margin-top: var(--smw-space-2); margin-bottom: 0; }

dl { margin: 0 0 var(--smw-space-5); }
dt { font-weight: var(--smw-weight-semibold); color: var(--smw-text-strong); }
dd { margin-left: 0; margin-bottom: var(--smw-space-3); }

/* --- Rules, media -------------------------------------------------------- */

hr {
  border: 0;
  height: 1px;
  background: var(--smw-border);
  margin: var(--smw-space-8) 0;
}

/* Responsive, but display is left alone deliberately. The usual modern-reset
   `img { display: block }` broke inline images across the whole site when
   tested — 13 on the homepage, 15 on stockphotos, 9 on the themes grid, plus
   4 inside post content, which is the one place the markup cannot be fixed.
   Block-level images there force a line break mid-sentence. Opt in instead. */
img, svg, video, canvas {
  max-width: 100%;
  height: auto;
}

figure > img,
.SMW-card img,
.SMW-media img { display: block; }

figure { margin: 0 0 var(--smw-space-6); }
figcaption {
  font-size: var(--smw-text-sm);
  color: var(--smw-text-muted);
  margin-top: var(--smw-space-2);
}

/* --- Quotes -------------------------------------------------------------- */

blockquote {
  margin: 0 0 var(--smw-space-6);
  padding: var(--smw-space-5) var(--smw-space-6);
  border-left: 5px solid var(--smw-green);
  background: var(--smw-bg-alt);
  border-radius: 0 var(--smw-radius-md) var(--smw-radius-md) 0;
  color: var(--smw-text-strong);
  font-size: var(--smw-text-lg);
}
blockquote cite {
  display: block;
  margin-top: var(--smw-space-3);
  font-size: var(--smw-text-sm);
  font-style: normal;
  color: var(--smw-text-muted);
}

/* --- Code ---------------------------------------------------------------- */

code, kbd, samp, var, pre { font-family: var(--smw-font-mono); font-size: 0.9em; }

code {
  background: var(--smw-bg-alt);
  color: var(--smw-navy);
  padding: 0.15em 0.4em;
  border-radius: var(--smw-radius-sm);
  border: 1px solid var(--smw-border);
}

pre {
  background: var(--smw-navy-deep);
  color: #e6edf3;
  padding: var(--smw-space-5);
  border-radius: var(--smw-radius-lg);
  overflow-x: auto;
  margin: 0 0 var(--smw-space-6);
  line-height: var(--smw-leading-snug);
}
pre code {
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  font-size: var(--smw-text-sm);
}

kbd {
  background: var(--smw-white);
  border: 1px solid var(--smw-border-strong);
  border-bottom-width: 2px;
  border-radius: var(--smw-radius-sm);
  padding: 0.15em 0.45em;
  font-size: var(--smw-text-xs);
  color: var(--smw-text-strong);
}

var { font-style: italic; color: var(--smw-navy); }

/* --- Tables -------------------------------------------------------------- */

table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--smw-space-6);
  font-size: var(--smw-text-sm);
}
caption {
  caption-side: bottom;
  padding-top: var(--smw-space-3);
  font-size: var(--smw-text-sm);
  color: var(--smw-text-muted);
  text-align: left;
}
th, td {
  padding: var(--smw-space-3) var(--smw-space-4);
  border-bottom: 1px solid var(--smw-border);
  text-align: left;
  vertical-align: top;
}
thead th {
  font-weight: var(--smw-weight-semibold);
  color: var(--smw-text-strong);
  border-bottom: 2px solid var(--smw-border-strong);
  white-space: nowrap;
}
tbody tr:hover { background: var(--smw-bg-alt); }

/* Wide tables must scroll inside their own container, never the page. */
.SMW-table-scroll { overflow-x: auto; margin-bottom: var(--smw-space-6); }
.SMW-table-scroll > table { margin-bottom: 0; }

/* --- Disclosure ---------------------------------------------------------- */

details {
  border: 1px solid var(--smw-border);
  border-radius: var(--smw-radius-md);
  padding: var(--smw-space-4) var(--smw-space-5);
  margin-bottom: var(--smw-space-3);
  background: var(--smw-bg);
  transition: var(--smw-transition);
}
details:hover { border-color: var(--smw-border-strong); }
details[open] { background: var(--smw-bg-alt); }

/* The native triangle sits hard against the left edge and cannot be styled
   consistently across browsers. Replaced with a chevron on the trailing
   edge, which also puts the affordance where the eye finishes the label. */
summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--smw-space-4);
  cursor: pointer;
  font-weight: var(--smw-weight-semibold);
  color: var(--smw-text-strong);
  list-style: none;
}
summary::-webkit-details-marker { display: none; }
summary::marker { content: ""; }

summary::after {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--smw-green);
  border-bottom: 2px solid var(--smw-green);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--smw-duration) var(--smw-ease);
}
details[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
details[open] > summary { margin-bottom: var(--smw-space-3); }
summary:focus-visible { outline: var(--smw-focus-width) solid var(--smw-green); outline-offset: 4px; }

/* --- Progress / meter / output ------------------------------------------- */

progress, meter {
  width: 100%;
  height: 10px;
  border: 0;
  border-radius: var(--smw-radius-pill);
  background: var(--smw-bg-input);
  overflow: hidden;
  display: block;
}
progress::-webkit-progress-bar { background: var(--smw-bg-input); }
progress::-webkit-progress-value { background: var(--smw-green); }
progress::-moz-progress-bar { background: var(--smw-green); }
meter::-webkit-meter-bar { background: var(--smw-bg-input); border: 0; }
meter::-webkit-meter-optimum-value { background: var(--smw-green); }
meter::-webkit-meter-suboptimum-value { background: var(--smw-warn); }
meter::-webkit-meter-even-less-good-value { background: var(--smw-danger); }

output {
  display: inline-block;
  font-family: var(--smw-font-mono);
  font-size: var(--smw-text-sm);
  color: var(--smw-text-strong);
}

address { font-style: normal; margin-bottom: var(--smw-space-5); }


/* ==========================================================================
   4. FOCUS
   One visible ring, everywhere, for keyboard users only. This overrides the
   parent theme's `.using-mouse :focus { outline: 0 }`.
   ========================================================================== */

:focus-visible {
  outline: var(--smw-focus-width) solid var(--smw-green);
  outline-offset: 2px;
  border-radius: var(--smw-radius-sm);
}

.using-mouse :focus-visible {
  outline: var(--smw-focus-width) solid var(--smw-green);
  outline-offset: 2px;
}

/* Never remove the ring without replacing it. */
:focus:not(:focus-visible) { outline: none; }


/* ==========================================================================
   5. BUTTONS
   One component, every variant, every state — replacing the bare `button`
   element selectors that 221 of the 270 tool buttons currently rely on.
   ========================================================================== */

/* Single class selector, deliberately. An earlier version listed
   `button.SMW-btn, a.SMW-btn, input[type="submit"].SMW-btn` here to outrank
   the parent theme's bare `button` rule — but element+class scores (0,1,1)
   and beat every (0,1,0) modifier below it, so --sm and --lg silently did
   nothing and all four sizes rendered at 46px. `.SMW-btn` alone already
   outranks `button` (0,0,1). Never element-qualify a component base. */
.SMW-btn {
  /* structure */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--smw-space-2);
  min-height: var(--smw-control-height);
  padding: 0 var(--smw-space-6);
  border: 1px solid transparent;
  border-radius: var(--smw-radius-md);
  /* type */
  font-family: var(--smw-font-sans);
  font-size: var(--smw-text-sm);
  font-weight: var(--smw-weight-semibold);
  line-height: 1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  /* behaviour */
  cursor: pointer;
  user-select: none;
  transition: var(--smw-transition);
  -webkit-appearance: none;
  appearance: none;
}

/* --- Primary: the theme's signature green with its glow ------------------- */
.SMW-btn--primary {
  background: var(--smw-green);
  color: var(--smw-white);
  box-shadow: var(--smw-shadow-green);
}
.SMW-btn--primary:hover {
  background: var(--smw-green-hover);
  color: var(--smw-white);
  transform: translateY(2px);          /* the existing theme's own motion */
  box-shadow: 0 2px 6px var(--smw-green-glow);
}
.SMW-btn--primary:active {
  background: var(--smw-green-active);
  transform: translateY(2px);
  box-shadow: none;
}
.SMW-btn--primary:focus-visible {
  outline: none;
  box-shadow: var(--smw-shadow-green), var(--smw-focus-ring);
}

/* --- Secondary ----------------------------------------------------------- */
.SMW-btn--secondary {
  background: var(--smw-white);
  color: var(--smw-green);
  border-color: var(--smw-border);
  box-shadow: var(--smw-shadow-sm);
}
.SMW-btn--secondary:hover {
  background: var(--smw-bg-alt);
  color: var(--smw-green-hover);
  border-color: var(--smw-green);
  transform: translateY(2px);
}
.SMW-btn--secondary:active { background: var(--smw-mist); transform: translateY(2px); box-shadow: none; }
.SMW-btn--secondary:focus-visible { outline: none; box-shadow: var(--smw-focus-ring); }

/* --- Ghost --------------------------------------------------------------- */
.SMW-btn--ghost {
  background: transparent;
  color: var(--smw-slate);
  border-color: transparent;
}
.SMW-btn--ghost:hover { background: var(--smw-bg-alt); color: var(--smw-text-strong); }
.SMW-btn--ghost:active { background: var(--smw-mist); }
.SMW-btn--ghost:focus-visible { outline: none; box-shadow: var(--smw-focus-ring); }

/* --- Danger -------------------------------------------------------------- */
.SMW-btn--danger {
  background: var(--smw-danger);
  color: var(--smw-white);
  box-shadow: 0 5px 10px rgba(207, 59, 59, 0.35);
}
.SMW-btn--danger:hover { background: #b93030; transform: translateY(2px); }
.SMW-btn--danger:focus-visible { outline: none; box-shadow: var(--smw-focus-ring); }

/* --- Text button (existing .SMW-text-button, promoted) -------------------- */
.SMW-btn--text {
  background: none;
  border: 0;
  box-shadow: none;
  min-height: auto;
  padding: 0;
  color: var(--smw-green);
  text-transform: uppercase;
  font-size: var(--smw-text-xs);
  letter-spacing: 0.04em;
}
.SMW-btn--text:hover { color: var(--smw-black); }

/* --- Sizes --------------------------------------------------------------- */
.SMW-btn--sm { min-height: var(--smw-control-height-sm); padding: 0 var(--smw-space-4); font-size: var(--smw-text-xs); }
.SMW-btn--lg { min-height: var(--smw-control-height-lg); padding: 0 var(--smw-space-8); font-size: var(--smw-text-base); }

/* --- Shape modifiers ----------------------------------------------------- */
.SMW-btn--block { display: flex; width: 100%; }
.SMW-btn--pill  { border-radius: var(--smw-radius-pill); }
.SMW-btn--icon  { padding: 0; width: var(--smw-control-height); }
.SMW-btn--icon.SMW-btn--sm { width: var(--smw-control-height-sm); }

/* --- Shared states ------------------------------------------------------- */
.SMW-btn:disabled,
.SMW-btn[aria-disabled="true"],
.SMW-btn--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
  pointer-events: none;
}

.SMW-btn--loading {
  color: transparent !important;
  pointer-events: none;
  position: relative;
}
.SMW-btn--loading::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-top-color: var(--smw-white);
  border-radius: 50%;
  animation: smw-spin 0.6s linear infinite;
  color: var(--smw-white);
}
.SMW-btn--secondary.SMW-btn--loading::after,
.SMW-btn--ghost.SMW-btn--loading::after { border-top-color: var(--smw-green); color: var(--smw-green); }

@keyframes smw-spin { to { transform: rotate(360deg); } }

/* --- Groups -------------------------------------------------------------- */
.SMW-button-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--smw-space-3);
  align-items: center;
}
.SMW-button-group--tight { gap: var(--smw-space-2); }
.SMW-button-group--end   { justify-content: flex-end; }


/* ==========================================================================
   6. FORM CONTROLS
   ========================================================================== */

.SMW-field { margin-bottom: var(--smw-space-4); }

.SMW-label {
  display: block;
  margin-bottom: var(--smw-space-2);
  font-size: var(--smw-text-sm);
  font-weight: var(--smw-weight-semibold);
  color: var(--smw-text-strong);
}
.SMW-label .SMW-required { color: var(--smw-danger); margin-left: 2px; }

.SMW-hint {
  display: block;
  margin-top: var(--smw-space-2);
  font-size: var(--smw-text-xs);
  color: var(--smw-text-muted);
}
.SMW-error-text {
  display: block;
  margin-top: var(--smw-space-2);
  font-size: var(--smw-text-xs);
  color: var(--smw-danger);
  font-weight: var(--smw-weight-medium);
}

.SMW-input,
.SMW-select,
.SMW-textarea {
  display: block;
  width: 100%;
  min-height: var(--smw-control-height);
  font-family: var(--smw-font-sans);
  font-size: var(--smw-text-base);
  line-height: var(--smw-leading-snug);
  color: var(--smw-text-strong);
  background-color: var(--smw-bg-input);
  border: 1px solid transparent;
  border-radius: var(--smw-radius-md);
  transition: var(--smw-transition);
  -webkit-appearance: none;
  appearance: none;
}

/* Single-line controls take horizontal padding only. Vertical padding plus
   borders was pushing them to 48px against a 46px button, so a search field
   and its submit button sat two pixels out of line in every toolbar.
   min-height does the vertical work; the text centres itself. */
.SMW-input,
.SMW-select { padding: 0 var(--smw-control-padding-x); }

.SMW-input.SMW-input--sm,
.SMW-select--sm { min-height: var(--smw-control-height-sm); font-size: var(--smw-text-sm); }

.SMW-input::placeholder,
.SMW-textarea::placeholder { color: var(--smw-text-muted); opacity: 1; }

.SMW-input:hover,
.SMW-select:hover,
.SMW-textarea:hover { border-color: var(--smw-border); }

.SMW-input:focus,
.SMW-select:focus,
.SMW-textarea:focus {
  outline: none;
  background-color: var(--smw-white);
  border-color: var(--smw-green);
  box-shadow: var(--smw-focus-ring);
}

.SMW-input:disabled,
.SMW-select:disabled,
.SMW-textarea:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background: var(--smw-mist);
}

.SMW-input[aria-invalid="true"],
.SMW-input--error,
.SMW-textarea--error {
  border-color: var(--smw-danger);
  background: var(--smw-danger-soft);
}
.SMW-input[aria-invalid="true"]:focus,
.SMW-input--error:focus {
  box-shadow: 0 0 0 3px rgba(207, 59, 59, 0.25);
}

.SMW-input[readonly],
.SMW-textarea[readonly] { background: var(--smw-mist); color: var(--smw-slate); }

.SMW-textarea {
  min-height: 140px;
  padding: var(--smw-space-3) var(--smw-control-padding-x);
  resize: vertical;
  line-height: var(--smw-leading-body);
}
.SMW-textarea--code,
.SMW-fixed-height-textarea {
  font-family: var(--smw-font-mono);
  font-size: var(--smw-text-sm);
  min-height: 200px;
}

/* Native select needs its own arrow back once appearance is stripped. */
.SMW-select {
  padding-right: var(--smw-space-10);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23526d7a' d='M1.41 0 6 4.59 10.59 0 12 1.42 6 7.42 0 1.42z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--smw-space-4) center;
  background-size: 12px 8px;
  cursor: pointer;
}
.SMW-select option { color: var(--smw-text-strong); background: var(--smw-white); padding: var(--smw-space-2); }
.SMW-select optgroup {
  color: var(--smw-text-muted);
  font-weight: var(--smw-weight-semibold);
  font-style: normal;
}

/* --- Checkbox + radio ---------------------------------------------------- */

.SMW-check {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--smw-space-3);
  cursor: pointer;
  margin-bottom: var(--smw-space-3);
  font-size: var(--smw-text-sm);
  color: var(--smw-text-strong);
}
.SMW-check input[type="checkbox"],
.SMW-check input[type="radio"] {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 1px solid var(--smw-border-strong);
  background: var(--smw-white);
  cursor: pointer;
  transition: var(--smw-transition);
  -webkit-appearance: none;
  appearance: none;
  display: grid;
  place-content: center;
}
.SMW-check input[type="checkbox"] { border-radius: var(--smw-radius-sm); }
.SMW-check input[type="radio"]    { border-radius: 50%; }

.SMW-check input[type="checkbox"]::before {
  content: "";
  width: 10px;
  height: 10px;
  transform: scale(0);
  transition: transform 0.12s var(--smw-ease);
  box-shadow: inset 1em 1em var(--smw-white);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
.SMW-check input[type="radio"]::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transform: scale(0);
  transition: transform 0.12s var(--smw-ease);
  box-shadow: inset 1em 1em var(--smw-white);
}
.SMW-check input:checked {
  background: var(--smw-green);
  border-color: var(--smw-green);
}
.SMW-check input:checked::before { transform: scale(1); }
.SMW-check input:focus-visible { outline: none; box-shadow: var(--smw-focus-ring); }
.SMW-check input:disabled { opacity: 0.5; cursor: not-allowed; }

/* --- Switch -------------------------------------------------------------- */

.SMW-switch { display: inline-flex; align-items: center; gap: var(--smw-space-3); cursor: pointer; }
.SMW-switch input {
  -webkit-appearance: none;
  appearance: none;
  width: 44px;
  height: 24px;
  border-radius: var(--smw-radius-pill);
  background: var(--smw-border-strong);
  position: relative;
  cursor: pointer;
  transition: var(--smw-transition);
  margin: 0;
  flex: 0 0 auto;
}
.SMW-switch input::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--smw-white);
  transition: transform var(--smw-duration) var(--smw-ease);
  box-shadow: var(--smw-shadow-sm);
}
.SMW-switch input:checked { background: var(--smw-green); }
.SMW-switch input:checked::after { transform: translateX(20px); }
.SMW-switch input:focus-visible { outline: none; box-shadow: var(--smw-focus-ring); }
.SMW-switch input:disabled { opacity: 0.5; cursor: not-allowed; }

/* --- Range --------------------------------------------------------------- */

.SMW-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: var(--smw-radius-pill);
  background: var(--smw-bg-input);
  outline: none;
  margin: var(--smw-space-3) 0;
}
.SMW-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--smw-green);
  cursor: pointer;
  box-shadow: var(--smw-shadow-green);
  transition: transform 0.12s var(--smw-ease);
}
.SMW-range::-webkit-slider-thumb:hover { transform: scale(1.12); }
.SMW-range::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 50%;
  background: var(--smw-green);
  cursor: pointer;
}
.SMW-range:focus-visible { box-shadow: var(--smw-focus-ring); }

.SMW-range-value-display {
  display: inline-block;
  min-width: 56px;
  padding: var(--smw-space-1) var(--smw-space-3);
  font-family: var(--smw-font-mono);
  font-size: var(--smw-text-sm);
  color: var(--smw-text-strong);
  background: var(--smw-bg-alt);
  border-radius: var(--smw-radius-sm);
  text-align: center;
}

fieldset {
  border: 1px solid var(--smw-border);
  border-radius: var(--smw-radius-md);
  padding: var(--smw-space-5);
  margin: 0 0 var(--smw-space-5);
}
legend {
  padding: 0 var(--smw-space-3);
  font-weight: var(--smw-weight-semibold);
  color: var(--smw-text-strong);
  font-size: var(--smw-text-sm);
}


/* ==========================================================================
   7. SURFACES + FEEDBACK
   ========================================================================== */

.SMW-card {
  background: var(--smw-bg);
  border-radius: var(--smw-radius-xl);
  padding: var(--smw-space-10);
  box-shadow: var(--smw-shadow-lg);
}
.SMW-card--flat    { box-shadow: none; border: 1px solid var(--smw-border); }
.SMW-card--alt     { background: var(--smw-bg-alt); box-shadow: none; }
.SMW-card--compact { padding: var(--smw-space-6); }

/* --- Notices ------------------------------------------------------------
   These four names ARE the notice system. There is no second family and no
   bridge — an earlier draft had a parallel .SMW-notice set, which meant two
   vocabularies for one job. Deleted.

   They are the one part of the vocabulary that cannot change: 1,054
   instances are hardcoded inside published post content in the database.
   Everything that IS editable — tools, templates, pages — adopts these
   instead. The immovable constraint sets the vocabulary for everyone.

   Real markup, taken from the posts, is a paragraph with an inline lead-in:
       <p class="SMW-hintbox"><strong>Hint: </strong>Test your changes…</p>
   They must also work as a <div> wrapping several blocks, which is what
   tool pages need. Both are supported.                                    */

.SMW-hintbox,
.SMW-infobox,
.SMW-notice-important,
.SMW-definition {
  position: relative;
  padding: 25px;                      /* the original theme's value, kept  */
  margin: 0 0 var(--smw-space-5);
  border-left: 5px solid var(--smw-slate-muted);
  background: var(--smw-bg-alt);
  border-radius: 0 var(--smw-radius-md) var(--smw-radius-md) 0;
  color: var(--smw-text-strong);
  line-height: var(--smw-leading-body);
}

/* Used as a <div>, the last child must not add trailing space. */
.SMW-hintbox > :last-child,
.SMW-infobox > :last-child,
.SMW-notice-important > :last-child,
.SMW-definition > :last-child { margin-bottom: 0; }

/* The inline lead-in takes the box's own accent, so a run of boxes down a
   long post stays distinguishable at a glance. */
.SMW-hintbox > strong:first-child,
.SMW-infobox > strong:first-child,
.SMW-notice-important > strong:first-child,
.SMW-definition > strong:first-child { letter-spacing: 0.01em; }

.SMW-hintbox                        { border-left-color: var(--smw-info);        background: var(--smw-info-soft); }
.SMW-hintbox > strong:first-child   { color: var(--smw-info); }

.SMW-infobox                        { border-left-color: var(--smw-slate);       background: var(--smw-bg-alt); }
.SMW-infobox > strong:first-child   { color: var(--smw-slate); }

.SMW-definition                     { border-left-color: var(--smw-slate-muted); background: var(--smw-bg-alt); }
.SMW-definition > strong:first-child { color: var(--smw-navy); }

.SMW-notice-important               { border-left-color: var(--smw-green);       background: var(--smw-mist); }
.SMW-notice-important > strong:first-child { color: var(--smw-green-hover); }

/* Two states the posts never needed but every tool does — success and
   failure feedback. Modifiers on the existing family, not a new family. */
.SMW-notice-important--warn         { border-left-color: var(--smw-warn);   background: var(--smw-warn-soft); }
.SMW-notice-important--warn > strong:first-child  { color: var(--smw-warn); }

.SMW-notice-important--error        { border-left-color: var(--smw-danger); background: var(--smw-danger-soft); }
.SMW-notice-important--error > strong:first-child { color: var(--smw-danger); }

/* The tools' own note class — 30 uses, all editable — folds into the same
   look now and the markup migrates to .SMW-hintbox during the rewrite. */
.SMW-tool-note {
  padding: 25px;
  margin: 0 0 var(--smw-space-5);
  border-left: 5px solid var(--smw-info);
  background: var(--smw-info-soft);
  border-radius: 0 var(--smw-radius-md) var(--smw-radius-md) 0;
  color: var(--smw-text-strong);
}

/* --- Badge (existing values preserved) ----------------------------------- */

.SMW-badge {
  display: inline-block;
  background: var(--smw-slate-muted);
  color: var(--smw-white);
  padding: 5px var(--smw-space-2);
  border-radius: 5px;
  font-weight: var(--smw-weight-medium);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.04em;
  line-height: 1.4;
  box-shadow: var(--smw-shadow-muted);
}
.SMW-badge--green { background: var(--smw-green); box-shadow: var(--smw-shadow-green); }
.SMW-badge--navy  { background: var(--smw-navy);  box-shadow: 0 5px 10px rgba(25, 50, 71, 0.45); }
.SMW-badge--quiet { background: var(--smw-bg-alt); color: var(--smw-slate); box-shadow: none; }

/* --- Tabs ---------------------------------------------------------------- */

.SMW-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--smw-space-1);
  border-bottom: 1px solid var(--smw-border);
  margin-bottom: var(--smw-space-5);
}
.SMW-tab-btn {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: var(--smw-space-3) var(--smw-space-4);
  font-family: var(--smw-font-sans);
  font-size: var(--smw-text-sm);
  font-weight: var(--smw-weight-semibold);
  color: var(--smw-text-muted);
  cursor: pointer;
  transition: var(--smw-transition);
  margin-bottom: -1px;
}
.SMW-tab-btn:hover { color: var(--smw-text-strong); }
.SMW-tab-btn.active,
.SMW-tab-btn[aria-selected="true"] {
  color: var(--smw-green);
  border-bottom-color: var(--smw-green);
}
.SMW-tab-btn:focus-visible { outline: none; box-shadow: var(--smw-focus-ring); border-radius: var(--smw-radius-sm) var(--smw-radius-sm) 0 0; }

/* --- Output area --------------------------------------------------------- */

.SMW-output-area,
.SMW-output-display {
  margin-top: var(--smw-space-3);
  padding: var(--smw-space-4);
  background: var(--smw-bg-alt);
  border: 1px solid var(--smw-border);
  border-radius: var(--smw-radius-md);
  font-family: var(--smw-font-mono);
  font-size: var(--smw-text-sm);
  color: var(--smw-text-strong);
  word-break: break-word;
  white-space: pre-wrap;
}
.SMW-output-area:empty::before,
.SMW-output-display:empty::before {
  content: attr(data-placeholder);
  color: var(--smw-text-muted);
  font-style: italic;
}

/* --- Toast --------------------------------------------------------------- */

.SMW-utility-toast,
.SMW-toast {
  position: fixed;
  bottom: var(--smw-space-6);
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  z-index: 9999;
  padding: var(--smw-space-3) var(--smw-space-6);
  background: var(--smw-navy-deep);
  color: var(--smw-white);
  border-radius: var(--smw-radius-pill);
  font-size: var(--smw-text-sm);
  font-weight: var(--smw-weight-medium);
  box-shadow: var(--smw-shadow-card);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--smw-duration) var(--smw-ease),
              transform var(--smw-duration) var(--smw-ease);
}
.SMW-utility-toast.show,
.SMW-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* --- Skeleton ------------------------------------------------------------ */

.SMW-skeleton {
  background: linear-gradient(90deg, var(--smw-mist) 25%, var(--smw-line) 37%, var(--smw-mist) 63%);
  background-size: 400% 100%;
  animation: smw-shimmer 1.4s ease infinite;
  border-radius: var(--smw-radius-sm);
  min-height: 1em;
}
@keyframes smw-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }


/* ==========================================================================
   8. UTILITIES
   ========================================================================== */

.SMW-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.SMW-skip-link {
  position: absolute;
  left: -9999px;
  z-index: 10000;
  padding: var(--smw-space-3) var(--smw-space-5);
  background: var(--smw-navy-deep);
  color: var(--smw-white);
  border-radius: 0 0 var(--smw-radius-md) 0;
}
.SMW-skip-link:focus { left: 0; top: 0; color: var(--smw-white); }

.SMW-stack > * + * { margin-top: var(--smw-space-4); }
.SMW-prose { max-width: var(--smw-container-prose); }
.SMW-text-muted { color: var(--smw-text-muted); }
.SMW-mono { font-family: var(--smw-font-mono); }


/* ==========================================================================
   9. LEGACY BRIDGE
   Maps the classes already baked into post content and tool markup onto the
   components above. Without this, adopting the system would unstyle 250
   posts. Everything here is a compatibility shim — new markup uses the
   canonical names, and this section shrinks as the tools are rewritten.
   ========================================================================== */

/* The notice boxes used to be duplicated down here as a "bridge". They are
   not legacy — they are the notice system, defined once in section 7.     */

/* The original text button. */
.SMW-text-button {
  color: var(--smw-green);
  text-transform: uppercase;
  font-size: var(--smw-text-xs);
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
}
.SMW-text-button:hover { color: var(--smw-black); }

/* Lowercase tool classes — 262 uses. These get the real component styling
   now, and the markup migrates to SMW-btn--* during the utilities rewrite,
   at which point these three rules are deleted. */
.smw-btn-secondary,
.smw-main-btn,
.smw-add-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--smw-space-2);
  min-height: var(--smw-control-height);
  padding: 0 var(--smw-space-6);
  border: 1px solid transparent;
  border-radius: var(--smw-radius-md);
  font-family: var(--smw-font-sans);
  font-size: var(--smw-text-sm);
  font-weight: var(--smw-weight-semibold);
  line-height: 1;
  cursor: pointer;
  transition: var(--smw-transition);
}
.smw-main-btn,
.smw-add-btn {
  background: var(--smw-green);
  color: var(--smw-white);
  box-shadow: var(--smw-shadow-green);
}
.smw-btn-secondary {
  background: var(--smw-white);
  color: var(--smw-green);
  border-color: var(--smw-border);
  box-shadow: var(--smw-shadow-sm);
}
.smw-main-btn:hover,
.smw-add-btn:hover { background: var(--smw-green-hover); transform: translateY(2px); }
.smw-btn-secondary:hover { background: var(--smw-bg-alt); border-color: var(--smw-green); transform: translateY(2px); }
.smw-btn-secondary:focus-visible,
.smw-main-btn:focus-visible,
.smw-add-btn:focus-visible { outline: none; box-shadow: var(--smw-focus-ring); }

/* Unclassed buttons inside tool cards. 221 of 270 tool buttons have no
   class at all today. This keeps them presentable until the rewrite gives
   each one an explicit .SMW-btn class — at which point this rule goes. */
.SMW-utility-card button:not([class]),
.SMW-utility-card input[type="submit"]:not([class]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--smw-space-2);
  min-height: var(--smw-control-height);
  padding: 0 var(--smw-space-6);
  border: 1px solid transparent;
  border-radius: var(--smw-radius-md);
  background: var(--smw-green);
  color: var(--smw-white);
  font-family: var(--smw-font-sans);
  font-size: var(--smw-text-sm);
  font-weight: var(--smw-weight-semibold);
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--smw-shadow-green);
  transition: var(--smw-transition);
}
.SMW-utility-card button:not([class]):hover {
  background: var(--smw-green-hover);
  transform: translateY(2px);
}
.SMW-utility-card button:not([class]):focus-visible {
  outline: none;
  box-shadow: var(--smw-shadow-green), var(--smw-focus-ring);
}

/* Old token names still referenced by the utilities' inline block, aliased
   to the canon so both resolve to one value during the transition. */
:root {
  --smw-primary:            var(--smw-green);
  --smw-primary-hover:      var(--smw-green-hover);
  --smw-primary-light:      var(--smw-green-soft);
  --smw-bg-surface:         var(--smw-bg);
  --smw-bg-surface-alt:     var(--smw-bg-alt);
  --smw-border-light:       var(--smw-border);
  --smw-border-input:       var(--smw-border-strong);
  --smw-text-main:          var(--smw-text-strong);
  --smw-shadow-input-focus: var(--smw-focus-ring);
}


/* ==========================================================================
   10. MOTION PREFERENCES
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .SMW-btn:hover,
  .SMW-badge:hover { transform: none !important; }
}


/* ==========================================================================
   11. DARK MODE — DELIBERATELY NOT IMPLEMENTED
   --------------------------------------------------------------------------
   The stance, so it is a decision and not an oversight: the site is light-
   only today, every tool's inline CSS assumes a white canvas, and shipping a
   half-covered dark theme across 158 tool pages would look worse than none.

   The groundwork is here: every colour above is a token, and no component
   hardcodes a hex value. When dark mode is wanted, it is one block —
   @media (prefers-color-scheme: dark) { :root { ...reassign tokens... } } —
   and nothing else in this file changes.
   ========================================================================== */


/* ==========================================================================
   12. PRINT
   ========================================================================== */

@media print {
  body { background: #fff; color: #000; }
  .SMW-btn, .SMW-tabs, .SMW-toast, .SMW-skip-link { display: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #555; }
  pre, blockquote, table { break-inside: avoid; }
}