/* ================================================================
   REEGL CSS - Complete Bundle
   Generated by reegl-css/tools/build.mjs

   Source layers:
   10. reset (10-reset.css)
   20. variables (20-variables.css)
   30. base (30-base.css)
   40. layout (40-layout.css)
   50. components (50-components.css)

   Edit files in src/, then run from repo root:
   node reegl-css/tools/build.mjs

   Or from inside reegl-css/:
   node tools/build.mjs
   ================================================================ */


/* ================================================================
   Source: 10-reset.css
   ================================================================ */

/* ================================================================
   REEGL CSS — 1. Reset
   Modern CSS reset. Zero state foundation.
   Minimal, fast, accessible.
   ================================================================ */

/* Universal box model + zero state */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Document normalize */
html {
  -webkit-text-size-adjust: 100%;  /* Prevent iOS zoom on orientation change */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  tab-size: 4;
}

/* Full viewport height */
body {
  min-height: 100dvh;
  min-height: 100vh; /* fallback */
}

/* Responsive media */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Inherit font on all form controls */
input, button, textarea, select {
  font: inherit;
  color: inherit;
}

/* Clean slate for buttons */
button {
  cursor: pointer;
  background: none;
  border: none;
}

/* Remove list styling */
ul, ol {
  list-style: none;
}

/* Links: no default blue */
a {
  color: inherit;
  text-decoration: none;
}

/* Long word wrapping */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* Tables */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* Horizontal rule */
hr {
  height: 0;
  color: inherit;
}

