@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');


/* ============================================
   BRUT — Design Tokens: Primitives
   Raw values — hex, px, font stacks, motion.
   No var() references. Every other layer builds on these.
   ============================================ */
:root {
  /* ---------- COLOR ---------- */

  /* Ink + paper — the brutalist baseline. Pure black, off-white paper. */
  --ink:        #000000;          /* every border, every shadow, every outline */
  --paper:      #FAF7F0;          /* default page background — warm, off-white */
  --paper-2:    #F2EEE3;          /* secondary surface (cards on paper) */
  --bone:       #FFFFFF;          /* pure white — used sparingly, e.g. inputs */

  /* Neutrals — concrete tones. Cool greys with a hint of warmth. */
  --concrete-50:  #ECEAE3;
  --concrete-100: #DCD8CC;
  --concrete-200: #BFB9A8;
  --concrete-300: #8A8576;
  --concrete-400: #4F4D45;
  --concrete-500: #1F1E1A;

  /* Primary — saturated, candy-flat. No gradients. */
  --primary:        #FFD23F;       /* "highlighter" yellow — main accent */
  --primary-soft:   #FFE680;
  --primary-deep:   #E0B400;

  /* Secondary palette — the hallmark neo-brutalist pop colors */
  --pop-pink:    #FF6B9D;
  --pop-lime:    #C6F432;
  --pop-blue:    #4D7CFF;
  --pop-orange:  #FF7A2E;
  --pop-purple:  #B57BFF;
  --pop-mint:    #7FE3C4;

  /* Semantic — signal colors with hard edges */
  --success:    #2ECC71;
  --success-bg: #D9F7E5;
  --warning:    #FFB020;
  --warning-bg: #FFF1CC;
  --danger:     #FF3B30;
  --danger-bg:  #FFD9D6;
  --info:       #4D7CFF;
  --info-bg:    #DDE6FF;

  /* ---------- TYPE ---------- */

  --font-display: 'Archivo Black', 'Helvetica Neue', Impact, sans-serif;
  --font-sans:    'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* Type scale — chunky, generous, no dainty steps */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   22px;
  --fs-xl:   28px;
  --fs-2xl:  36px;
  --fs-3xl:  48px;
  --fs-4xl:  64px;
  --fs-5xl:  88px;
  --fs-6xl:  128px;
  --fs-2xs:   10px;
  --fs-badge: 11px;
  --fs-tab:   13px;
  --fs-input: 15px;

  --lh-tight:  0.95;
  --lh-snug:   1.1;
  --lh-normal: 1.35;
  --lh-loose:  1.6;

  --tracking-tightest: -0.04em; /* hero display only */
  --tracking-tight:    -0.02em;
  --tracking-normal:   0;
  --tracking-wide:     0.04em;
  --tracking-mid:      0.06em;
  --tracking-wider:    0.08em;
  --tracking-widest:   0.12em;   /* for ALL CAPS labels */

  /* Font weights — Space Grotesk ships 400/500/600/700 */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold:    700;
  --fw-display: 900; /* Archivo Black is a single 900-weight */

  /* Numerals — tabular for tables and stat blocks */
  --num-tabular:    "tnum" 1, "lnum" 1;
  --num-proportional: "pnum" 1, "lnum" 1;

  /* ---------- SHAPE ---------- */

  /* Border widths — thick, deliberate */
  --bw-1: 2px;
  --bw-2: 3px;
  --bw-3: 4px;     /* default brutalist border */
  --bw-4: 6px;
  --bw-5: 8px;

  /* Corner radii — mostly hard. A touch of softening allowed sparingly. */
  --r-0: 0px;
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 8px;
  --radius-circle: 50%;   /* full circle — used for round thumbs/dots */

  /* ---------- SPACING ---------- */

  /* Spacing — 4px base */
  --sp-px: 1px;
  --sp-1:  4px;
  --sp-1h: 6px;
  --sp-2:  8px;
  --sp-2h: 10px;
  --sp-3:  12px;
  --sp-3h: 14px;
  --sp-4:  16px;
  --sp-4h: 18px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  28px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;

  /* ---------- MOTION ---------- */

  /* Motion — snap, don't ease. */
  --ease-snap:    cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-instant: steps(1, end);
  --dur-fast:   80ms;
  --dur-snap:   100ms;  /* between fast and base — interactive knob slides */
  --dur-notice: 120ms;  /* short notice animations like toast entrance */
  --dur-base:   140ms;
  --dur-slow:   220ms;

  /* ---------- BREAKPOINTS ---------- */

  --bp-sm:  640px;
  --bp-md:  768px;
  --bp-lg:  1024px;

  /* ---------- Z-INDEX ---------- */

  /* Z-index — stacking contexts. Higher number = on top.
     Components must reference these tokens, never raw integers. */
  --z-base:     0;
  --z-sticky:   100;   /* sticky headers, sticky table headers */
  --z-dropdown: 200;   /* combobox menus, select dropdowns */
  --z-popover:  300;   /* popovers, tooltips */
  --z-scrim:    350;   /* backdrop for drawers + modals — sits below them */
  --z-overlay:  400;   /* drawers, partial-screen overlays */
  --z-modal:    500;   /* modal dialogs */
  --z-toast:    600;   /* transient notifications — always on top */
}
/* ============================================
   BRUT — Design Tokens: Semantic
   Role-based aliases that reference primitives.
   This is the layer themes override (M4).
   ============================================ */
:root {
  /* ---------- FOREGROUND / BACKGROUND ---------- */

  --bg-1:       var(--paper);
  --bg-2:       var(--paper-2);
  --bg-3:       var(--bone);
  --fg-1:       var(--ink);
  --fg-2:       var(--concrete-400);
  --fg-3:       var(--concrete-300);
  --border:     var(--ink);

  /* ---------- STATE ALIASES ---------- */

  /* Semantic state aliases — pair these for form validation, alerts, badges.
     Components use these instead of reaching for raw --success / --danger. */
  --bg-success:     var(--success-bg);
  --text-success:   var(--success);
  --border-success: var(--success);
  --bg-error:       var(--danger-bg);
  --text-error:     var(--danger);
  --border-error:   var(--danger);
  --bg-warning:     var(--warning-bg);
  --text-warning:   var(--warning);
  --border-warning: var(--warning);
  --bg-info:        var(--info-bg);
  --text-info:      var(--info);
  --border-info:    var(--info);

  /* ---------- ACCENT ---------- */

  --accent:      var(--primary);
  --accent-soft: var(--primary-soft);
  --accent-deep: var(--primary-deep);

  /* ---------- SCRIM ---------- */

  /* Scrim — the ONLY sanctioned use of rgba in the kit.
     Use --scrim-bg for modal/drawer backdrops; --scrim-bg-soft for the
     striped diagonal scrim accent on disabled states. Components must
     reference these tokens; raw rgba() in components.css is forbidden. */
  --scrim-bg:      rgba(0, 0, 0, 0.4);
  --scrim-bg-soft: rgba(0, 0, 0, 0.06);

  /* ---------- SHADOW SYSTEM ---------- */

  /* Shadow system — HARD-EDGED OFFSET. No blur, no soft drop shadows. */
  --shadow-xs:  2px 2px 0 0 var(--ink);
  --shadow-sm:  4px 4px 0 0 var(--ink);
  --shadow-md:  6px 6px 0 0 var(--ink);
  --shadow-lg:  8px 8px 0 0 var(--ink);
  --shadow-xl:  12px 12px 0 0 var(--ink);
  --shadow-2xl: 16px 16px 0 0 var(--ink);
  --shadow-2xs: 3px 3px 0 0 var(--ink);
}
/* ============================================
   BRUT — Design Tokens: Intent
   Component-specific sizing and layout.
   Acceptance gate: NO hex values in this file.
   ============================================ */
:root {
  /* ---------- CONTROL SIZING ---------- */
  --control-sm:   20px;
  --control-icon: 22px;
  --control-md:   28px;
  --control-lg:   36px;
  --control-xl:   44px;

  /* ---------- TOUCH MINIMUM ---------- */
  /* WCAG 2.5.5 / iOS HIG / Material — every interactive surface must meet this floor.
     Aliased to --control-xl so the two move together. Doctor enforces via visual run. */
  --touch-min:    var(--control-xl);

  /* ---------- COMPONENT INTENT ---------- */
  --switch-track-w:   56px;
  --switch-track-h:   30px;
  --switch-knob-on:   28px;
  --range-track-h:    14px;
  --range-dual-h:     26px;
  --range-dual-thumb: 18px;
  --otp-cell-h:       52px;
  --textarea-min-h:   88px;
  --field-label-w:    160px;
  --field-min-w:      100px;
  --search-pad-r:     38px;
  --badge-pad-v:      5px;
  --skeleton-h:       96px;
  --shape-size:       120px;

  /* ---------- LAYOUT ---------- */
  --container-w:    1200px;          /* legacy alias of --container-lg; consumers should migrate */
  --container-sm:   720px;
  --container-md:   960px;
  --container-lg:   1200px;          /* fills the missing tier between --container-md and --container-xl */
  --container-xl:   1440px;
  --sidebar-w:      240px;
  --split-side-w:   220px;
  --drawer-w:       420px;
  --dialog-max-w:   560px;
  --popover-min-w:  220px;
  --popover-max-w:  360px;
  --dropdown-max-h: 240px;
  --date-w:         280px;
  --menu-min-w:     200px;
  --grid-columns:   12;
  --grid-gutter:    var(--sp-6);

  --progress-h:    var(--sp-6);
  --progress-h-sm: var(--sp-3);
  --progress-h-lg: var(--sp-8);

  /* ---------- TABLE STICKY STACK ---------- */
  /* Table sticky cells stack above the base sticky layer. */
  --z-table-sticky-col:    var(--z-sticky);
  --z-table-sticky-header: calc(var(--z-sticky) + 1);
  --z-table-sticky-corner: calc(var(--z-sticky) + 2);

  /* ---------- CAROUSEL ---------- */
  --carousel-gap:              var(--sp-2);
  --carousel-dot-size:         var(--sp-3);
  --carousel-btn-size:         var(--control-xl);
  --carousel-track-transition: var(--dur-base);  /* 140ms — at the limit, never above */
  --carousel-bw:               var(--bw-3);
  --carousel-shadow:           var(--shadow-sm);

  /* ---------- FLUID TYPE ---------- */
  /* Optional clamp() scales for headings and section type that should grow with the
     viewport while staying within the existing --fs-* steps. Components opt in by
     using these tokens in place of a fixed --fs-* value; no consumer-visible
     change unless adopted. The base styles in src/tokens/index.css adopt them
     for headings as part of the responsive rollout. */
  --fs-fluid-sm:  clamp(var(--fs-sm),   0.875rem + 0.25vw, var(--fs-md));
  --fs-fluid-md:  clamp(var(--fs-md),   1rem     + 0.5vw,  var(--fs-lg));
  --fs-fluid-lg:  clamp(var(--fs-lg),   1.125rem + 1vw,    var(--fs-2xl));
  --fs-fluid-xl:  clamp(var(--fs-xl),   1.25rem  + 1.5vw,  var(--fs-3xl));
  --fs-fluid-2xl: clamp(var(--fs-2xl),  1.5rem   + 2vw,    var(--fs-4xl));
}
/* ============================================
   BRUT — Token barrel + base element styles
   Layer imports (resolved by Vite in M3; ignored by cat-build):
   @import './01-primitives.css';
   @import './02-semantic.css';
   @import './03-intent.css';
   ============================================ */
/* ---------- SEMANTIC ELEMENT STYLES ---------- */
html, body {
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* All headings reset margins — let the layout decide rhythm. */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { margin: 0; }
h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}
h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}
h3, .h3 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
}
h4, .h4 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
}
h5, .h5 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
}
h6, .h6 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}
p, .p {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  margin: 0;
}
small, .small {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}
strong, b { font-weight: var(--fw-bold); }
em, i    { font-style: italic; }
.eyebrow,
.label {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
}
/* Anchors — chunky underlines, never thin. */
a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  text-decoration-skip-ink: none;
  font-weight: var(--fw-medium);
}
a:hover { background: var(--primary); }
/* Lists — square bullets, hard counters. */
ul, ol {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  padding-left: 1.4em;
  margin: 0;
}
ul { list-style: square; }
ol { list-style: decimal; }
li::marker {
  color: var(--ink);
  font-weight: var(--fw-bold);
}
li + li { margin-top: 4px; }
/* Blockquote — left ink rule, body-weight, no italic by default. */
blockquote {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  border-left: var(--bw-3) solid var(--ink);
  padding: var(--sp-2) var(--sp-4);
  margin: 0;
}
/* Horizontal rule — 4px ink line, the only divider we ship. */
hr {
  border: 0;
  border-top: var(--bw-3) solid var(--ink);
  margin: var(--sp-6) 0;
}
/* Inline code, kbd, samp — chunky chip with hard border. */
code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
  font-weight: var(--fw-medium);
  background: var(--paper-2);
  padding: 1px 6px;
  border: var(--bw-1) solid var(--ink);
}
kbd {
  background: var(--bone);
  box-shadow: 2px 2px 0 0 var(--ink);
  font-size: 0.85em;
}
/* Block code. */
pre {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  background: var(--ink);
  color: var(--paper);
  padding: var(--sp-4);
  border: var(--bw-3) solid var(--ink);
  box-shadow: var(--shadow-sm);
  overflow: auto;
  margin: 0;
}
pre code {
  background: transparent;
  border: 0;
  padding: 0;
  font-size: inherit;
  color: inherit;
}
/* ---------- TYPE UTILITY CLASSES ---------- */
.t-display    { font-family: var(--font-display); text-transform: uppercase; letter-spacing: var(--tracking-tight); line-height: var(--lh-tight); }
.t-sans       { font-family: var(--font-sans); }
.t-mono       { font-family: var(--font-mono); }
.t-uppercase  { text-transform: uppercase; letter-spacing: var(--tracking-widest); }
.t-tabular    { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: var(--num-tabular); }
.t-tight      { letter-spacing: var(--tracking-tight); }
.t-tightest   { letter-spacing: var(--tracking-tightest); }
.t-wide       { letter-spacing: var(--tracking-wide); }
.t-wider      { letter-spacing: var(--tracking-wider); }
.t-widest     { letter-spacing: var(--tracking-widest); }
.t-balance    { text-wrap: balance; }
.t-pretty     { text-wrap: pretty; }
/* Selection: high contrast, no gradient */
::selection { background: var(--primary); color: var(--ink); }
/* Shared component styles for docs page — these classes are referenced
   by the inline previews AND by the code snippets the user copies. */
/* Global focus-visible — keyboard users always see a ring; mouse focus stays clean. */
:where(:focus-visible) {
  outline: var(--bw-2) solid var(--accent);
  outline-offset: var(--sp-1);
}
:where(:focus:not(:focus-visible)) {
  outline: none;
}
/* ============================================================
   TYPOGRAPHY
   Component-level classes that compose the type tokens into
   ready-made styles. Use these instead of hand-rolling sizes.
   ============================================================ */