/* Hidden elements */
[hidden] {
  display: none !important;
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ================================================================
   Source: 20-variables.css
   ================================================================ */

/* ================================================================
   REEGL CSS — 2. Tokens
   The DNA of the system. Utopia fluid math + design tokens.

   LAYERS:
   A. Utopia fluid scales  → do not touch (regenerate at utopia.fyi)
   B. Brand colors         → CUSTOMIZE THESE for your project
   C. Gray scale           → neutral palette
   D. Status colors        → info / success / warn / danger
   E. Design primitives    → radius, shadow, transition, fonts
   F. Semantic theme       → what components actually use
                             (dark mode only needs to override this layer)

   THEME: data-r-paint is exclusive when present;
   legacy .dark/.light is no-opt-in only.
   ================================================================ */

:root {

  /* ──────────────────────────────────────────────────────
     A. UTOPIA FLUID TYPOGRAPHY SCALE
     Min: 320px @ 14px | Max: 1600px @ 18px | Scale: 1.25
     Regenerate: https://utopia.fyi/type/calculator
     These clamp() values are mathematically precise.
     DO NOT use px values for font-size. Use these.
     ────────────────────────────────────────────────────── */

  --ust-2: clamp(0.56rem, 0.52rem + 0.2vw, 0.72rem);            /* ~9–12px   2xs */
  --ust-1: clamp(0.7rem, 0.65rem + 0.25vw, 0.9rem);             /* ~11–14px  xs  */
  --ust0:  clamp(0.875rem, 0.8125rem + 0.3125vw, 1.125rem);     /* ~14–18px  BASE ← body text */
  --ust1:  clamp(1.0938rem, 1.0156rem + 0.3906vw, 1.4063rem);   /* ~17–22px  l   */
  --ust2:  clamp(1.3672rem, 1.2695rem + 0.4883vw, 1.7578rem);   /* ~22–28px  xl  */
  --ust3:  clamp(1.709rem, 1.5869rem + 0.6104vw, 2.1973rem);    /* ~27–35px  2xl */
  --ust4:  clamp(2.1362rem, 1.9836rem + 0.7629vw, 2.7466rem);   /* ~34–44px  3xl */

  /* ──────────────────────────────────────────────────────
     A. UTOPIA FLUID SPACING SCALE
     Min: 320px @ 14px | Max: 1600px @ 18px | Scale: 1.25
     Regenerate: https://utopia.fyi/space/calculator
     ────────────────────────────────────────────────────── */

  --usp2xs: clamp(0.4375rem, 0.4063rem + 0.1563vw, 0.5625rem);  /* ~7–9px    */
  --uspxs:  clamp(0.6875rem, 0.6406rem + 0.2344vw, 0.875rem);   /* ~11–14px  */
  --usps:   clamp(0.875rem, 0.8125rem + 0.3125vw, 1.125rem);    /* ~14–18px  BASE */
  --uspm:   clamp(1.3125rem, 1.2188rem + 0.4688vw, 1.6875rem);  /* ~21–27px  */
  --uspl:   clamp(1.75rem, 1.625rem + 0.625vw, 2.25rem);        /* ~28–36px  */
  --uspxl:  clamp(2.625rem, 2.4375rem + 0.9375vw, 3.375rem);    /* ~42–54px  */
  --usp2xl: clamp(3.5rem, 3.25rem + 1.25vw, 4.5rem);            /* ~56–72px  */

  /* One-up pairs: wider fluid range for responsive contexts */
  --uspsm:  clamp(0.875rem, 0.6719rem + 1.0156vw, 1.6875rem);   /* ~14–27px  */
  --uspml:  clamp(1.3125rem, 1.0781rem + 1.1719vw, 2.25rem);    /* ~21–36px  */
  --usplxl: clamp(1.75rem, 1.3438rem + 2.0313vw, 3.375rem);     /* ~28–54px  */

  /* ──────────────────────────────────────────────────────
     B. BRAND COLORS  ← CUSTOMIZE THESE
     ────────────────────────────────────────────────────── */

  --c1: #418F5B;   /* Primary   – Reegl Classic green     */
  --c2: #042A2B;   /* Secondary – supporting brand color  */
  --c3: #EE3E23;   /* Accent    – CTA / action color      */

  /* ──────────────────────────────────────────────────────
     C. GRAY SCALE
     ────────────────────────────────────────────────────── */

  --cw:    #ffffff;
  --cg50:  #f9fafb;
  --cg100: #f3f4f6;
  --cg200: #e5e7eb;
  --cg300: #d1d5db;
  --cg400: #9ca3af;
  --cg500: #6b7280;
  --cg600: #4b5563;
  --cg700: #374151;
  --cg800: #1f2937;
  --cg900: #111827;
  --cg950: #030712;
  --cb:    #000000;

  /* ──────────────────────────────────────────────────────
     D. STATUS COLORS
     ────────────────────────────────────────────────────── */

  --c-info:    #3b82f6;
  --c-success: #10b981;
  --c-warn:    #f59e0b;
  --c-danger:  #ef4444;

  /* Action foreground tokens.
     If an action color changes, its matching --on-* token must pass contrast. */
  --on-c1:      var(--cg950);
  --on-c2:      var(--cw);
  --on-c3:      var(--cg900);
  --on-info:    var(--cg900);
  --on-success: var(--cg900);
  --on-warn:    var(--cg900);
  --on-danger:  var(--cg900);

  /* ──────────────────────────────────────────────────────
     E. DESIGN PRIMITIVES
     ────────────────────────────────────────────────────── */

  /* Radius */
  --radius-sm:   4px;
  --radius:      6px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* Shadow */
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.06);
  --shadow:    0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.06);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.05);

  /* Transition */
  --transition: all 200ms cubic-bezier(0, 0, 0.2, 1);
  --transition-fast: all 100ms cubic-bezier(0, 0, 0.2, 1);

  /* Typography */
  --font-sans:  system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:  'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;

  /* Layout */
  --container-max: 83.25rem;  /* ~1332px */

  /* ──────────────────────────────────────────────────────
     F. SEMANTIC THEME TOKENS
     These are what all components reference.
     Dark mode = override only this layer.
     ────────────────────────────────────────────────────── */

  --bg:          var(--cw);          /* Page background         */
  --surface:     var(--cg50);        /* Card / elevated surface */
  --surface-2:   var(--cg100);       /* Secondary surface       */
  --surface-3:   var(--cg200);       /* Tertiary surface        */
  --text:        var(--cg900);       /* Primary text            */
  --text-muted:  var(--cg600);       /* Secondary / muted text  */
  --border:      var(--cg200);       /* Default border          */
  --ring:        var(--c1);          /* Focus ring              */
  --_h:          var(--c2);
  --_am:         var(--cb);
  --_ap:         80%;
  --_aw:         60%;
}

/* Each explicit region resets the semantic palette, including system/light inside dark. */
[data-r-paint~="theme-light"],
[data-r-paint~="theme-system"],
:root:not([data-r-paint]).light,
:root:not([data-r-paint]) body.light:not([data-r-paint]) {
  color-scheme: light;
  --bg:          var(--cw);
  --surface:     var(--cg50);
  --surface-2:   var(--cg100);
  --surface-3:   var(--cg200);
  --text:        var(--cg900);
  --text-muted:  var(--cg600);
  --border:      var(--cg200);
  --_h:          var(--c2);
  --_am:         var(--cb);
  --_ap:         80%;
  --_aw:         60%;
}

[data-r-paint~="theme-system"] { color-scheme: light dark; }

@media (prefers-color-scheme: dark) {
  :root:not([data-r-paint]):not(.light),
  [data-r-paint~="theme-system"] {
    color-scheme: dark;
    --bg:         var(--cg950);
    --surface:    var(--cg900);
    --surface-2:  var(--cg800);
    --surface-3:  var(--cg700);
    --text:       var(--cg50);
    --text-muted: var(--cg300);
    --border:     var(--cg700);
    --_h:         var(--text);
    --_am:        var(--cw);
    --_ap:        90%;
    --_aw:        90%;
  }
}

[data-r-paint~="theme-dark"],
:root:not([data-r-paint]).dark,
:root:not([data-r-paint]) body.dark:not([data-r-paint]) {
  color-scheme: dark;
  --bg:         var(--cg950);
  --surface:    var(--cg900);
  --surface-2:  var(--cg800);
  --surface-3:  var(--cg700);
  --text:       var(--cg50);
  --text-muted: var(--cg300);
  --border:     var(--cg700);
  --_h:         var(--text);
  --_am:        var(--cw);
  --_ap:        90%;
  --_aw:        90%;
}


/* ================================================================
   Source: 30-base.css
   ================================================================ */

/* ================================================================
   REEGL CSS — 3. Base
   Smart defaults for HTML elements. Zero class names.
   Everything looks good out of the box.

   Philosophy: classless layer — semantic HTML is the API.
   If you need overrides, override the tokens in 20-variables.css.
   ================================================================ */

/* ── DOCUMENT ── */
html {
  font-size: var(--ust0); /* Fluid base: ~14px @ 320px → ~18px @ 1600px */
}

body {
  font-family: var(--font-sans);
  font-size: 1rem; /* inherits from html (fluid) */
  line-height: 1.6;
  color: var(--text);
  background-color: var(--bg);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Explicit theme regions paint their own surface; component styles can override it. */
:where([data-r-paint]) {
  color: var(--text);
  background-color: var(--bg);
}

/* ── HEADINGS ── */
h1, h2, h3, h4, h5, h6 {
  color: var(--_h);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.02em;
}

h1 { font-size: var(--ust4); margin-bottom: var(--uspm); }
h2 { font-size: var(--ust3); margin-bottom: var(--usps); }
h3 { font-size: var(--ust2); margin-bottom: var(--usps); }
h4 { font-size: var(--ust1); margin-bottom: var(--uspxs); }
h5 { font-size: var(--ust0); margin-bottom: var(--uspxs); }
h6 { font-size: var(--ust-1); margin-bottom: var(--uspxs); font-weight: 600; }

/* ── PARAGRAPHS ── */
p {
  margin-bottom: var(--usps);
  color: var(--text);
  max-width: 70ch; /* comfortable reading width */
}

p:last-child { margin-bottom: 0; }

/* ── LINKS ── */
a {
  color: var(--c1);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.2em;
  transition: var(--transition);
}

a:hover {
  color: var(--c3);
  text-decoration-color: currentColor;
}

a:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ── BLOCKQUOTE ── */
blockquote {
  border-left: 3px solid var(--c1);
  padding: var(--usps) var(--uspm);
  margin: var(--uspm) 0;
  color: var(--text-muted);
  font-style: italic;
  background: var(--surface);
  border-radius: 0 var(--radius) var(--radius) 0;
}

blockquote cite {
  display: block;
  margin-top: var(--uspxs);
  font-size: var(--ust-1);
  font-style: normal;
  font-weight: 600;
  color: var(--text);
}

/* ── CODE ── */
code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--surface-2);
  color: var(--c3);
  padding: 0.1em 0.4em;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

pre {
  font-family: var(--font-mono);
  font-size: var(--ust-1);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--uspm);
  overflow-x: auto;
  margin: var(--uspm) 0;
}