/* DISPLAY — only for hero / poster moments. ALL CAPS. */
.brut-display-1 {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-4xl), 11vw, var(--fs-6xl));
  line-height: 0.9;
  letter-spacing: var(--tracking-tightest);
  text-transform: uppercase;
  margin: 0;
  text-wrap: balance;
}
.brut-display-2 {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-3xl), 8vw, var(--fs-5xl));
  line-height: 0.92;
  letter-spacing: var(--tracking-tightest);
  text-transform: uppercase;
  margin: 0;
  text-wrap: balance;
}
.brut-display-3 {
  font-family: var(--font-display);
  font-size: clamp(var(--sp-10), 6vw, var(--fs-4xl));
  line-height: 0.95;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  margin: 0;
  text-wrap: balance;
}
/* HEADINGS — H1 through H6, in semantic order. */
.brut-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  margin: 0;
}
.brut-h2 {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  margin: 0;
}
.brut-h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}
.brut-h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  margin: 0;
}
.brut-h5 {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  margin: 0;
}
.brut-h6 {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin: 0;
}
/* BODY copy — three densities. */
.brut-lead {
  font-family: var(--font-sans);
  font-size: var(--fs-lg);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  margin: 0;
  max-width: 60ch;
}
.brut-body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  margin: 0;
  max-width: 70ch;
}
.brut-small {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  margin: 0;
  max-width: 80ch;
}
.brut-caption {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  color: var(--concrete-400);
  margin: 0;
}
/* EYEBROW / KICKER / OVERLINE — short, chunky, ALL CAPS. */
.brut-eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  line-height: 1;
  margin: 0;
}
.brut-kicker {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  line-height: 1;
  background: var(--primary);
  color: var(--ink);
  border: var(--bw-2) solid var(--ink);
  padding: var(--sp-1) var(--sp-2);
}
.brut-overline {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--concrete-400);
  margin: 0;
}
/* QUOTE — left rule, no italic. */
.brut-quote {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  border-left: var(--bw-3) solid var(--ink);
  padding: var(--sp-1h) var(--sp-4);
  margin: 0;
}
/* Pull-quote — display-weight, with thick top + bottom rules. */
.brut-pull-quote {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  border-top: var(--bw-3) solid var(--ink);
  border-bottom: var(--bw-3) solid var(--ink);
  padding: var(--sp-4) 0;
  margin: 0;
  text-wrap: balance;
}
.brut-pull-quote cite {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--concrete-400);
  margin-top: var(--sp-2h);
}
/* LINK — chunky underline. Yellow on hover. */
.brut-link {
  color: var(--ink);
  font-weight: var(--fw-medium);
  text-decoration: underline;
  text-decoration-thickness: var(--bw-1);
  text-underline-offset: var(--bw-2);
  text-decoration-skip-ink: none;
  background: transparent;
  transition: background var(--dur-fast) var(--ease-snap);
}
.brut-link:hover  { background: var(--primary); }
.brut-link:active { background: var(--primary-deep); color: var(--paper); }
/* CODE — inline + kbd + block. */
.brut-code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--paper-2);
  padding: var(--sp-px) var(--sp-1h);
  border: var(--bw-1) solid var(--ink);
}
.brut-kbd {
  font-family: var(--font-mono);
  font-size: 0.82em;
  font-weight: var(--fw-bold);
  background: var(--bone);
  padding: var(--bw-1) var(--sp-1h);
  border: var(--bw-1) solid var(--ink);
  box-shadow: var(--shadow-xs);
  display: inline-block;
  line-height: 1.1;
}
.brut-pre {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  line-height: 1.5;
  background: var(--ink);
  color: var(--paper);
  padding: var(--sp-4);
  border: var(--bw-3) solid var(--ink);
  box-shadow: var(--shadow-sm);
  overflow: auto;
  margin: 0;
}
.brut-pre .tok-comment { color: var(--concrete-300); }
.brut-pre .tok-keyword { color: var(--pop-pink); }
.brut-pre .tok-string  { color: var(--pop-lime); }
.brut-pre .tok-num     { color: var(--primary); }
/* LISTS — square bullets, hard counters. */
.brut-list {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  list-style: square;
  padding-left: 1.4em;
  margin: 0;
}
.brut-list--ord { list-style: decimal; }
.brut-list li + li { margin-top: var(--sp-1); }
/* DROP CAP — first letter as a hard ink block. */
.brut-drop-cap::first-letter {
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  line-height: 0.9;
  float: left;
  background: var(--ink);
  color: var(--paper);
  padding: var(--sp-1h) var(--sp-2h) var(--sp-1);
  margin: var(--sp-1) var(--sp-2h) 0 0;
  text-transform: uppercase;
}
/* HIGHLIGHT — yellow text marker. */
.brut-mark {
  background: var(--primary);
  color: var(--ink);
  padding: var(--sp-px) var(--sp-1);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
/* NUM — display-style figure for stats. Tabular by default. */
.brut-num {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: var(--num-tabular);
  margin: 0;
}
/* TEXT-LINK INLINE in body copy — works inside <p> without breaking rhythm. */
.brut-prose {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  max-width: 70ch;
}
.brut-prose > * + * { margin-top: var(--sp-3h); }
.brut-prose h2, .brut-prose .brut-h2 { margin-top: var(--sp-8); }
.brut-prose h3, .brut-prose .brut-h3 { margin-top: var(--sp-6); }
.brut-prose ul, .brut-prose ol { padding-left: 1.4em; }
.brut-prose code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--paper-2);
  padding: var(--sp-px) var(--sp-1h);
  border: var(--bw-1) solid var(--ink);
}
/* BUTTON */
.brut-btn {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  padding: var(--sp-3) var(--sp-4h);
  border: var(--bw-3) solid var(--ink);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  background: var(--bone);
  color: var(--ink);
  line-height: 1;
  transition: transform var(--dur-fast) cubic-bezier(.2,.8,.2,1),
              box-shadow var(--dur-fast) cubic-bezier(.2,.8,.2,1);
}
.brut-btn:hover  { transform: translate(calc(var(--bw-1) * -1), calc(var(--bw-1) * -1)); box-shadow: var(--shadow-md); }
.brut-btn:active { transform: translate(var(--bw-1), var(--bw-1)); box-shadow: 0 0 0 0 var(--ink); }
.brut-btn--primary { background: var(--primary); }
.brut-btn--ink     { background: var(--ink);      color: var(--paper); }
.brut-btn--pink    { background: var(--pop-pink); color: var(--ink); }
.brut-btn--lime    { background: var(--pop-lime); color: var(--ink); }
.brut-btn--danger  { background: var(--danger);   color: var(--paper); border-color: var(--danger); }
.brut-btn--danger:hover  { background: var(--danger-bg); color: var(--danger); }
.brut-btn--outline { background: transparent;     color: var(--ink); }
.brut-btn--outline:hover { background: var(--ink); color: var(--paper); }
.brut-btn--sm { padding: var(--sp-2) var(--sp-3); font-size: var(--fs-xs); border-width: var(--bw-2);
                box-shadow: var(--shadow-2xs); }
.brut-btn--lg { padding: var(--sp-4) var(--sp-6); font-size: var(--fs-md);
                box-shadow: var(--shadow-md); }
/* COPY — inline value + copy-to-clipboard button. JS reads .brut-copy__value
   (or data-brut-value), writes to navigator.clipboard, and flashes the label. */
.brut-copy {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-2);
  border: var(--bw-2) solid var(--ink);
  background: var(--bone);
  font-family: var(--font-mono);
  max-width: 100%;
}
.brut-copy__value {
  font-family: inherit;
  font-size: var(--fs-sm);
  color: var(--ink);
  white-space: pre;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.brut-copy__btn {
  flex-shrink: 0;
}
/* BADGE */
.brut-badge {
  font-family: var(--font-display);
  font-size: var(--fs-badge);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  padding: var(--badge-pad-v) var(--sp-2h);
  border: var(--bw-2) solid var(--ink);
  background: var(--bone);
  color: var(--ink);
  line-height: 1;
  display: inline-block;
}
.brut-badge--ok   { background: var(--success-bg); }
.brut-badge--warn { background: var(--warning-bg); }
.brut-badge--err  { background: var(--danger-bg); }
.brut-badge--info { background: var(--info-bg); }
/* CARD */
.brut-card {
  background: var(--bone);
  border: var(--bw-3) solid var(--ink);
  box-shadow: var(--shadow-md);
  padding: var(--sp-5);
}
/* ============================================================
   DATA
   Tables and settings-style row lists. Static structure; the
   table picks up sortable / select-all behavior when wrapped in
   data-brut="table" (see src/js/components/table.js).
   ============================================================ */
/* TABLE — full-width data grid. Sortable + select-all when JS-bound. */
.brut-table {
  border-collapse: collapse;
  width: 100%;
  border: var(--bw-3) solid var(--ink);
  background: var(--bone);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--ink);
}
.brut-table__head {
  background: var(--ink);
  color: var(--paper);
}
.brut-table__head .brut-table__cell {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wider);
  text-align: left;
  padding: var(--sp-2h) var(--sp-3h);
  color: var(--paper);
  border-bottom: var(--bw-2) solid var(--ink);
}
.brut-table__cell {
  padding: var(--sp-2h) var(--sp-3h);
  text-align: left;
  vertical-align: middle;
}
.brut-table tbody .brut-table__cell {
  border-top: var(--bw-2) solid var(--ink);
}
.brut-table__cell--num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.brut-table__cell--sortable {
  cursor: pointer;
  user-select: none;
  position: relative;
  padding-right: var(--control-md);
  transition: background var(--dur-fast) var(--ease-snap);
}
.brut-table__cell--sortable:hover { background: var(--concrete-500); }
.brut-table__cell--sortable::after {
  content: "";
  position: absolute;
  right: var(--sp-3);
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  color: var(--concrete-200);
}
.brut-table__cell--sorted::after      { content: "\25B2"; color: var(--paper); }
.brut-table__cell--sorted-desc::after { content: "\25BC"; color: var(--paper); }
.brut-table--striped tbody tr:nth-child(even) { background: var(--paper-2); }
.brut-table--bordered .brut-table__cell + .brut-table__cell { border-left: var(--bw-2) solid var(--ink); }
.brut-table--compact .brut-table__cell,
.brut-table--compact .brut-table__head .brut-table__cell { padding: var(--sp-1h) var(--sp-2h); }
/* ============================================================
   TABLE — STICKY
   Scroll wrapper + sticky-head / sticky-col modifiers.
   Pure CSS — no JS required.
   ============================================================ */
/* Scroll wrapper — opaque ink border + hard shadow. */
.brut-table-wrap {
  overflow: auto;
  border: var(--bw-3) solid var(--ink);
  box-shadow: var(--shadow-md);
  background: var(--paper);
}
/* Remove the table's own outer border when inside a wrap (the wrap provides it). */
.brut-table-wrap .brut-table {
  border: 0;
}
/* Sticky header — thead th cells pin to the top of the scroll container. */
.brut-table--sticky-head thead th {
  position: sticky;
  top: 0;
  z-index: var(--z-table-sticky-header);
  background: var(--ink);
  border-bottom: var(--bw-3) solid var(--ink);
}
/* Sticky first column — first td/th in every row pins to the left. */
.brut-table--sticky-col td:first-child,
.brut-table--sticky-col th:first-child {
  position: sticky;
  left: 0;
  z-index: var(--z-table-sticky-col);
  background: var(--paper-2);
  border-right: var(--bw-3) solid var(--ink);
}
/* Sticky-head thead th already has ink bg; keep it opaque over column content. */
.brut-table--sticky-head.brut-table--sticky-col thead th:first-child {
  z-index: var(--z-table-sticky-corner);
  background: var(--ink);
}
/* ROWS — settings-style list: lead / title+sub / trail. */
.brut-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--bone);
}
.brut-rows__item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-3) var(--sp-4);
}
.brut-rows__lead  { display: inline-flex; align-items: center; }
.brut-rows__main  { display: flex; flex-direction: column; gap: var(--bw-1); min-width: 0; }
.brut-rows__title {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--ink);
  line-height: 1.2;
}
.brut-rows__sub {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--concrete-400);
  line-height: 1.3;
}
.brut-rows__trail { display: inline-flex; align-items: center; gap: var(--sp-2); }
.brut-rows--bordered { border: var(--bw-3) solid var(--ink); }
.brut-rows--bordered .brut-rows__item + .brut-rows__item {
  border-top: var(--bw-2) solid var(--ink);
}
.brut-rows--clickable .brut-rows__item {
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-snap);
}
.brut-rows--clickable .brut-rows__item:hover { background: var(--primary); }
/* INPUT */
.brut-label {
  font-family: var(--font-display);
  font-size: var(--fs-badge);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}
.brut-input {
  font-family: var(--font-sans);
  font-size: var(--fs-input);
  padding: var(--sp-3) var(--sp-3h);
  background: var(--bone);
  border: var(--bw-3) solid var(--ink);
  box-shadow: var(--shadow-xs);
  outline: none;
  color: var(--ink);
  width: 100%;
  box-sizing: border-box;
}
.brut-input:focus-visible {
  background: var(--primary-soft);
  box-shadow: var(--shadow-sm);
}
/* TOGGLE / SWITCH */
.brut-switch {
  width: var(--switch-track-w); height: var(--switch-track-h);
  border: var(--bw-2) solid var(--ink);
  background: var(--concrete-100);
  box-shadow: var(--shadow-2xs);
  position: relative;
  display: inline-block;
}
.brut-switch--on { background: var(--pop-lime); }
.brut-switch__knob {
  position: absolute; top: var(--bw-1); left: var(--bw-1);
  width: var(--control-sm); height: var(--control-sm);
  background: var(--ink);
  transition: left var(--dur-snap) cubic-bezier(.2,.8,.2,1);
}
.brut-switch--on .brut-switch__knob { left: var(--switch-knob-on); }
/* CHECKBOX */
.brut-checkbox {
  width: var(--control-icon); height: var(--control-icon);
  border: var(--bw-2) solid var(--ink);
  background: var(--bone);
  box-shadow: var(--shadow-xs);
  display: inline-flex;
  align-items: center; justify-content: center;
}
.brut-checkbox--on { background: var(--primary); }
.brut-checkbox--on::after {
  content: "\2715";
  font-family: var(--font-display);
  font-size: var(--fs-base); font-weight: 900;
  line-height: 1;
}
/* ALERT */
.brut-alert {
  border: var(--bw-3) solid var(--ink);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-3) var(--sp-4);
  display: flex; gap: var(--sp-3h); align-items: flex-start;
}
.brut-alert__icon {
  width: var(--control-lg); height: var(--control-lg);
  border: var(--bw-2) solid var(--ink);
  font-family: var(--font-display); font-size: var(--fs-lg);
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.brut-alert--ok   { background: var(--success-bg); }
.brut-alert--ok   .brut-alert__icon { background: var(--success); color: var(--ink); }
.brut-alert--warn { background: var(--warning-bg); }
.brut-alert--warn .brut-alert__icon { background: var(--warning); color: var(--ink); }
.brut-alert--err  { background: var(--danger-bg); }
.brut-alert--err  .brut-alert__icon { background: var(--danger);  color: var(--paper); }
.brut-alert--info { background: var(--info-bg); }
.brut-alert--info .brut-alert__icon { background: var(--info);    color: var(--paper); }
/* TOAST — non-blocking transient notifications. Stacked in a corner host. */
.brut-toast-host {
  position: fixed;
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4);
  pointer-events: none;
  max-width: 100%;
}
.brut-toast-host > * { pointer-events: auto; }
.brut-toast-host--top-right    { top: 0;    right: 0; align-items: flex-end; }
.brut-toast-host--top-left     { top: 0;    left: 0;  align-items: flex-start; }
.brut-toast-host--bottom-right { bottom: 0; right: 0; align-items: flex-end; }
.brut-toast-host--bottom-left  { bottom: 0; left: 0;  align-items: flex-start; }
.brut-toast {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  background: var(--bone);
  border: var(--bw-3) solid var(--ink);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-3) var(--sp-4);
  max-width: min(var(--popover-max-w), calc(100vw - var(--sp-4)));
  min-width: var(--popover-min-w);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--ink);
  animation: brut-toast-in var(--dur-notice) var(--ease-snap);
}
.brut-toast--leaving { opacity: 0; transition: opacity var(--dur-base) var(--ease-snap); }
@keyframes brut-toast-in {
  from { transform: translateY(calc(var(--sp-2) * -1)); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.brut-toast__icon {
  width: var(--control-md); height: var(--control-md);
  border: var(--bw-2) solid var(--ink);
  font-family: var(--font-display);
  font-size: var(--fs-md);
  display: flex; align-items: center; justify-content: center;
  flex: none;
  background: var(--bone);
}
.brut-toast__msg { flex: 1; line-height: var(--lh-snug); }
.brut-toast__msg strong { font-weight: var(--fw-bold); }
.brut-toast__x {
  flex: none;
  width: var(--control-icon); height: var(--control-icon);
  background: var(--ink);
  color: var(--paper);
  border: 0;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  line-height: 1;
}
.brut-toast--ok   { background: var(--success-bg); }
.brut-toast--ok   .brut-toast__icon { background: var(--success); color: var(--ink); }
.brut-toast--warn { background: var(--warning-bg); }
.brut-toast--warn .brut-toast__icon { background: var(--warning); color: var(--ink); }
.brut-toast--err  { background: var(--danger-bg); }
.brut-toast--err  .brut-toast__icon { background: var(--danger);  color: var(--paper); }
.brut-toast--info { background: var(--info-bg); }
.brut-toast--info .brut-toast__icon { background: var(--info);    color: var(--paper); }
/* TOOLTIP — flat ink bubble appended to <body> by JS, anchored to a trigger. */
.brut-tooltip,
.brut-tip { /* @deprecated since 1.x — use .brut-tooltip; alias removed in 2.0. See MIGRATION.md. */
  position: absolute;
  z-index: var(--z-popover);
  background: var(--ink);
  color: var(--paper);
  border: var(--bw-2) solid var(--ink);
  box-shadow: var(--bw-2) var(--bw-2) 0 0 var(--paper);
  padding: var(--sp-1h) var(--sp-2h);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}
/* Side modifiers — visual carve-outs are JS-positioned; classes exist so
   styling hooks (and future arrows) can target each side. */
.brut-tooltip--top,
.brut-tip--top { /* @deprecated alias — use .brut-tooltip--top */ }
.brut-tooltip--bottom,
.brut-tip--bottom { /* @deprecated alias — use .brut-tooltip--bottom */ }
.brut-tooltip--left,
.brut-tip--left { /* @deprecated alias — use .brut-tooltip--left */ }
.brut-tooltip--right,
.brut-tip--right { /* @deprecated alias — use .brut-tooltip--right */ }
/* POPOVER — anchored card opened by trigger. JS positions + toggles. */
.brut-popover {
  position: absolute;
  z-index: var(--z-popover);
  min-width: var(--popover-min-w);
  max-width: min(var(--popover-max-w), calc(100vw - var(--sp-4)));
  background: var(--bone);
  border: var(--bw-3) solid var(--ink);
  box-shadow: var(--shadow-md);
}
.brut-popover[hidden] { display: none; }
.brut-popover__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}
.brut-popover__body {
  padding: var(--sp-4);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--ink);
  line-height: var(--lh-normal);
}
.brut-popover__x {
  width: var(--control-icon); height: var(--control-icon);
  background: var(--danger);
  border: var(--bw-1) solid var(--paper);
  color: var(--paper);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  cursor: pointer;
}
/* PROGRESS — determinate horizontal bar. Set --progress (0–100) on the
   wrapper or use data-brut="progress" for JS-driven updates. */