pre code {
  background: none;
  border: none;
  padding: 0;
  color: var(--text);
  font-size: inherit;
}

/* ── HORIZONTAL RULE ── */
hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: var(--uspl) 0;
}

/* ── LISTS ── */
ul, ol {
  padding-left: var(--uspm);
  margin-bottom: var(--usps);
}
ul { list-style: disc; }
ol { list-style: decimal; }

li {
  margin-bottom: var(--uspxs);
  color: var(--text);
}
li:last-child { margin-bottom: 0; }

/* ── TABLES ── */
table {
  width: 100%;
  margin: var(--uspm) 0;
  font-size: var(--ust-1);
  display: block;
  overflow-x: auto;
}

thead { background: var(--surface); }

th, td {
  padding: var(--uspxs) var(--usps);
  text-align: left;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}

th {
  font-weight: 600;
  font-size: var(--ust-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

tr:last-child td { border-bottom: none; }

/* ── FIGURE ── */
figure { margin: var(--uspm) 0; }

figcaption {
  margin-top: var(--uspxs);
  font-size: var(--ust-1);
  color: var(--text-muted);
  text-align: center;
}

/* ── DETAILS / SUMMARY ── */
details {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--usps) var(--uspm);
  margin: var(--usps) 0;
}

summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--text);
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--uspxs);
}

summary::before {
  content: '▶';
  font-size: 0.7em;
  transition: var(--transition);
  flex-shrink: 0;
}

details[open] > summary::before { transform: rotate(90deg); }

details > * + * { margin-top: var(--usps); }

/* ── MARK / HIGHLIGHT ── */
mark {
  background: color-mix(in srgb, var(--c3) 20%, transparent);
  color: var(--text);
  padding: 0.1em 0.25em;
  border-radius: 2px;
}

/* ── SMALL / SUB / SUP ── */
small { font-size: var(--ust-1); }
sub, sup { font-size: var(--ust-2); }

/* ── SELECTION ── */
::selection {
  background: color-mix(in srgb, var(--c1) 25%, transparent);
  color: var(--text);
}

/* ── FOCUS VISIBLE (global) ── */
:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}


/* ================================================================
   Source: 40-layout.css
   ================================================================ */

/* ================================================================
   REEGL CSS — 4. Layout
   5 layout macros that replace an entire grid system.
   Zero utility class spam. Modern CSS does the math.

   MACROS:
   .container  → centered max-width with fluid gutters
   .stack      → vertical rhythm (lobotomized owl pattern)
   .cluster    → flex wrap for inline groups (tags, buttons)
   .auto-grid  → responsive grid — zero media queries
   .split      → sidebar + main — one media query
   .prose      → optimal reading column

   CUSTOMIZATION via CSS variables (inline style or override):
   .stack     → --stack-gap
   .cluster   → --cluster-gap
   .auto-grid → --grid-gap, --min-col
   .split     → --sidebar-width
   ================================================================ */

/* ──────────────────────────────────────────────────────
   CONTAINER
   Centered, fluid-padded wrapper.
   Usage: <div class="container">...</div>
   ────────────────────────────────────────────────────── */
.container {
  max-width: var(--container-max);
  padding-inline: var(--uspm);
  margin-inline: auto;
  width: 100%;
}

/* ──────────────────────────────────────────────────────
   STACK
   Vertical rhythm. Every child gets top margin except first.
   Classic "lobotomized owl" — Every Layout pattern.

   Usage:
   <div class="stack">
     <p>Item 1</p>
     <p>Item 2</p>   ← gets margin-top: var(--uspm)
   </div>

   Custom gap:
   <div class="stack" style="--stack-gap: var(--uspl)">
   ────────────────────────────────────────────────────── */
.stack {
  display: flex;
  flex-direction: column;
}

.stack > * + * {
  margin-top: var(--stack-gap, var(--uspm));
}

/* ──────────────────────────────────────────────────────
   CLUSTER
   Flex wrap for inline groups. Items wrap naturally.
   Perfect for: tags, badges, button groups, nav items.

   Usage:
   <div class="cluster">
     <button class="btn">Tag 1</button>
     <button class="btn">Tag 2</button>
   </div>

   Custom gap:
   <div class="cluster" style="--cluster-gap: var(--uspxs)">
   ────────────────────────────────────────────────────── */