.brut-progress {
  width: 100%;
  height: var(--progress-h);
  background: var(--concrete-100);
  border: var(--bw-3) solid var(--ink);
  box-shadow: var(--shadow-xs);
  position: relative;
  overflow: hidden;
}
.brut-progress__bar {
  height: 100%;
  background: var(--primary);
  width: calc(var(--progress, 0) * 1%);
  transition: width var(--dur-base) var(--ease-snap);
}
.brut-progress__label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--ink);
  pointer-events: none;
}
.brut-progress--sm { height: var(--progress-h-sm); }
.brut-progress--lg { height: var(--progress-h-lg); }
.brut-progress--success .brut-progress__bar { background: var(--success); }
.brut-progress--danger  .brut-progress__bar { background: var(--danger); }
.brut-progress--info    .brut-progress__bar { background: var(--info); }
.brut-progress--warning .brut-progress__bar { background: var(--warning); }
.brut-progress--indeterminate .brut-progress__bar {
  width: 30%;
  animation: brut-progress-slide 1.4s linear infinite; /* loader animation — may exceed --dur-base */
}
@keyframes brut-progress-slide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(433%); }
}
/* SKELETON — placeholder block with a hard ink stripe sweep. */
.brut-skeleton {
  position: relative;
  overflow: hidden;
  background: var(--concrete-100);
  border: var(--bw-2) solid var(--ink);
  box-shadow: var(--shadow-2xs);
  display: block;
}
.brut-skeleton::after {
  content: "";
  position: absolute;
  top: 0;
  left: -40%;
  width: 30%;
  height: 100%;
  background: var(--ink);
  transform: skewX(-20deg);
  /* Sanctioned exception: loader animations may exceed --dur-base; the 140ms cap applies to transitions, not loops. */
  animation: brut-skel-sweep 800ms var(--ease-snap) infinite;
}
@keyframes brut-skel-sweep {
  from { left: -40%; }
  to   { left: 130%; }
}
.brut-skeleton--text {
  height: 1em;
  width: 100%;
}
.brut-skeleton--block {
  height: var(--skeleton-h);
  width: 100%;
}
.brut-skeleton--circle {
  width: var(--sp-12);
  height: var(--sp-12);
}
/* SPINNER — square with one side colored, rotates 360deg. No border-radius. */
.brut-spinner {
  display: inline-block;
  width: var(--sp-8);
  height: var(--sp-8);
  border: var(--bw-3) solid var(--ink);
  border-top-color: var(--primary);
  background: transparent;
  /* Sanctioned exception: loader animations may exceed --dur-base; the 140ms cap applies to transitions, not loops. */
  animation: brut-spin 600ms linear infinite;
}
.brut-spinner--sm { width: var(--sp-6); height: var(--sp-6); border-width: var(--bw-2); }
.brut-spinner--md { width: var(--sp-8); height: var(--sp-8); border-width: var(--bw-3); }
.brut-spinner--lg { width: var(--sp-12); height: var(--sp-12); border-width: var(--bw-3); }
@keyframes brut-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
/* EMPTY — dashed-border placeholder card for "nothing here yet" states. */
.brut-empty {
  text-align: center;
  padding: var(--sp-8) var(--sp-5);
  border: var(--bw-3) dashed var(--ink);
  background: var(--paper-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
}
.brut-empty__shape {
  width: var(--switch-track-w);
  height: var(--switch-track-w);
  background: var(--ink);
  transform: rotate(-6deg);
  margin-bottom: var(--sp-2);
}
.brut-empty__title {
  margin: 0;
}
.brut-empty__body {
  max-width: 48ch;
  margin: 0 auto;
  color: var(--concrete-300);
}
.brut-empty__action {
  margin-top: var(--sp-3);
}
/* SEGMENTED */
.brut-segmented {
  display: inline-flex;
  border: var(--bw-3) solid var(--ink);
  box-shadow: var(--shadow-sm);
  background: var(--bone);
}
.brut-segmented__btn {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-mid);
  padding: var(--sp-2h) var(--sp-4);
  background: transparent;
  border: 0;
  border-right: var(--bw-2) solid var(--ink);
  cursor: pointer;
}
.brut-segmented__btn:last-child { border-right: 0; }
.brut-segmented__btn--on { background: var(--ink); color: var(--paper); }
/* TABS */
.brut-tabs {
  display: flex;
  border-bottom: var(--bw-3) solid var(--ink);
}
.brut-tab {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: var(--fs-tab);
  padding: var(--sp-2h) var(--sp-4);
  background: var(--bone);
  border: var(--bw-3) solid var(--ink);
  border-bottom: none;
  margin-right: calc(var(--bw-3) * -1);
  cursor: pointer;
  position: relative;
}
.brut-tab--on { background: var(--primary); z-index: var(--z-sticky); }
/* ACCORDION — stacked disclosure panels. JS toggles --open on items. */
.brut-accordion {
  display: block;
}
.brut-accordion__item {
  border: var(--bw-3) solid var(--ink);
}
.brut-accordion__item + .brut-accordion__item {
  border-top: 0;
}
.brut-accordion__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  background: var(--bone);
  border: 0;
  font-family: var(--font-display);
  font-size: var(--fs-md);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
}
.brut-accordion__head:hover {
  background: var(--primary);
}
.brut-accordion__icon {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  line-height: 1;
  margin-left: var(--sp-3);
}
.brut-accordion__item--open > .brut-accordion__head .brut-accordion__icon::before {
  content: "−";
}
.brut-accordion__head .brut-accordion__icon::before {
  content: "+";
}
.brut-accordion__body {
  padding: var(--sp-4);
  border-top: var(--bw-2) solid var(--ink);
  background: var(--paper);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  display: none;
}
.brut-accordion__item--open > .brut-accordion__body {
  display: block;
}
/* AVATAR */
.brut-avatar {
  width: var(--control-xl); height: var(--control-xl);
  border: var(--bw-2) solid var(--ink);
  box-shadow: var(--shadow-2xs);
  display: inline-flex;
  align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: var(--fs-base);
  text-transform: uppercase;
}
.brut-avatar-group {
  display: inline-flex;
  align-items: center;
}
.brut-avatar-group .brut-avatar {
  margin-left: calc(var(--sp-2h) * -1);
  box-shadow: 0 0 0 var(--bw-2) var(--paper);
  position: relative;
}
.brut-avatar-group .brut-avatar:first-child { margin-left: 0; }
.brut-avatar-group__more {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-display);
}
/* CAROUSEL — sliding deck of equal-width slides. JS toggles --current,
   updates [data-current], and wires prev/next + dots. CSS only paints. */
.brut-carousel {
  position: relative;
  display: block;
  border: var(--carousel-bw) solid var(--ink);
  box-shadow: var(--carousel-shadow);
  background: var(--bone);
}
.brut-carousel:focus-visible {
  outline: var(--bw-2) solid var(--accent);
  outline-offset: var(--sp-1);
}
.brut-carousel__viewport {
  overflow: hidden;
  width: 100%;
}
.brut-carousel__track {
  display: flex;
  width: 100%;
  transition: transform var(--carousel-track-transition) var(--ease-snap);
  will-change: transform;
}
.brut-carousel__slide {
  flex: 0 0 100%;
  min-width: 0;
  background: var(--paper);
}
.brut-carousel__slide + .brut-carousel__slide {
  border-left: var(--bw-2) solid var(--ink);
}
/* NAV — prev/next button wrapper, absolutely positioned over the viewport. */
.brut-carousel__nav {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
  transform: translateY(-50%);
  padding: 0 var(--sp-3);
}
.brut-carousel__btn {
  pointer-events: auto;
  width: var(--carousel-btn-size);
  height: var(--carousel-btn-size);
  background: var(--ink);
  color: var(--paper);
  border: var(--bw-2) solid var(--ink);
  box-shadow: var(--shadow-2xs);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
}
.brut-carousel__btn:hover { background: var(--accent); color: var(--ink); }
.brut-carousel__btn[disabled] {
  background: var(--scrim-bg-soft);
  color: var(--fg-3);
  cursor: not-allowed;
  box-shadow: none;
}
.brut-carousel__btn--prev::before { content: "\2039"; }
.brut-carousel__btn--next::before { content: "\203A"; }
/* DOTS — square indicators, brutalist (no radius). */
.brut-carousel__dots {
  display: flex;
  justify-content: center;
  gap: var(--carousel-gap);
  padding: var(--sp-3);
  border-top: var(--bw-2) solid var(--ink);
  background: var(--bone);
}
.brut-carousel__dot {
  width: var(--carousel-dot-size);
  height: var(--carousel-dot-size);
  background: var(--paper);
  border: var(--bw-2) solid var(--ink);
  padding: 0;
  cursor: pointer;
  font-size: 0; /* hide visually-hidden label fallback */
}
.brut-carousel__dot:hover { background: var(--accent-soft); }
.brut-carousel__dot[aria-current="true"] {
  background: var(--ink);
}
/* PAUSE — WCAG 2.2.2 user-controllable pause for autoplay carousels.
   Rendered by carousel.js when data-autoplay is set and the user has no
   prefers-reduced-motion preference. Mirrors the prev/next button style
   but lives in the top-right corner so it never collides with the
   centered .brut-carousel__nav row. */
.brut-carousel__pause {
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-2);
  z-index: 1;
  min-width: var(--touch-min);
  min-height: var(--touch-min);
  padding: 0 var(--sp-2);
  background: var(--paper);
  color: var(--ink);
  border: var(--bw-2) solid var(--ink);
  font-family: var(--font-display);
  font-size: var(--fs-md);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-2xs);
}
.brut-carousel__pause:hover { background: var(--accent); color: var(--ink); }
.brut-carousel__pause:focus-visible {
  outline: var(--bw-2) solid var(--accent);
  outline-offset: var(--sp-1);
}
.brut-carousel__pause[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
}
/* DIALOG */
.brut-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: var(--z-modal);
  max-width: min(var(--dialog-max-w), calc(100vw - var(--sp-8)));
  max-height: calc(100vh - var(--sp-8));
  overflow: auto;
  background: var(--bone);
  border: var(--bw-3) solid var(--ink);
  box-shadow: var(--shadow-xl);
}
.brut-dialog[hidden] { display: none; }
.brut-dialog__head {
  background: var(--ink); color: var(--paper);
  padding: var(--sp-2) var(--sp-3);
  display: flex; justify-content: space-between; align-items: center;
}
.brut-dialog__x {
  width: var(--control-icon); height: var(--control-icon);
  background: var(--danger);
  border: var(--bw-1) solid var(--paper);
  font-family: var(--font-display);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}
/* DRAWER — side sheet. Slides in from any edge. JS toggles --open. */
.brut-drawer {
  position: fixed;
  z-index: var(--z-overlay);
  background: var(--bone);
  border: var(--bw-3) solid var(--ink);
  display: flex;
  flex-direction: column;
  transition: transform var(--dur-base) var(--ease-snap);
}
.brut-drawer[hidden] { display: none; }
.brut-drawer--right {
  top: 0; right: 0; bottom: 0;
  width: min(var(--drawer-w), 100vw);
  transform: translateX(100%);
}
.brut-drawer--left {
  top: 0; left: 0; bottom: 0;
  width: min(var(--drawer-w), 100vw);
  transform: translateX(-100%);
}
.brut-drawer--top {
  top: 0; left: 0; right: 0;
  max-height: 80vh;
  transform: translateY(-100%);
}
.brut-drawer--bottom {
  bottom: 0; left: 0; right: 0;
  max-height: 80vh;
  transform: translateY(100%);
}
.brut-drawer--open.brut-drawer--right,
.brut-drawer--open.brut-drawer--left,
.brut-drawer--open.brut-drawer--top,
.brut-drawer--open.brut-drawer--bottom {
  transform: translate(0, 0);
}
.brut-drawer__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  border-bottom: var(--bw-3) solid var(--ink);
}
.brut-drawer__body {
  padding: var(--sp-4);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--ink);
  overflow: auto;
  flex: 1 1 auto;
}
.brut-drawer__x {
  width: var(--control-icon); height: var(--control-icon);
  background: var(--danger);
  border: var(--bw-1) solid var(--paper);
  color: var(--paper);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  cursor: pointer;
}
/* MENU — context / overflow menu. JS opens, positions, and closes. */
.brut-menu {
  position: absolute;
  z-index: var(--z-dropdown);
  min-width: var(--menu-min-w);
  background: var(--bone);
  border: var(--bw-3) solid var(--ink);
  box-shadow: var(--shadow-md);
  padding: var(--sp-1) 0;
}
.brut-menu[hidden] { display: none; }
.brut-menu__item {
  display: block;
  width: 100%;
  padding: var(--sp-2) var(--sp-3h);
  text-align: left;
  background: transparent;
  border: 0;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  text-decoration: none;
  cursor: pointer;
}
.brut-menu__item:hover,
.brut-menu__item:focus-visible {
  background: var(--primary);
  outline: 0;
}
.brut-menu__item--danger {
  color: var(--danger);
}
.brut-menu__item--danger:hover,
.brut-menu__item--danger:focus-visible {
  background: var(--danger);
  color: var(--paper);
}
.brut-menu__sep {
  border: 0;
  border-top: var(--bw-2) solid var(--ink);
  margin: var(--sp-1) 0;
}
/* ============================================================
   FORMS — extended
   Field wrappers, input variants, native-styled controls, and
   compound widgets (stepper, otp, tags, combobox, dropzone,
   rating). Visual styling lives here; interactive behavior for
   any data-brut="…" hook ships as JS in src/js/components/<name>.js
   (concatenated into dist/brut.js by build.sh). Components that do
   not need JS (textarea, select, range, fieldset, etc.) work with
   no script attached.
   ============================================================ */
/* FORM container — vertical stack of fields. */
.brut-form        { display: flex; flex-direction: column; gap: var(--sp-5); }
/* FIELD — label + control + hint/error/counter wrapper. */
.brut-field       { display: flex; flex-direction: column; gap: var(--sp-1); }
.brut-field__label {
  font-family: var(--font-display);
  font-size: var(--fs-badge);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--ink);
}
.brut-field__hint  { font-size: var(--fs-xs); color: var(--concrete-400); }
.brut-field__error {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--danger);
  display: block;
  margin-top: var(--sp-1);
}
.brut-field__success {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--success);
}
.brut-counter,
.brut-field__counter { /* @deprecated since 1.x — use .brut-counter; alias removed in 2.0. See MIGRATION.md. */
  font-family: var(--font-mono);
  font-size: var(--fs-badge);
  color: var(--concrete-400);
  align-self: flex-end;
}
.brut-counter--over,
.brut-field__counter--over { /* @deprecated alias — use .brut-counter--over */
  color: var(--danger);
  font-weight: var(--fw-bold);
}
.brut-field--inline {
  display: grid;
  grid-template-columns: var(--field-label-w) 1fr;
  align-items: center;
  gap: var(--sp-3);
}
.brut-field--invalid .brut-input,
.brut-field--invalid .brut-textarea,
.brut-field--invalid .brut-select {
  border-color: var(--danger);
  background: var(--danger-bg);
}
.brut-field--invalid .brut-field__label { color: var(--danger); }
.brut-field--valid .brut-input,
.brut-field--valid .brut-textarea,
.brut-field--valid .brut-select {
  border-color: var(--success);
  background: var(--success-bg);
}
.brut-field--valid .brut-field__label { color: var(--success); }
/* VALIDATION
   Native :invalid and aria-invalid are styled identically; the
   .brut-field__error class displays an error message under the input.
   Existing .brut-field__error (above) sets color + font-size; we only
   add layout here so consumers can drop a <span class="brut-field__error">
   directly under any input without an extra wrapper. */
.brut-input:invalid,
.brut-textarea:invalid,
.brut-select:invalid {
  border-color: var(--danger);
}
[aria-invalid="true"].brut-input,
[aria-invalid="true"].brut-textarea,
[aria-invalid="true"].brut-select,
.brut-field[aria-invalid="true"] .brut-input,
.brut-field[aria-invalid="true"] .brut-textarea,
.brut-field[aria-invalid="true"] .brut-select,
.brut-combobox[aria-invalid="true"],
.brut-otp[aria-invalid="true"] {
  border-color: var(--danger);
}
/* INPUT — variants + states on the existing .brut-input. */
.brut-input--sm {
  padding: var(--sp-2) var(--sp-2h); font-size: var(--fs-tab);
  border-width: var(--bw-2);
  box-shadow: var(--shadow-xs);
}
.brut-input--lg { padding: var(--sp-4) var(--sp-4h); font-size: var(--fs-md); box-shadow: var(--shadow-sm); }
.brut-input--err {
  border-color: var(--danger);
  background: var(--danger-bg);
}
.brut-input--err:focus-visible { background: var(--danger-bg); }
.brut-input--ok {
  border-color: var(--success);
  background: var(--success-bg);
}
.brut-input:user-invalid,
.brut-textarea:user-invalid,
.brut-select:user-invalid {
  border-color: var(--danger);
  background: var(--danger-bg);
}
.brut-input:user-valid,
.brut-textarea:user-valid,
.brut-select:user-valid {
  border-color: var(--success);
  background: var(--success-bg);
}
.brut-input:disabled,
.brut-input[readonly] {
  background: var(--concrete-50);
  color: var(--concrete-400);
  cursor: not-allowed;
}
.brut-input::placeholder { color: var(--concrete-300); }
/* INPUT GROUP — prefix/suffix addons. Wraps an input + addon spans. */
.brut-input-group {
  display: inline-flex;
  align-items: stretch;
  width: 100%;
  border: var(--bw-3) solid var(--ink);
  box-shadow: var(--shadow-xs);
  background: var(--bone);
  box-sizing: border-box;
}
.brut-input-group:focus-within {
  background: var(--primary-soft);
  box-shadow: var(--shadow-sm);
}
.brut-input-group > .brut-input {
  border: 0;
  box-shadow: none;
  background: transparent;
  flex: 1;
  min-width: 0;
}
.brut-input-group > .brut-input:focus-visible { background: transparent; box-shadow: none; }
.brut-input-group__addon {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-tab);
  color: var(--concrete-400);
  background: var(--paper-2);
  border-right: var(--bw-2) solid var(--ink);
}
.brut-input-group__addon:last-child {
  border-right: 0;
  border-left: var(--bw-2) solid var(--ink);
}
/* TEXTAREA — same skin as .brut-input, vertical resize only. */
.brut-textarea {
  font-family: var(--font-sans);
  font-size: var(--fs-input);
  line-height: var(--lh-normal);
  padding: var(--sp-3) var(--sp-3h);
  background: var(--bone);
  border: var(--bw-3) solid var(--ink);
  box-shadow: var(--shadow-xs);
  outline: none;
  color: var(--ink);
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  min-height: var(--textarea-min-h);
}
.brut-textarea:focus-visible {
  background: var(--primary-soft);
  box-shadow: var(--shadow-sm);
}
/* TEXTAREA — variants + states; mirrors .brut-input--sm/--lg/--err/--ok. */
.brut-textarea--sm {
  padding: var(--sp-2) var(--sp-2h); font-size: var(--fs-tab);
  border-width: var(--bw-2);
  box-shadow: var(--shadow-xs);
}
.brut-textarea--lg { padding: var(--sp-4) var(--sp-4h); font-size: var(--fs-md); box-shadow: var(--shadow-sm); }
.brut-textarea--err {
  border-color: var(--danger);
  background: var(--danger-bg);
}
.brut-textarea--err:focus-visible { background: var(--danger-bg); }
.brut-textarea--ok {
  border-color: var(--success);
  background: var(--success-bg);
}
/* SELECT — styled native, hard chevron (no SVG, no font icon). */
.brut-select {
  font-family: var(--font-sans);
  font-size: var(--fs-input);
  padding: var(--sp-3) var(--search-pad-r) var(--sp-3) var(--sp-3h);
  background: var(--bone);
  border: var(--bw-3) solid var(--ink);
  box-shadow: var(--shadow-xs);
  outline: none;
  color: var(--ink);
  width: 100%;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  /* Sanctioned exception: checkmark glyph drawn via gradient until a stroke-based SVG sprite ships (see AGENTS.md §Carve-outs). Do NOT use gradients elsewhere. */
  background-image:
    linear-gradient(45deg,  transparent 50%, var(--ink) 50%),
    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position:
    right var(--sp-3h) top var(--control-icon),
    right var(--sp-2)  top var(--control-icon);
  background-size: var(--sp-1h) var(--sp-1h), var(--sp-1h) var(--sp-1h);
  background-repeat: no-repeat;
}
.brut-select:focus-visible {
  background-color: var(--primary-soft);
  box-shadow: var(--shadow-sm);
}
/* RADIO — round companion to .brut-checkbox. JS toggles --on. */
.brut-radio {
  width: var(--control-icon); height: var(--control-icon);
  border: var(--bw-2) solid var(--ink);
  border-radius: var(--radius-circle);
  background: var(--bone);
  box-shadow: var(--shadow-xs);
  position: relative;
  display: inline-block;
  cursor: pointer;
  flex: none;
}
.brut-radio--on::after {
  content: "";
  position: absolute;
  inset: var(--sp-1);
  background: var(--ink);
  border-radius: var(--radius-circle);
}
/* RANGE / SLIDER — native, restyled. */
.brut-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: var(--range-track-h);
  background: transparent;
  outline: none;
  padding: 0;
  margin: var(--sp-2) 0;
}
.brut-range::-webkit-slider-runnable-track {
  height: var(--range-track-h);
  background: var(--bone);
  border: var(--bw-2) solid var(--ink);
  box-shadow: var(--shadow-xs);
}
.brut-range::-moz-range-track {
  height: var(--range-track-h);
  background: var(--bone);
  border: var(--bw-2) solid var(--ink);
  box-shadow: var(--shadow-xs);
}
.brut-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--control-icon); height: var(--control-icon);
  background: var(--primary);
  border: var(--bw-2) solid var(--ink);
  box-shadow: var(--shadow-xs);
  margin-top: calc((var(--control-icon) - var(--range-track-h)) / -2);
  cursor: pointer;
}
.brut-range::-moz-range-thumb {
  width: var(--control-icon); height: var(--control-icon);
  background: var(--primary);
  border: var(--bw-2) solid var(--ink);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
}
/* RANGE DUAL — two-thumb range. JS owns drag + keyboard; this is just chrome. */
.brut-range-dual {
  position: relative;
  width: 100%;
  height: var(--range-dual-h);
  margin: var(--sp-2) 0;
  user-select: none;
  touch-action: none;
}
.brut-range-dual__track {
  position: absolute;
  top: 50%;
  left: 0; right: 0;
  height: var(--range-track-h);
  transform: translateY(-50%);
  background: var(--bone);
  border: var(--bw-3) solid var(--ink);
  box-shadow: var(--shadow-xs);
  box-sizing: border-box;
}
.brut-range-dual__fill {
  position: absolute;
  top: 0; bottom: 0;
  left: 0;
  width: 0;
  background: var(--primary);
  pointer-events: none;
}
.brut-range-dual__thumb {
  position: absolute;
  top: 50%;
  left: 0;
  width: var(--range-dual-thumb);
  height: var(--range-dual-thumb);
  margin-left: calc(var(--range-dual-thumb) / -2);
  transform: translateY(-50%);
  background: var(--ink);
  border: 0;
  box-shadow: var(--shadow-2xs);
  cursor: grab;
  padding: 0;
  outline: none;
}
.brut-range-dual__thumb:focus-visible { background: var(--ink); box-shadow: var(--shadow-sm); }
.brut-range-dual__thumb:active { cursor: grabbing; }
/* FILE INPUT — chunky button + filename label. */
.brut-file {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  cursor: pointer;
  position: relative;
}
.brut-file > input[type="file"] {
  position: absolute;
  width: var(--sp-px); height: var(--sp-px);
  opacity: 0;
  pointer-events: none;
}
.brut-file__btn {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-mid);
  padding: var(--sp-2h) var(--sp-3h);
  border: var(--bw-3) solid var(--ink);
  background: var(--primary);
  box-shadow: var(--shadow-xs);
  line-height: 1;
  transition: transform var(--dur-fast) var(--ease-snap),
              box-shadow var(--dur-fast) var(--ease-snap);
}
.brut-file:hover  .brut-file__btn { transform: translate(calc(var(--bw-1) * -1), calc(var(--bw-1) * -1)); box-shadow: var(--shadow-sm); }
.brut-file:active .brut-file__btn { transform: translate(var(--bw-1), var(--bw-1));   box-shadow: 0 0 0 0 var(--ink); }
.brut-file__name  { color: var(--concrete-400); font-family: var(--font-mono); font-size: var(--fs-xs); }
/* COLOR INPUT — styled native swatch. */
.brut-color {
  width: var(--control-xl); height: var(--control-xl);
  border: var(--bw-3) solid var(--ink);
  box-shadow: var(--shadow-xs);
  background: var(--bone);
  padding: 0;
  cursor: pointer;
  outline: none;
}
.brut-color::-webkit-color-swatch-wrapper { padding: var(--sp-1); }
.brut-color::-webkit-color-swatch { border: 0; }
.brut-color::-moz-color-swatch    { border: 0; }
/* FIELDSET — bordered group with hard ink legend chip. */
.brut-fieldset {
  border: var(--bw-3) solid var(--ink);
  box-shadow: var(--shadow-xs);
  padding: var(--sp-4) var(--sp-5) var(--sp-5);
  background: var(--bone);
  margin: 0;
}
.brut-fieldset__legend {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  background: var(--ink);
  color: var(--paper);
  padding: var(--sp-1) var(--sp-2h);
}
/* STEPPER — number input with -/+ buttons. JS does the math. */
.brut-stepper {
  display: inline-flex;
  align-items: stretch;
  border: var(--bw-3) solid var(--ink);
  box-shadow: var(--shadow-xs);
  background: var(--bone);
}
.brut-stepper__btn {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  width: var(--control-lg);
  background: var(--bone);
  border: 0;
  cursor: pointer;
  line-height: 1;
  color: var(--ink);
}
.brut-stepper__btn:first-child { border-right: var(--bw-2) solid var(--ink); }
.brut-stepper__btn:last-child  { border-left:  var(--bw-2) solid var(--ink); }
.brut-stepper__btn:hover  { background: var(--primary-soft); }
.brut-stepper__btn:active { background: var(--primary); }
.brut-stepper__input {
  border: 0;
  outline: none;
  background: transparent;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--fs-input);
  width: var(--switch-track-w);
  -moz-appearance: textfield;
}
.brut-stepper__input::-webkit-outer-spin-button,
.brut-stepper__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* PASSWORD — input with SHOW/HIDE toggle. JS swaps input.type. */
.brut-password { position: relative; display: block; }
.brut-password > .brut-input { padding-right: var(--sp-16); }
.brut-password__toggle {
  position: absolute;
  right: var(--sp-1h); top: 50%;
  transform: translateY(-50%);
  background: var(--bone);
  border: var(--bw-2) solid var(--ink);
  font-family: var(--font-display);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-mid);
  padding: var(--sp-1) var(--sp-2);
  cursor: pointer;
  line-height: 1;
}
.brut-password__toggle:hover { background: var(--primary); }
/* SEARCH — input with × clear button (only shown when value present). */
.brut-search { position: relative; display: block; }
.brut-search > .brut-input { padding-right: var(--search-pad-r); }
.brut-search__clear {
  position: absolute;
  right: var(--sp-2); top: 50%;
  transform: translateY(-50%);
  width: var(--control-icon); height: var(--control-icon);
  background: var(--ink); color: var(--paper);
  border: 0;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  display: none;
  align-items: center; justify-content: center;
  cursor: pointer;
  line-height: 1;
}
.brut-search--has-value .brut-search__clear { display: inline-flex; }
/* OTP / PIN — fixed-width cells with auto-advance. */
.brut-otp { display: inline-flex; gap: var(--sp-2); }
.brut-otp__cell {
  width: var(--control-xl); height: var(--otp-cell-h);
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  background: var(--bone);
  border: var(--bw-3) solid var(--ink);
  box-shadow: var(--shadow-xs);
  outline: none;
  padding: 0;
  color: var(--ink);
}
.brut-otp__cell:focus-visible {
  background: var(--primary-soft);
  box-shadow: var(--shadow-sm);
}
/* TAGS / CHIPS — read-only display badges, with optional × button. */
.brut-tags { display: inline-flex; flex-wrap: wrap; gap: var(--sp-2); }
.brut-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1h);
  font-family: var(--font-display);
  font-size: var(--fs-badge);
  text-transform: uppercase;
  letter-spacing: var(--tracking-mid);
  padding: var(--sp-1) var(--sp-2);
  background: var(--primary);
  border: var(--bw-2) solid var(--ink);
  box-shadow: var(--shadow-xs);
  line-height: 1;
  color: var(--ink);
}
.brut-tag--ink   { background: var(--ink);      color: var(--paper); }
.brut-tag--lime  { background: var(--pop-lime); }
.brut-tag--pink  { background: var(--pop-pink); }
.brut-tag--blue  { background: var(--pop-blue); color: var(--paper); }
.brut-tag--ok    { background: var(--success-bg); }
.brut-tag--warn  { background: var(--warning-bg); }
.brut-tag--err   { background: var(--danger-bg);  color: var(--paper); }
.brut-tag--info  { background: var(--info-bg);    color: var(--paper); }
.brut-tag__x {
  background: transparent;
  border: 0;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  cursor: pointer;
  padding: 0;
  color: inherit;
  line-height: 1;
}
/* TAG INPUT — chip entry field. JS adds tags on Enter or comma. */
.brut-tag-input {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
  padding: var(--sp-2) var(--sp-2h);
  background: var(--bone);
  border: var(--bw-3) solid var(--ink);
  box-shadow: var(--shadow-xs);
  width: 100%;
  box-sizing: border-box;
}
.brut-tag-input:focus-within {
  background: var(--primary-soft);
  box-shadow: var(--shadow-sm);
}
.brut-tag-input__field {
  border: 0;
  outline: none;
  background: transparent;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  flex: 1;
  min-width: var(--field-min-w);
  padding: var(--sp-1) 0;
  color: var(--ink);
}
/* COMBOBOX — searchable select. JS filters + opens the option list. */
.brut-combobox { position: relative; display: block; }
.brut-combobox__list {
  position: absolute;
  z-index: var(--z-dropdown);
  top: calc(100% + var(--sp-1));
  left: 0; right: 0;
  background: var(--bone);
  border: var(--bw-3) solid var(--ink);
  box-shadow: var(--shadow-md);
  max-height: var(--dropdown-max-h);
  overflow-y: auto;
  display: none;
  margin: 0;
  padding: 0;
  list-style: none;
}
.brut-combobox--open .brut-combobox__list { display: block; }
.brut-combobox__opt {
  padding: var(--sp-2) var(--sp-3);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  cursor: pointer;
  border-bottom: var(--sp-px) solid var(--concrete-100);
}
.brut-combobox__opt:last-child { border-bottom: 0; }
.brut-combobox__opt:hover,
.brut-combobox__opt[aria-selected="true"] { background: var(--primary); }
.brut-combobox__empty {
  padding: var(--sp-2) var(--sp-3);
  font-family: var(--font-sans);
  font-size: var(--fs-tab);
  color: var(--concrete-400);
  display: none;
}
/* MULTISELECT — chips inside a combobox-style field. JS toggles selection. */
.brut-multiselect { position: relative; display: block; }
.brut-multiselect__field {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
  padding: var(--sp-2) var(--sp-2h);
  background: var(--bone);
  border: var(--bw-3) solid var(--ink);
  box-shadow: var(--shadow-xs);
  width: 100%;
  box-sizing: border-box;
  cursor: text;
}
.brut-multiselect--open .brut-multiselect__field,
.brut-multiselect__field:focus-within {
  background: var(--primary-soft);
  box-shadow: var(--shadow-sm);
}
.brut-multiselect__chip {
  /* reuse .brut-tag skin — additionally allow per-chip remove */
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1h);
}
.brut-multiselect__input {
  border: 0;
  outline: none;
  background: transparent;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  flex: 1;
  min-width: var(--field-min-w);
  padding: var(--sp-1) 0;
  color: var(--ink);
}
.brut-multiselect__list {
  position: absolute;
  z-index: var(--z-dropdown);
  top: calc(100% + var(--sp-1));
  left: 0; right: 0;
  background: var(--bone);
  border: var(--bw-3) solid var(--ink);
  box-shadow: var(--shadow-md);
  max-height: var(--dropdown-max-h);
  overflow-y: auto;
  display: none;
  margin: 0;
  padding: 0;
  list-style: none;
}
.brut-multiselect--open .brut-multiselect__list { display: block; }
.brut-multiselect__opt {
  padding: var(--sp-2) var(--sp-3);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  cursor: pointer;
  border-bottom: var(--sp-px) solid var(--concrete-100);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.brut-multiselect__opt:last-child { border-bottom: 0; }
.brut-multiselect__opt:hover,
.brut-multiselect__opt[aria-selected="true"] { background: var(--primary); }
.brut-multiselect__opt--selected::before {
  content: "✓";
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  color: var(--ink);
}
.brut-multiselect__opt:not(.brut-multiselect__opt--selected)::before {
  content: "";
  display: inline-block;
  width: var(--sp-2h);
}
.brut-multiselect__empty {
  padding: var(--sp-2) var(--sp-3);
  font-family: var(--font-sans);
  font-size: var(--fs-tab);
  color: var(--concrete-400);
  display: none;
}
/* DROPZONE — drag-and-drop file area. JS handles dragover + drop. */
.brut-dropzone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-7) var(--sp-5);
  background: var(--paper-2);
  border: var(--bw-3) dashed var(--ink);
  text-align: center;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
}
.brut-dropzone--drag {
  background: var(--primary-soft);
  border-style: solid;
  box-shadow: var(--shadow-sm);
}
.brut-dropzone__hint {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-wider);
}
.brut-dropzone__sub { font-size: var(--fs-xs); color: var(--concrete-400); }
.brut-dropzone > input[type="file"] {
  position: absolute;
  width: var(--sp-px); height: var(--sp-px);
  opacity: 0;
  pointer-events: none;
}
/* RATING — star row. JS toggles --on per star, hover preview. */
.brut-rating { display: inline-flex; gap: var(--sp-1); }
.brut-rating__star {
  width: var(--sp-8); height: var(--sp-8);
  border: var(--bw-2) solid var(--ink);
  background: var(--bone);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  display: inline-flex;
  align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: var(--fs-base);
  line-height: 1;
  padding: 0;
  color: var(--ink);
}
.brut-rating__star::before { content: "★"; opacity: 0.18; }
.brut-rating__star--on { background: var(--primary); }
.brut-rating__star--on::before { opacity: 1; }
/* DATE — text field + popover calendar. JS owns the grid + keyboard nav. */
.brut-date { position: relative; display: block; }
.brut-date__field { width: 100%; box-sizing: border-box; cursor: pointer; }
.brut-date__pop {
  position: absolute;
  z-index: var(--z-dropdown);
  top: calc(100% + var(--sp-1));
  left: 0;
  display: none;
  background: var(--bone);
  border: var(--bw-3) solid var(--ink);
  box-shadow: var(--shadow-md);
  padding: var(--sp-3);
  width: var(--date-w);
  box-sizing: border-box;
}
.brut-date--open .brut-date__pop { display: block; }
.brut-date__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.brut-date__title {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--ink);
}
.brut-date__nav-btn {
  width: var(--control-md); height: var(--control-md);
  background: var(--bone);
  border: var(--bw-2) solid var(--ink);
  box-shadow: var(--shadow-xs);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  cursor: pointer;
  padding: 0;
  line-height: 1;
  color: var(--ink);
}
.brut-date__nav-btn:hover { background: var(--primary); }
.brut-date__dows {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--bw-1);
  margin-bottom: var(--sp-1);
}
.brut-date__dow {
  font-family: var(--font-display);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--concrete-400);
  text-align: center;
  padding: var(--sp-1) 0;
}
.brut-date__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--bw-1);
}
.brut-date__day {
  width: var(--control-lg); height: var(--control-lg);
  background: var(--bone);
  border: 0;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  cursor: pointer;
  padding: 0;
  line-height: 1;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.brut-date__day:hover { background: var(--primary); }
.brut-date__day--out { color: var(--concrete-300); }
.brut-date__day--disabled,
.brut-date__day--disabled:hover {
  color: var(--concrete-300);
  background: var(--bone);
  cursor: not-allowed;
}
.brut-date__day--today::after {
  content: "";
  position: absolute;
  left: var(--sp-1h); right: var(--sp-1h);
  bottom: var(--sp-1);
  height: var(--bw-2);
  background: var(--ink);
}
.brut-date__day--selected { background: var(--ink); color: var(--paper); }
.brut-date__day--selected::after { background: var(--paper); }
.brut-date__day:focus-visible { outline: var(--bw-2) solid var(--ink); outline-offset: calc(var(--bw-1) * -1); }
/* TIME — hour / minute steppers (reuses .brut-stepper) + optional 12/24 segmented. */
.brut-time { position: relative; display: block; }
.brut-time__field { width: 100%; box-sizing: border-box; cursor: pointer; }
.brut-time__pop {
  position: absolute;
  z-index: var(--z-dropdown);
  top: calc(100% + var(--sp-1));
  left: 0;
  display: none;
  background: var(--bone);
  border: var(--bw-3) solid var(--ink);
  box-shadow: var(--shadow-md);
  padding: var(--sp-3);
  box-sizing: border-box;
}
.brut-time--open .brut-time__pop { display: block; }
.brut-time__row {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
}
.brut-time__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
}
.brut-time__col-label {
  font-family: var(--font-display);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--concrete-400);
}
.brut-time__sep {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  color: var(--ink);
  padding-top: var(--sp-3h);
}
.brut-time__meridian { margin-top: var(--sp-3); }
/* ============================================================
   NAVIGATION
   App-shell scaffolding — topnav, sidebar, footer, breadcrumbs.
   These are the chrome that wraps every page; layout primitives
   below sit inside them.
   ============================================================ */