.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cluster-gap, var(--usps));
  align-items: center;
}

/* ──────────────────────────────────────────────────────
   AUTO-GRID
   Responsive grid — zero media queries.
   Columns auto-fit based on min item width.
   The browser decides 1/2/3/4... columns based on space.

   Usage:
   <div class="auto-grid">
     <div class="card">...</div>
     <div class="card">...</div>
     <div class="card">...</div>
   </div>

   Custom min column width (default: 16rem ≈ 256px):
   <div class="auto-grid" style="--min-col: 20rem">

   Custom gap:
   <div class="auto-grid" style="--grid-gap: var(--uspl)">
   ────────────────────────────────────────────────────── */
.auto-grid {
  display: grid;
  gap: var(--grid-gap, var(--uspm));
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(var(--min-col, 16rem), 100%), 1fr)
  );
}

/* ──────────────────────────────────────────────────────
   SPLIT
   Sidebar + main content.
   Mobile: stacked.
   Tablet+: fixed sidebar + fluid content.

   Usage:
   <div class="split">
     <aside>Sidebar</aside>
     <main>Content</main>
   </div>

   Custom sidebar width:
   <div class="split" style="--sidebar-width: 20rem">
   ────────────────────────────────────────────────────── */
.split {
  display: grid;
  gap: var(--uspl);
  grid-template-columns: 1fr;
}

@media (min-width: 48rem) { /* 768px */
  .split {
    grid-template-columns: var(--sidebar-width, 17.5rem) 1fr;
    align-items: start;
  }
}

/* ──────────────────────────────────────────────────────
   PROSE
   Optimal reading column.
   Centers content and constrains line length to ~68ch.

   Usage:
   <article class="prose">
     <h1>My Article</h1>
     <p>Content...</p>
   </article>
   ────────────────────────────────────────────────────── */
.prose {
  max-width: 68ch;
  margin-inline: auto;
}

.prose > * + * {
  margin-top: var(--uspm);
}

.prose h1, .prose h2, .prose h3 {
  margin-top: var(--uspl);
}

.prose h1:first-child,
.prose h2:first-child,
.prose h3:first-child {
  margin-top: 0;
}

.prose p {
  max-width: none; /* override base 70ch inside prose */
}


/* ================================================================
   Source: 50-components.css
   ================================================================ */

/* ================================================================
   REEGL CSS — 5. Components
   Semantic black boxes. Minimal class names.
   Customize via CSS variable overrides — not new classes.

   TOKEN OVERRIDE PATTERN:
   Instead of adding modifier classes, override the component's
   local CSS variables via inline style:

   <!-- Accent card — no new class needed: -->
   <div class="card" style="--card-bg: color-mix(in srgb, var(--c1) 12%, var(--bg))">

   <!-- Custom grid column count: -->
   <div class="auto-grid" style="--min-col: 20rem">

   <!-- Wider stack spacing: -->
   <div class="stack" style="--stack-gap: var(--uspl)">

   COMPONENTS:
   1. .card           content container
   2. .btn            button + variants
   3. .field .label .input .select .textarea   forms
   4. .badge          compact label
   5. .alert          contextual feedback
   6. .switch         accessible button switch
   ================================================================ */


/* ══════════════════════════════════════════════════════════
   1. CARD
   Universal content container.
   Automatically adapts to dark mode via theme tokens.

   Usage:
   <div class="card">
     <h3 class="card-title">Title</h3>
     <p class="card-body">Description...</p>
     <div class="card-footer">
       <button class="btn btn-primary">Action</button>
     </div>
   </div>

   Token overrides (inline style):
   --card-bg        background (default: --surface)
   --card-border    border color (default: --border)
   --card-radius    corner radius (default: --radius-lg)
   --card-p         padding (default: --uspm)
   ══════════════════════════════════════════════════════════ */
.card {
  background: var(--card-bg, var(--surface));
  border: 1px solid var(--card-border, var(--border));
  border-radius: var(--card-radius, var(--radius-lg));
  padding: var(--card-p, var(--uspm));
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
  overflow: hidden;
}

/* Hover lift (opt-in) */
.card-hover:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

/* Internal spacing */
.card > * + * {
  margin-top: var(--usps);
}

.card-title {
  font-size: var(--ust1);
  font-weight: 700;
  line-height: 1.2;
  color: var(--_h);
}