/* TOPNAV — sticky page header with brand + links + CTA + mobile burger. */
.brut-topnav {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: var(--paper);
  border-bottom: var(--bw-3) solid var(--ink);
}
.brut-topnav__inner {
  max-width: var(--container-w);
  margin: 0 auto;
  padding: var(--sp-3h) var(--sp-6);
  display: flex;
  align-items: center;
  gap: var(--sp-6);
}
.brut-topnav__brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: var(--fs-md);
  letter-spacing: var(--tracking-wide);
  color: var(--ink);
  text-decoration: none;
}
.brut-topnav__mark {
  width: var(--control-lg); height: var(--control-lg);
  background: var(--primary);
  border: var(--bw-2) solid var(--ink);
  box-shadow: var(--shadow-2xs);
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-size: var(--fs-base);
  color: var(--ink);
}
/* Mobile-first: links collapse into an absolutely-positioned panel revealed by
   the burger button. CTA hidden on mobile (mirror it as a link in the panel
   if it must be reachable). At md and above, links go inline and the burger
   disappears. Disclosure-toggle shape — see docs/responsive-shapes.md. */
.brut-topnav__links {
  display: none;
  position: absolute;
  top: 100%; left: 0; right: 0;
  flex-direction: column;
  gap: 0;
  margin: 0;
  background: var(--paper);
  border-bottom: var(--bw-3) solid var(--ink);
  padding: var(--sp-3) var(--sp-6);
}
.brut-topnav--open .brut-topnav__links { display: flex; }
.brut-topnav__link {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  padding: var(--sp-2) 0;
  border-bottom: var(--bw-1) dashed var(--concrete-200);
  transition: background var(--dur-fast) var(--ease-snap);
}
.brut-topnav__link:hover { background: var(--primary); }
.brut-topnav__link--active {
  box-shadow: inset 0 calc(var(--bw-2) * -1) 0 0 var(--ink);
}
.brut-topnav__cta { display: none; margin-left: auto; }
.brut-topnav__burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  width: var(--sp-10); height: var(--control-lg);
  background: var(--bone);
  border: var(--bw-2) solid var(--ink);
  box-shadow: var(--shadow-2xs);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--fs-md);
  color: var(--ink);
  padding: 0;
  line-height: 1;
}
@media (min-width: 768px) { /* var(--bp-md) — links inline, burger hidden */
  .brut-topnav__links {
    display: flex;
    position: static;
    flex-direction: row;
    gap: var(--sp-6);
    margin: 0 0 0 var(--sp-8);
    background: transparent;
    border-bottom: 0;
    padding: 0;
  }
  .brut-topnav__link {
    padding: var(--sp-1) var(--bw-1);
    border-bottom: 0;
  }
  .brut-topnav__cta { display: revert; }
  .brut-topnav__burger { display: none; }
}
/* SIDEBAR — vertical app nav for dashboards. */
.brut-sidebar {
  width: var(--sidebar-w);
  background: var(--paper);
  border-right: var(--bw-3) solid var(--ink);
  padding: var(--sp-5) var(--sp-3);
  box-sizing: border-box;
}
.brut-sidebar__brand {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--fs-md);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--ink);
  text-decoration: none;
  padding: 0 var(--sp-2);
  margin-bottom: var(--sp-5);
}
.brut-sidebar__group { margin-bottom: var(--sp-4); }
.brut-sidebar__group-title {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--concrete-400);
  padding: var(--sp-2) var(--sp-2);
  margin: 0 0 var(--sp-1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: default;
  background: transparent;
  border: 0;
  width: 100%;
  text-align: left;
}
.brut-sidebar__group-title::after {
  content: "";
}
button.brut-sidebar__group-title { cursor: pointer; }
button.brut-sidebar__group-title::after {
  content: "\2212"; /* − */
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  color: var(--ink);
}
.brut-sidebar__group--closed button.brut-sidebar__group-title::after { content: "+"; }
.brut-sidebar__group--closed .brut-sidebar__item { display: none; }
.brut-sidebar__item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-2h);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--ink);
  text-decoration: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-snap);
}
.brut-sidebar__item:hover { background: var(--primary); }
.brut-sidebar__item--active {
  background: var(--primary);
  box-shadow: inset var(--bw-3) 0 0 0 var(--ink);
}
.brut-sidebar__icon {
  width: var(--control-sm); height: var(--control-sm);
  display: inline-flex;
  align-items: center; justify-content: center;
  flex: none;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
}
/* FOOTER — page bottom slab. */
.brut-footer {
  background: var(--ink);
  color: var(--paper);
  padding: var(--sp-8) var(--sp-6);
  border-top: var(--bw-3) solid var(--ink);
}
.brut-footer__inner {
  max-width: var(--container-w);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6);
  align-items: center;
}
.brut-footer__brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: var(--fs-md);
  letter-spacing: var(--tracking-wide);
  color: var(--paper);
  text-decoration: none;
}
.brut-footer__links {
  display: flex;
  gap: var(--sp-6);
  flex-wrap: wrap;
}
.brut-footer__link {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--paper);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-snap);
}
.brut-footer__link:hover { color: var(--primary); background: transparent; }
.brut-footer__legal {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--concrete-200);
}
/* BREADCRUMBS — flat, hard-edged path nav. */
.brut-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}
.brut-crumbs__item {
  display: inline-flex;
  align-items: center;
  margin: 0;
}
.brut-crumbs__item + .brut-crumbs__item { margin-top: 0; }
.brut-crumbs__link {
  color: var(--ink);
  text-decoration: none;
  padding: var(--bw-1) var(--sp-1);
  transition: background var(--dur-fast) var(--ease-snap);
}
.brut-crumbs__link:hover { background: var(--primary); }
.brut-crumbs__sep {
  color: var(--concrete-300);
  user-select: none;
}
.brut-crumbs__current {
  color: var(--ink);
  font-weight: var(--fw-bold);
  padding: var(--bw-1) var(--sp-1);
}
.brut-crumbs__item[aria-current="page"] {
  color: var(--ink);
  font-weight: var(--fw-bold);
  padding: var(--bw-1) var(--sp-1);
}
.brut-crumbs--sm {
  font-size: var(--fs-2xs);
  gap: var(--sp-1);
  letter-spacing: var(--tracking-wide);
}
.brut-crumbs--sm .brut-crumbs__link { padding: var(--sp-px) var(--sp-1); }
@media (max-width: 639.98px) { /* sub-tier sentinel — disjoint from (min-width: 640px) */
  .brut-crumbs--responsive .brut-crumbs__item {
    display: none;
  }
  .brut-crumbs--responsive .brut-crumbs__item:first-child,
  .brut-crumbs--responsive .brut-crumbs__item:last-child {
    display: inline-flex;
  }
  .brut-crumbs--responsive .brut-crumbs__sep {
    display: none;
  }
  .brut-crumbs--responsive .brut-crumbs__item:last-child::before {
    content: "…";
    color: var(--concrete-300);
    margin-right: var(--sp-2);
  }
}
/* PAGINATION — page navigation buttons. CSS-only; consumer wires links. */
.brut-pagination {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
}
.brut-pagination__btn {
  width: var(--control-lg);
  height: var(--control-lg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bone);
  border: var(--bw-2) solid var(--ink);
  box-shadow: var(--shadow-2xs);
  color: var(--ink);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: transform var(--dur-fast) var(--ease-snap),
              box-shadow var(--dur-fast) var(--ease-snap);
}
.brut-pagination__btn:hover  { transform: translate(calc(var(--bw-1) * -1), calc(var(--bw-1) * -1)); box-shadow: var(--badge-pad-v) var(--badge-pad-v) 0 0 var(--ink); }
.brut-pagination__btn:active { transform: translate(var(--bw-1), var(--bw-1)); box-shadow: 0 0 0 0 var(--ink); }
.brut-pagination__btn--active {
  background: var(--primary);
}
.brut-pagination__btn[disabled],
.brut-pagination__btn[aria-disabled="true"] {
  opacity: 0.5;
  pointer-events: none;
}
.brut-pagination__gap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--sp-6);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  color: var(--concrete-300);
  user-select: none;
}
/* ============================================================
   LAYOUT
   Primitives for composing pages — container, section, stack,
   cluster, bar, grid, split, rule, aspect, scrim, shape, spacer.
   All compose tokens from colors_and_type.css. No utility soup.
   ============================================================ */
/* CONTAINER — max-width centered wrapper with gutter padding. */
.brut-container {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--sp-6);
  max-width: var(--container-w);
  box-sizing: border-box;
}
.brut-container--sm   { max-width: var(--container-sm); }
.brut-container--md   { max-width: var(--container-md); }
.brut-container--lg   { max-width: var(--container-w); }
.brut-container--xl   { max-width: var(--container-xl); }
.brut-container--full { max-width: none; }
/* SECTION — full-bleed page band. Ships the var(--bw-3) ink bottom rule
   by default — opt out with --flush. */