.card-body {
  color: var(--text-muted);
  font-size: var(--ust-1);
  line-height: 1.6;
}

.card-body p {
  max-width: none;
  margin-bottom: 0;
}

.card-footer {
  padding-top: var(--usps);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--uspxs);
  margin-top: auto;
}


/* ══════════════════════════════════════════════════════════
   2. BUTTON
   Base: .btn
   Variants: .btn-primary  .btn-secondary  .btn-outline
             .btn-ghost    .btn-danger
   Sizes:    .btn-sm       .btn-lg
   Width:    .btn-block    (full width)

   Usage:
   <button class="btn btn-primary">Click me</button>
   <a href="#" class="btn btn-outline">Link button</a>
   ══════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--uspxs);
  padding: var(--uspxs) var(--uspm);
  border-radius: var(--radius);
  font-size: var(--ust-1);
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: var(--transition);
  white-space: normal;
  text-align: center;
  overflow-wrap: anywhere;
  text-decoration: none;
  border: 1px solid transparent;
  font-family: var(--font-sans);
  user-select: none;
}

.btn:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Sizes */
.btn-sm {
  padding: var(--usp2xs) var(--usps);
  font-size: var(--ust-2);
  gap: var(--usp2xs);
  border-radius: var(--radius-sm);
}

.btn-lg {
  padding: var(--usps) var(--uspl);
  font-size: var(--ust0);
}

/* Full width */
.btn-block { width: 100%; }

/* Primary */
.btn-primary {
  background: var(--c1);
  color: var(--on-c1);
  border-color: var(--c1);
}
.btn-primary:hover {
  background: color-mix(in srgb, var(--c1) 90%, var(--cw));
  border-color: color-mix(in srgb, var(--c1) 90%, var(--cw));
}

/* Secondary */
.btn-secondary {
  background: var(--c2);
  color: var(--on-c2);
  border-color: var(--c2);
}
.btn-secondary:hover {
  background: color-mix(in srgb, var(--c2) 82%, var(--cb));
}

/* Outline */
.btn-outline {
  background: transparent;
  color: color-mix(in srgb, var(--c1) 70%, var(--text));
  border-color: var(--c1);
}
.btn-outline:hover {
  background: color-mix(in srgb, var(--c1) 10%, transparent);
}

/* Ghost */
.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: transparent;
}
.btn-ghost:hover {
  background: var(--surface-2);
}

/* Danger */
.btn-danger {
  background: var(--c-danger);
  color: var(--on-danger);
  border-color: var(--c-danger);
}
.btn-danger:hover {
  background: color-mix(in srgb, var(--c-danger) 82%, var(--cb));
}

/* Layer: framework
   Scope: visual switch; the consumer owns confirmed state and event handling.
   Used by: button.switch[role="switch"] in application controls.
   Required: type="button", stable accessible name, aria-checked="true|false".
   --switch-off / --switch-off-fg and --switch-on / --switch-on-fg are paired.
   The button target is larger than its visible track. */
.switch {
  position: relative;
  display: inline-block;
  flex: none;
  inline-size: calc(var(--uspl) * 2);
  min-block-size: var(--usp2xl);
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  vertical-align: middle;
}

.switch::before,
.switch::after {
  content: "";
  position: absolute;
  top: 50%;
  border-radius: var(--radius-full);
  transition: var(--transition);
}

.switch::before {
  inset-inline: 0;
  block-size: var(--uspl);
  transform: translateY(-50%);
  background: var(--switch-off, var(--surface-3));
}

.switch::after {
  inset-inline-start: calc(var(--usp2xs) / 2);
  inline-size: calc(var(--uspl) - var(--usp2xs));
  block-size: calc(var(--uspl) - var(--usp2xs));
  transform: translateY(-50%);
  background: var(--switch-off-fg, var(--text));
}

.switch[aria-checked="true"]::before {
  background: var(--switch-on, var(--c1));
}

.switch[aria-checked="true"]::after {
  inset-inline-start: calc(var(--uspl) + var(--usp2xs) / 2);
  background: var(--switch-on-fg, var(--on-c1));
}

.switch:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

.switch:disabled {
  cursor: not-allowed;
}


/* ══════════════════════════════════════════════════════════
   3. FORMS
   Clean, accessible form components.

   Usage:
   <div class="field">
     <label class="label" for="email">Email</label>
     <input class="input" id="email" type="email" placeholder="you@example.com">
     <span class="hint">We'll never share your email.</span>
   </div>
   ══════════════════════════════════════════════════════════ */

/* Field wrapper */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--usp2xs);
}

.field + .field {
  margin-top: var(--usps);
}

/* Label */
.label {
  font-size: var(--ust-1);
  font-weight: 500;
  color: var(--text);
}

/* Required marker */
.label-required::after {
  content: ' *';
  color: var(--c-danger);
}

/* Input, Select, Textarea */
.input,
.select,
.textarea {
  width: 100%;
  padding: var(--uspxs) var(--usps);
  font-size: var(--ust-1);
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: var(--transition);
  appearance: none;
  -webkit-appearance: none;
  line-height: 1.5;
}

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

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

.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--c1);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c1) 18%, transparent);
}

/* Error state */
.input-error,
.select-error,
.textarea-error {
  border-color: var(--c-danger);
}

.input-error:focus,
.select-error:focus,
.textarea-error:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-danger) 18%, transparent);
}

.textarea {
  min-height: 6rem;
  resize: vertical;
}

/* Select: custom chevron */
.select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--usps) center;
  background-size: 1.25em;
  padding-right: calc(var(--uspm) + 1.25em);
}

/* Hint / helper text */
.hint {
  font-size: var(--ust-2);
  color: var(--text-muted);
  line-height: 1.4;
}

.hint-error {
  color: var(--c-danger);
}


/* ══════════════════════════════════════════════════════════
   4. BADGE
   Compact label/tag component.

   Usage:
   <span class="badge">Default</span>
   <span class="badge badge-success badge-dot">Active</span>

   Variants: badge-primary  badge-secondary  badge-info
             badge-success  badge-warn       badge-danger
   ══════════════════════════════════════════════════════════ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--usp2xs);
  padding: 0.15em 0.65em;
  border-radius: var(--radius-full);
  font-size: var(--ust-2);
  font-weight: 500;
  line-height: 1.6;
  background: var(--surface-2);
  color: var(--text-muted);
  border: 1px solid var(--border);
  white-space: nowrap;
}

/* Dot indicator */
.badge-dot::before {
  content: '';
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  border-radius: var(--radius-full);
  background: currentColor;
  flex-shrink: 0;
}

/* Variants */
.badge-primary {
  background: color-mix(in srgb, var(--c1) 14%, var(--bg));
  color: var(--c1);
  border-color: color-mix(in srgb, var(--c1) 28%, transparent);
}

.badge-secondary {
  background: color-mix(in srgb, var(--c2) 14%, var(--bg));
  color: var(--c2);
  border-color: color-mix(in srgb, var(--c2) 28%, transparent);
}

.badge-info {
  background: color-mix(in srgb, var(--c-info) 14%, var(--bg));
  color: var(--c-info);
  border-color: color-mix(in srgb, var(--c-info) 28%, transparent);
}

.badge-success {
  background: color-mix(in srgb, var(--c-success) 14%, var(--bg));
  color: var(--c-success);
  border-color: color-mix(in srgb, var(--c-success) 28%, transparent);
}

.badge-warn {
  background: color-mix(in srgb, var(--c-warn) 14%, var(--bg));
  color: color-mix(in srgb, var(--c-warn) 70%, var(--cb));
  border-color: color-mix(in srgb, var(--c-warn) 28%, transparent);
}

.badge-danger {
  background: color-mix(in srgb, var(--c-danger) 14%, var(--bg));
  color: var(--c-danger);
  border-color: color-mix(in srgb, var(--c-danger) 28%, transparent);
}


/* ══════════════════════════════════════════════════════════
   5. ALERT
   Contextual feedback messages.

   Usage:
   <div class="alert alert-success" role="alert">
     <strong>Done!</strong> Your changes have been saved.
   </div>

   Variants: alert-info  alert-success  alert-warn  alert-danger
   ══════════════════════════════════════════════════════════ */
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--usps);
  padding: var(--usps) var(--uspm);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  font-size: var(--ust-1);
  color: var(--text);
  background: var(--surface);
  line-height: 1.5;
}

.alert-info {
  background: color-mix(in srgb, var(--c-info) 8%, var(--bg));
  border-color: color-mix(in srgb, var(--c-info) 30%, transparent);
  color: color-mix(in srgb, var(--c-info) var(--_ap), var(--_am));
}