.brut-section {
  padding-block: var(--sp-16);
  padding-inline: var(--sp-8);
  border-bottom: var(--bw-3) solid var(--ink);
  background: var(--paper);
}
.brut-section--tight   { padding-block: var(--sp-8); }
.brut-section--flush   { border-bottom: 0; }
.brut-section--paper   { background: var(--paper); }
.brut-section--paper-2 { background: var(--paper-2); }
.brut-section--bone    { background: var(--bone); }
.brut-section--ink     { background: var(--ink); color: var(--paper); }
.brut-section--primary { background: var(--primary); }
.brut-section--lime    { background: var(--pop-lime); }
.brut-section--pink    { background: var(--pop-pink); }
/* STACK — vertical flex column with token-sized gap. */
.brut-stack {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.brut-stack--xs  { gap: var(--sp-1); }
.brut-stack--sm  { gap: var(--sp-2); }
.brut-stack--md  { gap: var(--sp-4); }
.brut-stack--lg  { gap: var(--sp-6); }
.brut-stack--xl  { gap: var(--sp-10); }
.brut-stack--2xl { gap: var(--sp-16); }
/* CLUSTER — horizontal flex with wrap. For badges, button rows,
   tag bags. Wraps onto new lines naturally. */
.brut-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
}
.brut-cluster--sm  { gap: var(--sp-2); }
.brut-cluster--md  { gap: var(--sp-3); }
.brut-cluster--lg  { gap: var(--sp-4); }
.brut-cluster--center  { justify-content: center; }
.brut-cluster--between { justify-content: space-between; }
/* BAR — header / CTA / footer strip. justify-content: space-between
   with wrap. Use a .brut-spacer to push children apart. */
.brut-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-6);
}
/* GRID — CSS grid. Default auto-fit responsive; explicit-col variants
   for fixed layouts. */
.brut-grid {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: repeat(auto-fit, minmax(var(--sidebar-w), 1fr));
}
.brut-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.brut-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.brut-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.brut-grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
/* 12-COLUMN GRID — Bootstrap-parity. Use .brut-row as parent,
   .brut-col-{1-12} for explicit widths, .brut-col for equal-width auto. */
.brut-row {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: var(--grid-gutter);
}
.brut-row--tight { gap: var(--sp-2); }
.brut-row--loose { gap: var(--sp-10); }
.brut-row--no-gutter { gap: 0; }
.brut-col    { grid-column: span 1; }
.brut-col-1  { grid-column: span 1; }
.brut-col-2  { grid-column: span 2; }
.brut-col-3  { grid-column: span 3; }
.brut-col-4  { grid-column: span 4; }
.brut-col-5  { grid-column: span 5; }
.brut-col-6  { grid-column: span 6; }
.brut-col-7  { grid-column: span 7; }
.brut-col-8  { grid-column: span 8; }
.brut-col-9  { grid-column: span 9; }
.brut-col-10 { grid-column: span 10; }
.brut-col-11 { grid-column: span 11; }
.brut-col-12 { grid-column: span 12; }
.brut-col-offset-1  { grid-column-start: 2; }
.brut-col-offset-2  { grid-column-start: 3; }
.brut-col-offset-3  { grid-column-start: 4; }
.brut-col-offset-4  { grid-column-start: 5; }
.brut-col-offset-5  { grid-column-start: 6; }
.brut-col-offset-6  { grid-column-start: 7; }
.brut-col-offset-7  { grid-column-start: 8; }
.brut-col-offset-8  { grid-column-start: 9; }
.brut-col-offset-9  { grid-column-start: 10; }
.brut-col-offset-10 { grid-column-start: 11; }
.brut-col-offset-11 { grid-column-start: 12; }
/* Default: stack below sm. Sub-tier sentinel keeps the boundary disjoint
   from the (min-width: 640px) opener at exactly 640px. */
@media (max-width: 639.98px) {
  .brut-row:not(.brut-row--no-stack) > [class*="brut-col"] {
    grid-column: 1 / -1;
  }
}
/* sm (≥ 640px) */
@media (min-width: 640px) { /* --bp-sm */
  .brut-col-sm-1  { grid-column: span 1; }
  .brut-col-sm-2  { grid-column: span 2; }
  .brut-col-sm-3  { grid-column: span 3; }
  .brut-col-sm-4  { grid-column: span 4; }
  .brut-col-sm-5  { grid-column: span 5; }
  .brut-col-sm-6  { grid-column: span 6; }
  .brut-col-sm-7  { grid-column: span 7; }
  .brut-col-sm-8  { grid-column: span 8; }
  .brut-col-sm-9  { grid-column: span 9; }
  .brut-col-sm-10 { grid-column: span 10; }
  .brut-col-sm-11 { grid-column: span 11; }
  .brut-col-sm-12 { grid-column: span 12; }
}
/* md (≥ 768px) */
@media (min-width: 768px) { /* --bp-md */
  .brut-col-md-1  { grid-column: span 1; }
  .brut-col-md-2  { grid-column: span 2; }
  .brut-col-md-3  { grid-column: span 3; }
  .brut-col-md-4  { grid-column: span 4; }
  .brut-col-md-5  { grid-column: span 5; }
  .brut-col-md-6  { grid-column: span 6; }
  .brut-col-md-7  { grid-column: span 7; }
  .brut-col-md-8  { grid-column: span 8; }
  .brut-col-md-9  { grid-column: span 9; }
  .brut-col-md-10 { grid-column: span 10; }
  .brut-col-md-11 { grid-column: span 11; }
  .brut-col-md-12 { grid-column: span 12; }
}
/* lg (≥ 1024px) */
@media (min-width: 1024px) { /* --bp-lg */
  .brut-col-lg-1  { grid-column: span 1; }
  .brut-col-lg-2  { grid-column: span 2; }
  .brut-col-lg-3  { grid-column: span 3; }
  .brut-col-lg-4  { grid-column: span 4; }
  .brut-col-lg-5  { grid-column: span 5; }
  .brut-col-lg-6  { grid-column: span 6; }
  .brut-col-lg-7  { grid-column: span 7; }
  .brut-col-lg-8  { grid-column: span 8; }
  .brut-col-lg-9  { grid-column: span 9; }
  .brut-col-lg-10 { grid-column: span 10; }
  .brut-col-lg-11 { grid-column: span 11; }
  .brut-col-lg-12 { grid-column: span 12; }
}
/* SPLIT — sidebar + main two-column. The docs page itself uses this. */
.brut-split {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-8);
}
.brut-split__main { flex: 1; min-width: 0; }
.brut-split__side { flex: none; width: var(--split-side-w); }
/* RULE — var(--bw-3) ink divider. Replaces hand-rolled <hr>s. */
.brut-rule {
  border: 0;
  border-top: var(--bw-3) solid var(--ink);
  margin: 0;
  width: 100%;
}
.brut-rule--thin  { border-top-width: var(--bw-1); }
.brut-rule--thick { border-top-width: var(--bw-4); }
.brut-rule--vert {
  border-top: 0;
  border-left: var(--bw-3) solid var(--ink);
  align-self: stretch;
  width: 0;
  margin-inline: var(--sp-2);
}
/* ASPECT — aspect-ratio box for images, embeds, media tiles. */
.brut-aspect {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border: var(--bw-3) solid var(--ink);
  background: var(--paper-2);
  overflow: hidden;
}
.brut-aspect--square   { aspect-ratio: 1 / 1; }
.brut-aspect--video    { aspect-ratio: 16 / 9; }
.brut-aspect--portrait { aspect-ratio: 3 / 4; }
.brut-aspect--wide     { aspect-ratio: 21 / 9; }
.brut-aspect > img,
.brut-aspect > video,
.brut-aspect > iframe {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.brut-scrim {
  position: fixed;
  inset: 0;
  /* Sanctioned exception: scrim hatch drawn via gradient until an SVG sprite ships (see AGENTS.md §Carve-outs). Do NOT use gradients elsewhere. */
  background: repeating-linear-gradient(45deg,
      var(--scrim-bg-soft) 0 var(--sp-px),
      transparent var(--sp-px) var(--sp-2)),
    var(--scrim-bg);
  z-index: var(--z-scrim);
  display: flex;
  align-items: center;
  justify-content: center;
}
.brut-scrim[hidden] { display: none; }
/* SHAPE — rotated, offset decorative rectangle. Drop these inside a
   relative-positioned parent to add brutalist hero decoration. Always
   has its own border + offset shadow. Position via the --offset-* mods
   or override with inline `top/left/right/bottom`. */
.brut-shape {
  position: absolute;
  width: var(--shape-size);
  height: var(--shape-size);
  background: var(--primary);
  border: var(--bw-3) solid var(--ink);
  box-shadow: var(--shadow-md);
  z-index: var(--z-base);
  pointer-events: none;
}
.brut-shape--pink   { background: var(--pop-pink); }
.brut-shape--lime   { background: var(--pop-lime); }
.brut-shape--blue   { background: var(--pop-blue); }
.brut-shape--rot-l  { transform: rotate(-8deg); }
.brut-shape--rot-r  { transform: rotate(8deg); }
.brut-shape--offset-tr { top: calc(var(--sp-6) * -1);    right: calc(var(--sp-6) * -1);  }
.brut-shape--offset-bl { bottom: calc(var(--sp-6) * -1); left: calc(var(--sp-6) * -1);   }
/* SPACER — flex filler. Use inside a .brut-bar or .brut-cluster
   to push children apart without margin tricks. */
.brut-spacer { flex: 1; }
/* ============================================================
   TABLE — RESPONSIVE
   Stacked-card layout below the small breakpoint (var(--bp-sm)) viewport width.
   Add .brut-table--responsive to <table>; every <td> must
   carry data-brut-col-label="…" for the cell prefix label.
   Pure CSS — no JS required.
   ============================================================ */
@media (max-width: 639.98px) { /* sub-tier sentinel — disjoint from (min-width: 640px) */
  .brut-table--responsive thead { display: none; }
  .brut-table--responsive,
  .brut-table--responsive tbody,
  .brut-table--responsive tr { display: block; width: 100%; }
  .brut-table--responsive tr {
    border: var(--bw-3) solid var(--ink);
    box-shadow: var(--shadow-sm);
    background: var(--paper);
    margin-bottom: var(--sp-3);
  }
  .brut-table--responsive td {
    display: block;
    width: 100%;
    padding: var(--sp-3) var(--sp-4);
    border: 0;
    border-top: var(--bw-1) solid var(--concrete-200);
  }
  .brut-table--responsive td:first-child { border-top: 0; }
  .brut-table--responsive td::before {
    content: attr(data-brut-col-label) ":\00a0";
    font-family: var(--font-display);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--concrete-400);
    display: inline-block;
    margin-right: var(--sp-2);
  }
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   THEME SWITCHER
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.brut-theme-switcher {
  display: inline-flex;
  gap: 0;
  border: var(--bw-3) solid var(--ink);
  background: var(--paper);
  box-shadow: var(--shadow-xs);
  position: fixed;
  top: var(--sp-3);
  right: var(--sp-3);
  z-index: var(--z-toast);
}
.brut-theme-switcher__btn {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  padding: var(--sp-1h) var(--sp-3);
  border: none;
  border-right: var(--bw-1) solid var(--ink);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-snap),
              color var(--dur-fast) var(--ease-snap);
  line-height: var(--lh-normal);
}
.brut-theme-switcher__btn:last-child { border-right: none; }
.brut-theme-switcher__btn:hover { background: var(--concrete-50); }
.brut-theme-switcher__btn--on { background: var(--ink); color: var(--paper); }
.brut-theme-switcher__btn--on:hover { background: var(--ink); color: var(--paper); }
/* Honour prefers-reduced-motion: disable transitions and animations on motion-driven components. */
@media (prefers-reduced-motion: reduce) {
  .brut-link,
  .brut-btn,
  .brut-table__cell--sortable,
  .brut-rows__item,
  .brut-input,
  .brut-switch__knob,
  .brut-toast,
  .brut-popover,
  .brut-progress__bar,
  .brut-tab--on,
  .brut-drawer,
  .brut-menu,
  .brut-file__btn,
  .brut-topnav__link,
  .brut-sidebar__item,
  .brut-footer__link,
  .brut-crumbs__link,
  .brut-pagination__btn,
  .brut-theme-switcher__btn {
    transition: none !important;
    animation: none !important;
  }
}
/* Skip-to-main-content link — visually hidden until keyboard focus reveals it. */
.brut-skip-nav {
  position: absolute;
  top: -9999px;
  left: 0;
  z-index: var(--z-toast);
  padding: var(--sp-1) var(--sp-2);
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  font: inherit;
}
.brut-skip-nav:focus,
.brut-skip-nav:focus-visible {
  top: var(--sp-2);
  left: var(--sp-2);
}
/* PRINT — hide interactive chrome and decorative ink-heavy elements; flatten overlays so their content stays accessible. */
@media print {
  /* Hide navigation and interactive chrome */
  .brut-topnav,
  .brut-sidebar,
  .brut-toast-host,
  .brut-toast,
  .brut-spinner,
  .brut-skeleton,
  .brut-scrim,
  .brut-skip-nav { display: none !important; }

  /* Flatten overlays so their content prints inline if visible */
  .brut-dialog,
  .brut-drawer {
    position: static !important;
    transform: none !important;
    box-shadow: none !important;
  }

  /* Ensure tables print in full */
  .brut-table-wrap { overflow: visible !important; }

  /* Drop decorative shapes */
  .brut-shape { display: none !important; }
}
/* High-contrast preference: bump border weights and disable softer shadows
   so users with --prefers-contrast: more get a clearly delineated UI.
   Uses existing tokens; no new design values introduced. */
@media (prefers-contrast: more) {
  :where(.brut-btn, .brut-input, .brut-textarea, .brut-select) {
    border-width: var(--bw-4);
  }
  :where(.brut-card, .brut-empty, .brut-alert) {
    border-width: var(--bw-3);
  }
  :where(.brut-btn:focus-visible, .brut-input:focus-visible, .brut-textarea:focus-visible, .brut-select:focus-visible) {
    outline-width: var(--bw-3);
  }
}
/* Windows High Contrast Mode (forced-colors: active):
   the OS overrides most colors, so we map our visual contracts onto
   system-color keywords and disable shadows that the OS can't render. */
/* Sanctioned exception: system-color keywords (Highlight, GrayText) are CSS-defined and OS-resolved, not BRUT tokens. forced-colors mode requires them. */
@media (forced-colors: active) {
  :where(.brut-btn, .brut-input, .brut-select, .brut-textarea, .brut-card, .brut-alert, .brut-empty) {
    forced-color-adjust: auto;
    box-shadow: none;
  }
  :where(.brut-btn:focus-visible, .brut-input:focus-visible, .brut-textarea:focus-visible, .brut-select:focus-visible) {
    outline: var(--bw-3) solid Highlight;
  }
  :where(.brut-btn:disabled, .brut-input:disabled, [aria-disabled="true"]) {
    color: GrayText;
  }
}
/* ============================================================
   DOCS-ONLY UTILITIES
   ------------------------------------------------------------
   Classes prefixed `.docs-*` are scoped to docs/index.html and
   are NOT part of the consumer-facing API. Do not document
   these in component sections or expose them in dist/components.json.
   ============================================================ */
/* COMPONENT STATUS BADGES — beta / experimental flags rendered in docs/. */
.docs-status {
  display: inline-block;
  margin-left: var(--sp-2);
  padding: var(--sp-1);
  border: var(--bw-1) solid var(--ink);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  vertical-align: middle;
}
.docs-status--beta {
  background: var(--accent);
  color: var(--ink);
}
.docs-status--experimental {
  background: var(--danger-bg);
  color: var(--danger);
}
/* ============================================
   BRUT — Utility Classes
   Bootstrap-compatible naming. All values reference
   design tokens — no raw px/rem/hex in this file.
   Responsive variants use min-width (mobile-first).
   ============================================ */
/* ---------- DISPLAY ---------- */
.d-none         { display: none; }
.d-block        { display: block; }
.d-inline       { display: inline; }
.d-inline-block { display: inline-block; }
.d-flex         { display: flex; }
.d-inline-flex  { display: inline-flex; }
.d-grid         { display: grid; }
/* ---------- FLEX ---------- */
.flex-row             { flex-direction: row; }
.flex-column          { flex-direction: column; }
.flex-row-reverse     { flex-direction: row-reverse; }
.flex-column-reverse  { flex-direction: column-reverse; }
.flex-wrap            { flex-wrap: wrap; }
.flex-nowrap          { flex-wrap: nowrap; }
.justify-content-start   { justify-content: flex-start; }
.justify-content-end     { justify-content: flex-end; }
.justify-content-center  { justify-content: center; }
.justify-content-between { justify-content: space-between; }
.justify-content-around  { justify-content: space-around; }
.justify-content-evenly  { justify-content: space-evenly; }
.align-items-start    { align-items: flex-start; }
.align-items-end      { align-items: flex-end; }
.align-items-center   { align-items: center; }
.align-items-stretch  { align-items: stretch; }
.align-items-baseline { align-items: baseline; }
.align-self-start   { align-self: flex-start; }
.align-self-end     { align-self: flex-end; }
.align-self-center  { align-self: center; }
.align-self-stretch { align-self: stretch; }
.flex-grow-0   { flex-grow: 0; }
.flex-grow-1   { flex-grow: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.flex-shrink-1 { flex-shrink: 1; }
.flex-fill     { flex: 1 1 auto; }
.order-0     { order: 0; }
.order-1     { order: 1; }
.order-2     { order: 2; }
.order-3     { order: 3; }
.order-4     { order: 4; }
.order-5     { order: 5; }
.order-first { order: -1; }
.order-last  { order: 6; }
/* ---------- GAP ---------- */
.gap-0 { gap: 0; }
.gap-1 { gap: var(--sp-1); }
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); }
.gap-5 { gap: var(--sp-6); }
.gap-6 { gap: var(--sp-8); }
.row-gap-0 { row-gap: 0; }
.row-gap-1 { row-gap: var(--sp-1); }
.row-gap-2 { row-gap: var(--sp-2); }
.row-gap-3 { row-gap: var(--sp-3); }
.row-gap-4 { row-gap: var(--sp-4); }
.row-gap-5 { row-gap: var(--sp-6); }
.column-gap-0 { column-gap: 0; }
.column-gap-1 { column-gap: var(--sp-1); }
.column-gap-2 { column-gap: var(--sp-2); }
.column-gap-3 { column-gap: var(--sp-3); }
.column-gap-4 { column-gap: var(--sp-4); }
.column-gap-5 { column-gap: var(--sp-6); }
/* ---------- MARGIN ---------- */
.m-0  { margin: 0; }
.m-1  { margin: var(--sp-1); }
.m-2  { margin: var(--sp-2); }
.m-3  { margin: var(--sp-3); }
.m-4  { margin: var(--sp-4); }
.m-5  { margin: var(--sp-6); }
.m-6  { margin: var(--sp-8); }
.m-8  { margin: var(--sp-12); }
.m-auto { margin: auto; }
.mt-0  { margin-top: 0; }
.mt-1  { margin-top: var(--sp-1); }
.mt-2  { margin-top: var(--sp-2); }
.mt-3  { margin-top: var(--sp-3); }
.mt-4  { margin-top: var(--sp-4); }
.mt-5  { margin-top: var(--sp-6); }
.mt-6  { margin-top: var(--sp-8); }
.mt-8  { margin-top: var(--sp-12); }
.mt-auto { margin-top: auto; }
.mr-0  { margin-right: 0; }
.mr-1  { margin-right: var(--sp-1); }
.mr-2  { margin-right: var(--sp-2); }
.mr-3  { margin-right: var(--sp-3); }
.mr-4  { margin-right: var(--sp-4); }
.mr-5  { margin-right: var(--sp-6); }
.mr-6  { margin-right: var(--sp-8); }
.mr-8  { margin-right: var(--sp-12); }
.mr-auto { margin-right: auto; }
.mb-0  { margin-bottom: 0; }
.mb-1  { margin-bottom: var(--sp-1); }
.mb-2  { margin-bottom: var(--sp-2); }
.mb-3  { margin-bottom: var(--sp-3); }
.mb-4  { margin-bottom: var(--sp-4); }
.mb-5  { margin-bottom: var(--sp-6); }
.mb-6  { margin-bottom: var(--sp-8); }
.mb-8  { margin-bottom: var(--sp-12); }
.mb-auto { margin-bottom: auto; }
.ml-0  { margin-left: 0; }
.ml-1  { margin-left: var(--sp-1); }
.ml-2  { margin-left: var(--sp-2); }
.ml-3  { margin-left: var(--sp-3); }
.ml-4  { margin-left: var(--sp-4); }
.ml-5  { margin-left: var(--sp-6); }
.ml-6  { margin-left: var(--sp-8); }
.ml-8  { margin-left: var(--sp-12); }
.ml-auto { margin-left: auto; }
.mx-0    { margin-inline: 0; }
.mx-1    { margin-inline: var(--sp-1); }
.mx-2    { margin-inline: var(--sp-2); }
.mx-3    { margin-inline: var(--sp-3); }
.mx-4    { margin-inline: var(--sp-4); }
.mx-5    { margin-inline: var(--sp-6); }
.mx-6    { margin-inline: var(--sp-8); }
.mx-8    { margin-inline: var(--sp-12); }
.mx-auto { margin-inline: auto; }
.my-0    { margin-block: 0; }
.my-1    { margin-block: var(--sp-1); }
.my-2    { margin-block: var(--sp-2); }
.my-3    { margin-block: var(--sp-3); }
.my-4    { margin-block: var(--sp-4); }
.my-5    { margin-block: var(--sp-6); }
.my-6    { margin-block: var(--sp-8); }
.my-8    { margin-block: var(--sp-12); }
.my-auto { margin-block: auto; }
/* ---------- PADDING ---------- */
.p-0  { padding: 0; }
.p-1  { padding: var(--sp-1); }
.p-2  { padding: var(--sp-2); }
.p-3  { padding: var(--sp-3); }
.p-4  { padding: var(--sp-4); }
.p-5  { padding: var(--sp-6); }
.p-6  { padding: var(--sp-8); }
.p-8  { padding: var(--sp-12); }
.pt-0  { padding-top: 0; }
.pt-1  { padding-top: var(--sp-1); }
.pt-2  { padding-top: var(--sp-2); }
.pt-3  { padding-top: var(--sp-3); }
.pt-4  { padding-top: var(--sp-4); }
.pt-5  { padding-top: var(--sp-6); }
.pt-6  { padding-top: var(--sp-8); }
.pt-8  { padding-top: var(--sp-12); }
.pr-0  { padding-right: 0; }
.pr-1  { padding-right: var(--sp-1); }
.pr-2  { padding-right: var(--sp-2); }
.pr-3  { padding-right: var(--sp-3); }
.pr-4  { padding-right: var(--sp-4); }
.pr-5  { padding-right: var(--sp-6); }
.pr-6  { padding-right: var(--sp-8); }
.pr-8  { padding-right: var(--sp-12); }
.pb-0  { padding-bottom: 0; }
.pb-1  { padding-bottom: var(--sp-1); }
.pb-2  { padding-bottom: var(--sp-2); }
.pb-3  { padding-bottom: var(--sp-3); }
.pb-4  { padding-bottom: var(--sp-4); }
.pb-5  { padding-bottom: var(--sp-6); }
.pb-6  { padding-bottom: var(--sp-8); }
.pb-8  { padding-bottom: var(--sp-12); }
.pl-0  { padding-left: 0; }
.pl-1  { padding-left: var(--sp-1); }
.pl-2  { padding-left: var(--sp-2); }
.pl-3  { padding-left: var(--sp-3); }
.pl-4  { padding-left: var(--sp-4); }
.pl-5  { padding-left: var(--sp-6); }
.pl-6  { padding-left: var(--sp-8); }
.pl-8  { padding-left: var(--sp-12); }
.px-0  { padding-inline: 0; }
.px-1  { padding-inline: var(--sp-1); }
.px-2  { padding-inline: var(--sp-2); }
.px-3  { padding-inline: var(--sp-3); }
.px-4  { padding-inline: var(--sp-4); }
.px-5  { padding-inline: var(--sp-6); }
.px-6  { padding-inline: var(--sp-8); }
.px-8  { padding-inline: var(--sp-12); }
.py-0  { padding-block: 0; }
.py-1  { padding-block: var(--sp-1); }
.py-2  { padding-block: var(--sp-2); }
.py-3  { padding-block: var(--sp-3); }
.py-4  { padding-block: var(--sp-4); }
.py-5  { padding-block: var(--sp-6); }
.py-6  { padding-block: var(--sp-8); }
.py-8  { padding-block: var(--sp-12); }
/* ---------- TEXT ---------- */
.text-start    { text-align: start; }
.text-end      { text-align: end; }
.text-center   { text-align: center; }
.text-nowrap   { white-space: nowrap; }
.text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-break    { word-wrap: break-word; overflow-wrap: break-word; }
.text-uppercase   { text-transform: uppercase; }
.text-lowercase   { text-transform: lowercase; }
.text-capitalize  { text-transform: capitalize; }
.fw-normal  { font-weight: var(--fw-regular); }
.fw-medium  { font-weight: var(--fw-medium); }
.fw-semibold { font-weight: var(--fw-semibold); }
.fw-bold    { font-weight: var(--fw-bold); }
.fs-sm   { font-size: var(--fs-sm); }
.fs-base { font-size: var(--fs-base); }
.fs-md   { font-size: var(--fs-md); }
.fs-lg   { font-size: var(--fs-lg); }
.fs-xl   { font-size: var(--fs-xl); }
.lh-tight  { line-height: var(--lh-tight); }
.lh-snug   { line-height: var(--lh-snug); }
.lh-normal { line-height: var(--lh-normal); }
.lh-loose  { line-height: var(--lh-loose); }
.font-sans    { font-family: var(--font-sans); }
.font-mono    { font-family: var(--font-mono); }
.font-display { font-family: var(--font-display); }
/* ---------- SIZING ---------- */
.w-25   { width: 25%; }
.w-50   { width: 50%; }
.w-75   { width: 75%; }
.w-100  { width: 100%; }
.w-auto { width: auto; }
.h-25   { height: 25%; }
.h-50   { height: 50%; }
.h-75   { height: 75%; }
.h-100  { height: 100%; }
.h-auto { height: auto; }
.mw-100 { max-width: 100%; }
.mh-100 { max-height: 100%; }
.min-vw-100 { min-width: 100vw; }
.min-vh-100 { min-height: 100vh; }
.vw-100     { width: 100vw; }
.vh-100     { height: 100vh; }
/* ---------- VISIBILITY / POSITION ---------- */
.visible   { visibility: visible; }
.invisible { visibility: hidden; }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.position-static   { position: static; }
.position-relative { position: relative; }
.position-absolute { position: absolute; }
.position-fixed    { position: fixed; }
.position-sticky   { position: sticky; }
.top-0    { top: 0; }
.top-50   { top: 50%; }
.top-100  { top: 100%; }
.bottom-0   { bottom: 0; }
.bottom-50  { bottom: 50%; }
.bottom-100 { bottom: 100%; }
.start-0    { inset-inline-start: 0; }
.start-50   { inset-inline-start: 50%; }
.start-100  { inset-inline-start: 100%; }
.end-0      { inset-inline-end: 0; }
.end-50     { inset-inline-end: 50%; }
.end-100    { inset-inline-end: 100%; }
.overflow-auto    { overflow: auto; }
.overflow-hidden  { overflow: hidden; }
.overflow-visible { overflow: visible; }
.overflow-scroll  { overflow: scroll; }
/* ---------- COLOR / BACKGROUND ---------- */
.text-ink     { color: var(--ink); }
.text-paper   { color: var(--paper); }
.text-muted   { color: var(--concrete-300); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-danger  { color: var(--danger); }
.text-info    { color: var(--info); }
.text-primary { color: var(--primary); }
.bg-paper   { background-color: var(--paper); }
.bg-paper-2 { background-color: var(--paper-2); }
.bg-bone    { background-color: var(--bone); }
.bg-ink     { background-color: var(--ink); }
.bg-primary { background-color: var(--primary); }
.bg-success { background-color: var(--success-bg); }
.bg-warning { background-color: var(--warning-bg); }
.bg-danger  { background-color: var(--danger-bg); }
.bg-info    { background-color: var(--info-bg); }
.border       { border: var(--bw-3) solid var(--ink); }
.border-0     { border: 0; }
.border-top   { border-top: var(--bw-3) solid var(--ink); }
.border-bottom { border-bottom: var(--bw-3) solid var(--ink); }
.border-start { border-inline-start: var(--bw-3) solid var(--ink); }
.border-end   { border-inline-end: var(--bw-3) solid var(--ink); }
/* ---------- MISC ---------- */
.rounded-0 { border-radius: var(--r-0); }
.rounded-1 { border-radius: var(--r-1); }
.rounded-2 { border-radius: var(--r-2); }
.rounded-3 { border-radius: var(--r-3); }
.shadow-none { box-shadow: none; }
.cursor-pointer { cursor: pointer; }
.user-select-none { user-select: none; }
.pe-none { pointer-events: none; }
.pe-auto { pointer-events: auto; }
/* ============================================
   RESPONSIVE VARIANTS — mobile-first (min-width)
   sm: 640px  |  md: 768px  |  lg: 1024px
   ============================================ */
/* ---------- SM (≥ 640px) ---------- */
@media (min-width: 640px) {
  .d-sm-none         { display: none; }
  .d-sm-block        { display: block; }
  .d-sm-inline       { display: inline; }
  .d-sm-inline-block { display: inline-block; }
  .d-sm-flex         { display: flex; }
  .d-sm-inline-flex  { display: inline-flex; }
  .d-sm-grid         { display: grid; }

  .flex-sm-row            { flex-direction: row; }
  .flex-sm-column         { flex-direction: column; }
  .flex-sm-row-reverse    { flex-direction: row-reverse; }
  .flex-sm-column-reverse { flex-direction: column-reverse; }
  .flex-sm-wrap           { flex-wrap: wrap; }
  .flex-sm-nowrap         { flex-wrap: nowrap; }

  .justify-content-sm-start   { justify-content: flex-start; }
  .justify-content-sm-end     { justify-content: flex-end; }
  .justify-content-sm-center  { justify-content: center; }
  .justify-content-sm-between { justify-content: space-between; }

  .align-items-sm-start   { align-items: flex-start; }
  .align-items-sm-end     { align-items: flex-end; }
  .align-items-sm-center  { align-items: center; }
  .align-items-sm-stretch { align-items: stretch; }

  .m-sm-0  { margin: 0; }
  .m-sm-1  { margin: var(--sp-1); }
  .m-sm-2  { margin: var(--sp-2); }
  .m-sm-3  { margin: var(--sp-3); }
  .m-sm-4  { margin: var(--sp-4); }
  .m-sm-5  { margin: var(--sp-6); }
  .m-sm-auto { margin: auto; }

  .mt-sm-0  { margin-top: 0; }
  .mt-sm-1  { margin-top: var(--sp-1); }
  .mt-sm-2  { margin-top: var(--sp-2); }
  .mt-sm-3  { margin-top: var(--sp-3); }
  .mt-sm-4  { margin-top: var(--sp-4); }
  .mt-sm-5  { margin-top: var(--sp-6); }

  .mr-sm-0  { margin-right: 0; }
  .mr-sm-1  { margin-right: var(--sp-1); }
  .mr-sm-2  { margin-right: var(--sp-2); }
  .mr-sm-3  { margin-right: var(--sp-3); }
  .mr-sm-4  { margin-right: var(--sp-4); }
  .mr-sm-5  { margin-right: var(--sp-6); }

  .mb-sm-0  { margin-bottom: 0; }
  .mb-sm-1  { margin-bottom: var(--sp-1); }
  .mb-sm-2  { margin-bottom: var(--sp-2); }
  .mb-sm-3  { margin-bottom: var(--sp-3); }
  .mb-sm-4  { margin-bottom: var(--sp-4); }
  .mb-sm-5  { margin-bottom: var(--sp-6); }

  .ml-sm-0  { margin-left: 0; }
  .ml-sm-1  { margin-left: var(--sp-1); }
  .ml-sm-2  { margin-left: var(--sp-2); }
  .ml-sm-3  { margin-left: var(--sp-3); }
  .ml-sm-4  { margin-left: var(--sp-4); }
  .ml-sm-5  { margin-left: var(--sp-6); }

  .mx-sm-0    { margin-inline: 0; }
  .mx-sm-auto { margin-inline: auto; }
  .my-sm-0    { margin-block: 0; }

  .p-sm-0  { padding: 0; }
  .p-sm-1  { padding: var(--sp-1); }
  .p-sm-2  { padding: var(--sp-2); }
  .p-sm-3  { padding: var(--sp-3); }
  .p-sm-4  { padding: var(--sp-4); }
  .p-sm-5  { padding: var(--sp-6); }

  .pt-sm-0  { padding-top: 0; }
  .pt-sm-1  { padding-top: var(--sp-1); }
  .pt-sm-2  { padding-top: var(--sp-2); }
  .pt-sm-3  { padding-top: var(--sp-3); }
  .pt-sm-4  { padding-top: var(--sp-4); }
  .pt-sm-5  { padding-top: var(--sp-6); }

  .pr-sm-0  { padding-right: 0; }
  .pr-sm-3  { padding-right: var(--sp-3); }
  .pr-sm-5  { padding-right: var(--sp-6); }

  .pb-sm-0  { padding-bottom: 0; }
  .pb-sm-3  { padding-bottom: var(--sp-3); }
  .pb-sm-5  { padding-bottom: var(--sp-6); }

  .pl-sm-0  { padding-left: 0; }
  .pl-sm-3  { padding-left: var(--sp-3); }
  .pl-sm-5  { padding-left: var(--sp-6); }

  .px-sm-0  { padding-inline: 0; }
  .px-sm-3  { padding-inline: var(--sp-3); }
  .px-sm-5  { padding-inline: var(--sp-6); }

  .py-sm-0  { padding-block: 0; }
  .py-sm-3  { padding-block: var(--sp-3); }
  .py-sm-5  { padding-block: var(--sp-6); }

  .gap-sm-0 { gap: 0; }
  .gap-sm-2 { gap: var(--sp-2); }
  .gap-sm-3 { gap: var(--sp-3); }
  .gap-sm-4 { gap: var(--sp-4); }

  .text-sm-start  { text-align: start; }
  .text-sm-center { text-align: center; }
  .text-sm-end    { text-align: end; }
}
/* ---------- MD (≥ 768px) ---------- */
@media (min-width: 768px) {
  .d-md-none         { display: none; }
  .d-md-block        { display: block; }
  .d-md-inline       { display: inline; }
  .d-md-inline-block { display: inline-block; }
  .d-md-flex         { display: flex; }
  .d-md-inline-flex  { display: inline-flex; }
  .d-md-grid         { display: grid; }

  .flex-md-row            { flex-direction: row; }
  .flex-md-column         { flex-direction: column; }
  .flex-md-row-reverse    { flex-direction: row-reverse; }
  .flex-md-column-reverse { flex-direction: column-reverse; }
  .flex-md-wrap           { flex-wrap: wrap; }
  .flex-md-nowrap         { flex-wrap: nowrap; }

  .justify-content-md-start   { justify-content: flex-start; }
  .justify-content-md-end     { justify-content: flex-end; }
  .justify-content-md-center  { justify-content: center; }
  .justify-content-md-between { justify-content: space-between; }

  .align-items-md-start   { align-items: flex-start; }
  .align-items-md-end     { align-items: flex-end; }
  .align-items-md-center  { align-items: center; }
  .align-items-md-stretch { align-items: stretch; }

  .m-md-0  { margin: 0; }
  .m-md-1  { margin: var(--sp-1); }
  .m-md-2  { margin: var(--sp-2); }
  .m-md-3  { margin: var(--sp-3); }
  .m-md-4  { margin: var(--sp-4); }
  .m-md-5  { margin: var(--sp-6); }
  .m-md-auto { margin: auto; }

  .mt-md-0  { margin-top: 0; }
  .mt-md-1  { margin-top: var(--sp-1); }
  .mt-md-2  { margin-top: var(--sp-2); }
  .mt-md-3  { margin-top: var(--sp-3); }
  .mt-md-4  { margin-top: var(--sp-4); }
  .mt-md-5  { margin-top: var(--sp-6); }

  .mr-md-0  { margin-right: 0; }
  .mr-md-3  { margin-right: var(--sp-3); }
  .mr-md-5  { margin-right: var(--sp-6); }

  .mb-md-0  { margin-bottom: 0; }
  .mb-md-3  { margin-bottom: var(--sp-3); }
  .mb-md-5  { margin-bottom: var(--sp-6); }

  .ml-md-0  { margin-left: 0; }
  .ml-md-3  { margin-left: var(--sp-3); }
  .ml-md-5  { margin-left: var(--sp-6); }

  .mx-md-0    { margin-inline: 0; }
  .mx-md-auto { margin-inline: auto; }
  .my-md-0    { margin-block: 0; }

  .p-md-0  { padding: 0; }
  .p-md-1  { padding: var(--sp-1); }
  .p-md-2  { padding: var(--sp-2); }
  .p-md-3  { padding: var(--sp-3); }
  .p-md-4  { padding: var(--sp-4); }
  .p-md-5  { padding: var(--sp-6); }

  .pt-md-0  { padding-top: 0; }
  .pt-md-3  { padding-top: var(--sp-3); }
  .pt-md-5  { padding-top: var(--sp-6); }

  .pb-md-0  { padding-bottom: 0; }
  .pb-md-3  { padding-bottom: var(--sp-3); }
  .pb-md-5  { padding-bottom: var(--sp-6); }

  .px-md-0  { padding-inline: 0; }
  .px-md-3  { padding-inline: var(--sp-3); }
  .px-md-5  { padding-inline: var(--sp-6); }

  .py-md-0  { padding-block: 0; }
  .py-md-3  { padding-block: var(--sp-3); }
  .py-md-5  { padding-block: var(--sp-6); }

  .gap-md-0 { gap: 0; }
  .gap-md-3 { gap: var(--sp-3); }
  .gap-md-4 { gap: var(--sp-4); }

  .text-md-start  { text-align: start; }
  .text-md-center { text-align: center; }
  .text-md-end    { text-align: end; }
}
/* ---------- LG (≥ 1024px) ---------- */
@media (min-width: 1024px) {
  .d-lg-none         { display: none; }
  .d-lg-block        { display: block; }
  .d-lg-inline       { display: inline; }
  .d-lg-inline-block { display: inline-block; }
  .d-lg-flex         { display: flex; }
  .d-lg-inline-flex  { display: inline-flex; }
  .d-lg-grid         { display: grid; }

  .flex-lg-row            { flex-direction: row; }
  .flex-lg-column         { flex-direction: column; }
  .flex-lg-row-reverse    { flex-direction: row-reverse; }
  .flex-lg-column-reverse { flex-direction: column-reverse; }
  .flex-lg-wrap           { flex-wrap: wrap; }
  .flex-lg-nowrap         { flex-wrap: nowrap; }

  .justify-content-lg-start   { justify-content: flex-start; }
  .justify-content-lg-end     { justify-content: flex-end; }
  .justify-content-lg-center  { justify-content: center; }
  .justify-content-lg-between { justify-content: space-between; }

  .align-items-lg-start   { align-items: flex-start; }
  .align-items-lg-end     { align-items: flex-end; }
  .align-items-lg-center  { align-items: center; }
  .align-items-lg-stretch { align-items: stretch; }

  .m-lg-0  { margin: 0; }
  .m-lg-1  { margin: var(--sp-1); }
  .m-lg-2  { margin: var(--sp-2); }
  .m-lg-3  { margin: var(--sp-3); }
  .m-lg-4  { margin: var(--sp-4); }
  .m-lg-5  { margin: var(--sp-6); }
  .m-lg-auto { margin: auto; }

  .mt-lg-0  { margin-top: 0; }
  .mt-lg-3  { margin-top: var(--sp-3); }
  .mt-lg-5  { margin-top: var(--sp-6); }

  .mb-lg-0  { margin-bottom: 0; }
  .mb-lg-3  { margin-bottom: var(--sp-3); }
  .mb-lg-5  { margin-bottom: var(--sp-6); }

  .mx-lg-0    { margin-inline: 0; }
  .mx-lg-auto { margin-inline: auto; }

  .p-lg-0  { padding: 0; }
  .p-lg-1  { padding: var(--sp-1); }
  .p-lg-2  { padding: var(--sp-2); }
  .p-lg-3  { padding: var(--sp-3); }
  .p-lg-4  { padding: var(--sp-4); }
  .p-lg-5  { padding: var(--sp-6); }

  .px-lg-0  { padding-inline: 0; }
  .px-lg-3  { padding-inline: var(--sp-3); }
  .px-lg-5  { padding-inline: var(--sp-6); }

  .py-lg-0  { padding-block: 0; }
  .py-lg-3  { padding-block: var(--sp-3); }
  .py-lg-5  { padding-block: var(--sp-6); }

  .gap-lg-0 { gap: 0; }
  .gap-lg-3 { gap: var(--sp-3); }
  .gap-lg-4 { gap: var(--sp-4); }

  .text-lg-start  { text-align: start; }
  .text-lg-center { text-align: center; }
  .text-lg-end    { text-align: end; }
}
/* ============================================
   BRUT — Theme: Brutalist (default)
   Re-declares the default identity tokens.
   Functionally a no-op — serves as the living
   reference for theme authors.
   ============================================ */
[data-theme="brutalist"] {
  /* ---------- COLOR ---------- */
  --ink:          #000000;
  --paper:        #FAF7F0;
  --paper-2:      #F2EEE3;
  --bone:         #FFFFFF;

  --primary:      #FFD23F;
  --primary-soft: #FFE680;
  --primary-deep: #E0B400;

  --concrete-50:  #ECEAE3;
  --concrete-100: #DCD8CC;
  --concrete-200: #BFB9A8;
  --concrete-300: #8A8576;
  --concrete-400: #4F4D45;
  --concrete-500: #1F1E1A;

  --pop-pink:   #FF6B9D;
  --pop-lime:   #C6F432;
  --pop-blue:   #4D7CFF;
  --pop-orange: #FF7A2E;
  --pop-purple: #B57BFF;
  --pop-mint:   #7FE3C4;

  --success:    #2ECC71;
  --success-bg: #D9F7E5;
  --warning:    #FFB020;
  --warning-bg: #FFF1CC;
  --danger:     #FF3B30;
  --danger-bg:  #FFD9D6;
  --info:       #4D7CFF;
  --info-bg:    #DDE6FF;

  /* ---------- SEMANTIC ---------- */
  --bg-1:       var(--paper);
  --bg-2:       var(--paper-2);
  --bg-3:       var(--bone);
  --fg-1:       var(--ink);
  --fg-2:       var(--concrete-400);
  --fg-3:       var(--concrete-300);
  --border:     var(--ink);
  --accent:      var(--primary);
  --accent-soft: var(--primary-soft);
  --accent-deep: var(--primary-deep);
  --scrim-bg:      rgba(0, 0, 0, 0.4);
  --scrim-bg-soft: rgba(0, 0, 0, 0.06);

  /* ---------- SHADOW ---------- */
  --shadow-2xs: 3px 3px 0 0 var(--ink);
  --shadow-xs:  2px 2px 0 0 var(--ink);
  --shadow-sm:  4px 4px 0 0 var(--ink);
  --shadow-md:  6px 6px 0 0 var(--ink);
  --shadow-lg:  8px 8px 0 0 var(--ink);
  --shadow-xl:  12px 12px 0 0 var(--ink);
  --shadow-2xl: 16px 16px 0 0 var(--ink);

  /* ---------- TYPE ---------- */
  --font-display: 'Archivo Black', 'Helvetica Neue', Impact, sans-serif;
  --font-sans:    'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;

  /* ---------- SHAPE ---------- */
  --bw-3: 4px;
  --r-0:  0px;
}
/* ============================================
   BRUT — Theme: Corporate
   Clean, professional aesthetic. Blue accent,
   soft shadows, rounded corners, system fonts.
   ============================================ */
[data-theme="corporate"] {
  /* ---------- COLOR ---------- */
  --ink:          #1F2937;
  --paper:        #FFFFFF;
  --paper-2:      #F9FAFB;
  --bone:         #FFFFFF;

  --primary:      #2563EB;
  --primary-soft: #DBEAFE;
  --primary-deep: #1D4ED8;

  --concrete-50:  #F9FAFB;
  --concrete-100: #E5E7EB;
  --concrete-200: #D1D5DB;
  --concrete-300: #9CA3AF;
  --concrete-400: #6B7280;
  --concrete-500: #374151;

  --pop-pink:   #EC4899;
  --pop-lime:   #84CC16;
  --pop-blue:   #3B82F6;
  --pop-orange: #F97316;
  --pop-purple: #8B5CF6;
  --pop-mint:   #14B8A6;

  --success:    #059669;
  --success-bg: #D1FAE5;
  --warning:    #D97706;
  --warning-bg: #FEF3C7;
  --danger:     #DC2626;
  --danger-bg:  #FEE2E2;
  --info:       #2563EB;
  --info-bg:    #DBEAFE;

  /* ---------- SEMANTIC ---------- */
  --bg-1:       var(--paper);
  --bg-2:       var(--paper-2);
  --bg-3:       var(--bone);
  --fg-1:       var(--ink);
  --fg-2:       var(--concrete-400);
  --fg-3:       var(--concrete-300);
  --border:     var(--concrete-200);
  --accent:      var(--primary);
  --accent-soft: var(--primary-soft);
  --accent-deep: var(--primary-deep);
  --scrim-bg:      rgba(0, 0, 0, 0.3);
  --scrim-bg-soft: rgba(0, 0, 0, 0.04);

  /* ---------- SHADOW ---------- */
  --shadow-2xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-xs:  0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm:  0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

  /* ---------- TYPE ---------- */
  --font-display: 'Inter', -apple-system, 'Segoe UI', sans-serif;
  --font-sans:    'Inter', -apple-system, 'Segoe UI', sans-serif;

  /* ---------- SHAPE ---------- */
  --bw-3: 2px;
  --r-0:  6px;
  --r-1:  6px;
  --r-2:  8px;
  --r-3:  12px;
}
/* ============================================
   BRUT — Theme: Minimal
   Ultra-clean, monochrome. No shadows, hairline
   borders, generous whitespace, quiet palette.
   ============================================ */
[data-theme="minimal"] {
  /* ---------- COLOR ---------- */
  --ink:          #171717;
  --paper:        #FFFFFF;
  --paper-2:      #FAFAFA;
  --bone:         #FFFFFF;

  --primary:      #171717;
  --primary-soft: #F5F5F5;
  --primary-deep: #000000;

  --concrete-50:  #FAFAFA;
  --concrete-100: #F5F5F5;
  --concrete-200: #E5E5E5;
  --concrete-300: #A3A3A3;
  --concrete-400: #737373;
  --concrete-500: #262626;

  --pop-pink:   #F472B6;
  --pop-lime:   #A3E635;
  --pop-blue:   #60A5FA;
  --pop-orange: #FB923C;
  --pop-purple: #A78BFA;
  --pop-mint:   #5EEAD4;

  --success:    #16A34A;
  --success-bg: #F0FDF4;
  --warning:    #CA8A04;
  --warning-bg: #FEFCE8;
  --danger:     #DC2626;
  --danger-bg:  #FEF2F2;
  --info:       #2563EB;
  --info-bg:    #EFF6FF;

  /* ---------- SEMANTIC ---------- */
  --bg-1:       var(--paper);
  --bg-2:       var(--paper-2);
  --bg-3:       var(--bone);
  --fg-1:       var(--ink);
  --fg-2:       var(--concrete-400);
  --fg-3:       var(--concrete-300);
  --border:     var(--concrete-200);
  --accent:      var(--primary);
  --accent-soft: var(--primary-soft);
  --accent-deep: var(--primary-deep);
  --scrim-bg:      rgba(0, 0, 0, 0.2);
  --scrim-bg-soft: rgba(0, 0, 0, 0.03);

  /* ---------- SHADOW ---------- */
  --shadow-2xs: none;
  --shadow-xs:  none;
  --shadow-sm:  none;
  --shadow-md:  none;
  --shadow-lg:  none;
  --shadow-xl:  none;
  --shadow-2xl: none;

  /* ---------- TYPE ---------- */
  --font-display: 'Inter', -apple-system, 'Segoe UI', sans-serif;
  --font-sans:    'Inter', -apple-system, 'Segoe UI', sans-serif;

  /* ---------- SHAPE ---------- */
  --bw-3: 1px;
  --bw-1: 1px;
  --bw-2: 1px;
  --bw-4: 1px;
  --bw-5: 2px;
  --r-0:  4px;
  --r-1:  4px;
  --r-2:  6px;
  --r-3:  8px;
}
/*$vite$:1*/