.alert-success {
  background: color-mix(in srgb, var(--c-success) 8%, var(--bg));
  border-color: color-mix(in srgb, var(--c-success) 30%, transparent);
  color: color-mix(in srgb, var(--c-success) var(--_ap), var(--_am));
}

.alert-warn {
  background: color-mix(in srgb, var(--c-warn) 8%, var(--bg));
  border-color: color-mix(in srgb, var(--c-warn) 30%, transparent);
  color: color-mix(in srgb, var(--c-warn) var(--_aw), var(--_am));
}

.alert-danger {
  background: color-mix(in srgb, var(--c-danger) 8%, var(--bg));
  border-color: color-mix(in srgb, var(--c-danger) 30%, transparent);
  color: color-mix(in srgb, var(--c-danger) var(--_ap), var(--_am));
}

/* Layer: framework
   Scope: modal surface, stacked dialogs and a separate notification slot.
   Used by: the reusable REXpress Popup library. */
.rx-popup-surface { display: contents; }

.rx-popup-dialog {
  position: fixed;
  inset: 0;
  inline-size: 100%;
  max-inline-size: none;
  block-size: 100dvh;
  max-block-size: none;
  margin: 0;
  padding: max(var(--uspm), env(safe-area-inset-top)) max(var(--usps), env(safe-area-inset-right))
    max(var(--uspm), env(safe-area-inset-bottom)) max(var(--usps), env(safe-area-inset-left));
  border: 0;
  color: var(--text);
  background: transparent;
  overflow: auto;
  overscroll-behavior: contain;
}

.rx-popup-dialog[open] {
  display: grid;
  place-items: center;
}

.rx-popup-dialog::backdrop {
  background: color-mix(in srgb, var(--cb) 45%, transparent);
}

.rx-popup-layout {
  display: grid;
  gap: var(--usps);
  inline-size: min(100%, 36rem);
  min-inline-size: 0;
  max-block-size: 100%;
  grid-template-rows: auto minmax(0, 1fr);
}

.rx-popup-layout:has(.rx-popup-wide:not([hidden])) { inline-size: min(100%, 60rem); }

.rx-popup-notices:empty {
  display: none;
}

.rx-popup-stack,
.rx-popup-frame {
  position: relative;
  min-inline-size: 0;
  min-block-size: 0;
}

.rx-popup-frame[hidden] {
  display: none;
}

.rx-popup-card {
  position: relative;
  display: flex;
  flex-direction: column;
  max-block-size: calc(100dvh - var(--uspxl));
  padding: var(--uspm);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}

.rx-popup-surface:not([data-depth="0"]):not([data-depth="1"]) .rx-popup-stack::before,
.rx-popup-surface:not([data-depth="0"]):not([data-depth="1"]):not([data-depth="2"]) .rx-popup-stack::after {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--usp2xs)) var(--uspxs) var(--usp2xs);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  z-index: -1;
}

.rx-popup-surface:not([data-depth="0"]):not([data-depth="1"]):not([data-depth="2"]) .rx-popup-stack::after {
  inset: calc(-1 * var(--uspxs)) var(--usps) var(--uspxs);
  z-index: -2;
}

.rx-popup-stack { isolation: isolate; }

.rx-popup-trail {
  margin: 0 0 var(--uspxs);
  color: var(--text-muted);
  font-size: var(--ust-1);
  overflow-wrap: anywhere;
}

.rx-popup-trail:empty {
  display: none;
}

.rx-popup-card > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--usps);
  margin-block-end: var(--usps);
}

.rx-popup-title {
  margin: 0;
  font-size: var(--ust2);
  overflow-wrap: anywhere;
}

.rx-popup-actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--uspxs);
  margin-inline-end: auto;
}

.rx-popup-actions:empty { display: none; }

.rx-popup-close {
  flex-shrink: 0;
  min-inline-size: 44px;
  min-block-size: 44px;
  padding: 0;
  font-size: var(--ust2);
}

.rx-popup-body {
  min-block-size: 0;
  overflow: auto;
  overscroll-behavior: contain;
}

.rx-popup-body > :first-child { margin-block-start: 0; }
.rx-popup-body > :last-child { margin-block-end: 0; }