/* Halo Design System — bundled (link this ONE file: /halo/styles.css) */
@import url("https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap");
/* ============================================================
   Halo Design System — global entry point
   Consumers link THIS file only. It is a manifest of imports;
   never add rules here directly.
   ============================================================ */

/* fonts first so family names resolve */
/* ============================================================
   FONTS — Halo
   Figtree (UI sans) and JetBrains Mono (data/code) are loaded
   from Google Fonts. Both are open-source and metric-stable.

   For production, self-host the .woff2 binaries and replace
   the @import below with local @font-face rules pointing at
   them — the family names stay the same so nothing else changes.
   ============================================================ */


/* design tokens */
/* ============================================================
   COLORS — Halo
   Light mode. Mostly black & white on warm-tinted neutrals,
   with a single coral accent used sparingly for primary
   actions, links, focus, and selection.

   Two layers:
   1. PALETTE  — raw scales (gray, coral, status). Never use
      these directly in product UI; reach for the SEMANTIC
      aliases below so theming stays in one place.
   2. SEMANTIC — role-based tokens (--text, --surface, --border…)
      that components and screens actually consume.
   ============================================================ */

:root {
  /* ---- PALETTE · warm neutrals (a whisper of warmth, never beige) ---- */
  --gray-0:   #ffffff;
  --gray-25:  #fbfaf8;  /* app background */
  --gray-50:  #f6f5f2;  /* subtle fill, hovered rows */
  --gray-100: #efede9;  /* pressed fill, track */
  --gray-150: #e7e4df;
  --gray-200: #ddd9d2;  /* default hairline border */
  --gray-300: #cbc6bd;  /* strong border, dividers on fills */
  --gray-400: #a8a299;  /* disabled text, icons on muted */
  --gray-500: #847e74;  /* placeholder */
  --gray-600: #6a645b;  /* muted / secondary text */
  --gray-700: #4d4842;  /* body on tinted surfaces */
  --gray-800: #2f2b26;  /* headings */
  --gray-900: #211e1a;  /* primary text — warm near-black */

  /* ---- PALETTE · coral accent (the only brand hue) ------------------- */
  --coral-50:  #fcf0ec;   /* tint background (selection, accent surface) */
  --coral-100: #f9ded4;   /* accent surface hover */
  --coral-200: #f3bca8;   /* accent border */
  --coral-300: #ec9981;
  --coral-400: #e56f55;
  --coral-500: #e0533d;   /* PRIMARY accent — buttons, links, focus */
  --coral-600: #c8412c;   /* accent hover */
  --coral-700: #a33324;   /* accent pressed / accent text on tint */

  /* ---- PALETTE · status (muted, tasteful — used sparingly) ----------- */
  --green-50:  #ecf6ef;
  --green-500: #2f8f5b;
  --green-600: #257a4c;
  --amber-50:  #fbf2e3;
  --amber-500: #b9762a;
  --amber-600: #9c6120;
  --red-50:    #fbeeec;
  --red-500:   #cc3a2c;
  --red-600:   #ad2e22;
  --blue-50:   #ecf1fb;
  --blue-500:  #3d6fd0;
  --blue-600:  #305bb0;

  /* =================== SEMANTIC ALIASES =================== */

  /* surfaces — back to front -------------------------------- */
  --surface-app:     var(--gray-25);   /* the page / canvas */
  --surface:         var(--gray-0);    /* cards, panels, inputs */
  --surface-subtle:  var(--gray-50);   /* grouped fills, table headers, hover */
  --surface-sunken:  var(--gray-100);  /* wells, tracks, code blocks */
  --surface-inverse: var(--gray-900);  /* tooltips, inverse chips */

  /* text — strongest to faintest ---------------------------- */
  --text:          var(--gray-900);  /* primary content, headings */
  --text-secondary:var(--gray-700);  /* body on tinted surfaces */
  --text-muted:    var(--gray-600);  /* captions, metadata, labels */
  --text-placeholder: var(--gray-500);
  --text-disabled: var(--gray-400);
  --text-inverse:  var(--gray-0);    /* text on dark/accent fills */
  --text-link:     var(--coral-700);

  /* borders ------------------------------------------------- */
  --border:        var(--gray-200);  /* default hairline */
  --border-strong: var(--gray-300);  /* emphasis, hovered control */
  --border-focus:  var(--coral-500); /* focused control edge */

  /* accent roles -------------------------------------------- */
  --accent:          var(--coral-500);
  --accent-hover:    var(--coral-600);
  --accent-active:   var(--coral-700);
  --accent-surface:  var(--coral-50);   /* tinted accent background */
  --accent-surface-hover: var(--coral-100);
  --accent-border:   var(--coral-200);
  --accent-text:     var(--coral-700);  /* accent-colored text (AA on white) */
  --on-accent:       var(--gray-0);     /* text/icon on accent fill */

  /* focus ring (used as box-shadow halo) -------------------- */
  --focus-ring: 0 0 0 3px color-mix(in oklch, var(--coral-500) 32%, transparent);

  /* status — surface / fg pairs ----------------------------- */
  --success:         var(--green-600);
  --success-surface: var(--green-50);
  --warning:         var(--amber-600);
  --warning-surface: var(--amber-50);
  --danger:          var(--red-600);
  --danger-surface:  var(--red-50);
  --info:            var(--blue-600);
  --info-surface:    var(--blue-50);

  /* selection ----------------------------------------------- */
  --selection-bg: var(--coral-100);
}

::selection { background: var(--selection-bg); }
/* ============================================================
   TYPOGRAPHY — Halo
   One humanist sans for everything in the UI (Figtree), one
   monospace for data, code, and tabular numbers (JetBrains Mono).
   Figtree is friendly and modern with open, rounded terminals —
   it pairs naturally with the soft 8px corner radius.

   Scale is a gentle 1.2-ish ramp tuned for spacious, airy UI.
   Weights: 400 / 500 / 600 / 700. Numbers default to tabular.
   ============================================================ */

:root {
  --font-sans: "Figtree", ui-sans-serif, system-ui, -apple-system,
               "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", "Menlo",
               "Consolas", monospace;

  /* type scale ---------------------------------------------- */
  --text-2xs:  0.6875rem; /* 11px — micro labels, badges */
  --text-xs:   0.75rem;   /* 12px — captions, metadata */
  --text-sm:   0.8125rem; /* 13px — secondary body, table cells */
  --text-base: 0.9375rem; /* 15px — body default (airy, not cramped) */
  --text-md:   1.0625rem; /* 17px — lead paragraph, large controls */
  --text-lg:   1.3125rem; /* 21px — h3, card titles */
  --text-xl:   1.625rem;  /* 26px — h2, section heads */
  --text-2xl:  2rem;      /* 32px — h1, page titles */
  --text-3xl:  2.625rem;  /* 42px — display, hero */
  --text-4xl:  3.5rem;    /* 56px — marketing display */

  /* weights ------------------------------------------------- */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* line-heights -------------------------------------------- */
  --leading-tight:   1.15;  /* large display headings */
  --leading-snug:    1.3;   /* headings, controls */
  --leading-normal:  1.55;  /* body copy */
  --leading-relaxed: 1.7;   /* long-form reading */

  /* letter-spacing ------------------------------------------ */
  --tracking-tight:  -0.02em; /* large headings */
  --tracking-snug:   -0.01em; /* medium headings, buttons */
  --tracking-normal: 0;
  --tracking-wide:   0.04em;  /* all-caps micro labels */
}
/* ============================================================
   SPACING, SIZING & RADIUS — Halo
   4px base unit, expanded into a spacious ramp. The default
   density is airy: prefer the larger steps for padding and
   section gaps. Radius family centers on 8px (md) for the
   friendly, soft-cornered look chosen for this system.
   ============================================================ */

:root {
  /* spacing scale (4px base) -------------------------------- */
  --space-0:  0;
  --space-1:  0.25rem;  /*  4px */
  --space-2:  0.5rem;   /*  8px */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-5:  1.5rem;   /* 24px */
  --space-6:  2rem;     /* 32px */
  --space-7:  2.5rem;   /* 40px */
  --space-8:  3rem;     /* 48px */
  --space-9:  4rem;     /* 64px */
  --space-10: 5rem;     /* 80px */
  --space-12: 7rem;     /* 112px */

  /* radius — soft, friendly --------------------------------- */
  --radius-xs:   4px;   /* tags, small chips */
  --radius-sm:   6px;   /* inputs, badges */
  --radius-md:   8px;   /* buttons, cards (the default) */
  --radius-lg:   12px;  /* large cards, modals */
  --radius-xl:   16px;  /* feature panels, sheets */
  --radius-2xl:  24px;  /* hero surfaces */
  --radius-full: 9999px;/* pills, avatars, switches */

  /* control sizing — generous tap targets ------------------- */
  --control-sm: 32px;
  --control-md: 40px;   /* default control height */
  --control-lg: 48px;

  /* layout measures ----------------------------------------- */
  --measure-prose: 68ch;    /* readable text column */
  --measure-form:  480px;   /* single-column forms */
  --measure-content: 1080px;/* app content width */
  --measure-wide:  1320px;  /* dashboards, tables */

  /* z-index ladder ------------------------------------------ */
  --z-base:      0;
  --z-sticky:    100;
  --z-dropdown:  200;
  --z-overlay:   300;
  --z-modal:     400;
  --z-toast:     500;
}
/* ============================================================
   ELEVATION & MOTION — Halo
   Surfaces separate primarily by hairline borders and the
   tinted surface ladder. Shadows are soft, low-contrast, and
   warm-tinted — reserved for things that genuinely float
   (dropdowns, popovers, modals, toasts) and a gentle lift on
   interactive cards. Never harsh or bluish.

   Motion is quick and confident: short durations, a soft
   ease-out for entrances, almost no bounce.
   ============================================================ */

:root {
  /* shadows — warm-tinted, layered, soft ------------------- */
  --shadow-xs:  0 1px 2px rgba(33, 30, 26, 0.05);
  --shadow-sm:  0 1px 2px rgba(33, 30, 26, 0.06),
                0 1px 3px rgba(33, 30, 26, 0.05);
  --shadow-md:  0 2px 4px rgba(33, 30, 26, 0.05),
                0 4px 12px rgba(33, 30, 26, 0.07);
  --shadow-lg:  0 4px 8px rgba(33, 30, 26, 0.06),
                0 12px 28px rgba(33, 30, 26, 0.10);
  --shadow-xl:  0 8px 16px rgba(33, 30, 26, 0.08),
                0 24px 48px rgba(33, 30, 26, 0.14);

  /* a soft outline you can stack under a shadow for crispness */
  --ring-hairline: 0 0 0 1px var(--border);

  /* motion -------------------------------------------------- */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);  /* gentle, settled */
  --ease-in-out:cubic-bezier(0.45, 0, 0.4, 1);
  --ease-spring:cubic-bezier(0.34, 1.4, 0.64, 1);/* tiny overshoot, use sparingly */

  --duration-fast:   120ms;
  --duration-base:   180ms;
  --duration-slow:   260ms;

  /* common composite transitions ---------------------------- */
  --transition-colors: color var(--duration-fast) var(--ease-out),
                       background-color var(--duration-fast) var(--ease-out),
                       border-color var(--duration-fast) var(--ease-out),
                       box-shadow var(--duration-fast) var(--ease-out);
  --transition-transform: transform var(--duration-base) var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
}

/* element defaults + utility/component classes */
/* ============================================================
   BASE — Halo
   Element defaults + utility and component classes for plain
   HTML use. Every value pulls from the design tokens; this file
   introduces no new colors or sizes of its own.

   An agent can build a full screen with these classes alone, or
   reach for the React components which mirror them 1:1.
   ============================================================ */

/* ---- reset ---------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; tab-size: 4; }

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  font-weight: var(--weight-regular);
  color: var(--text);
  background: var(--surface-app);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv05" 1; /* friendlier lowercase l in Figtree */
}

img, svg, video, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }

/* numbers line up everywhere they matter */
.tnum, .num, td.num, th.num, .mono { font-variant-numeric: tabular-nums; }

/* ---- typography ----------------------------------------------- */
h1, h2, h3, h4 { font-weight: var(--weight-semibold); line-height: var(--leading-snug); color: var(--text); letter-spacing: var(--tracking-snug); }
h1 { font-size: var(--text-2xl); letter-spacing: var(--tracking-tight); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
h4 { font-size: var(--text-md); }
p  { text-wrap: pretty; }

.display    { font-size: var(--text-3xl); font-weight: var(--weight-bold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
.lead       { font-size: var(--text-md); color: var(--text-secondary); line-height: var(--leading-relaxed); }
.body       { font-size: var(--text-base); }
.small      { font-size: var(--text-sm); }
.caption    { font-size: var(--text-xs); color: var(--text-muted); }
.overline   { font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-muted); }
.muted      { color: var(--text-muted); }
.secondary  { color: var(--text-secondary); }
.mono       { font-family: var(--font-mono); font-size: 0.95em; }
.strong     { font-weight: var(--weight-semibold); }

a { color: var(--text-link); text-decoration: none; text-underline-offset: 2px; transition: var(--transition-colors); }
a:hover { text-decoration: underline; }

code.inline {
  font-family: var(--font-mono); font-size: 0.875em;
  background: var(--surface-sunken); color: var(--text-secondary);
  padding: 0.1em 0.35em; border-radius: var(--radius-xs);
}
pre {
  font-family: var(--font-mono); font-size: var(--text-sm); line-height: var(--leading-normal);
  background: var(--surface-sunken); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: var(--space-4); overflow-x: auto;
}

hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-6) 0; }

/* ---- layout helpers ------------------------------------------- */
.page       { padding-block: var(--space-6); }
.container  { max-width: var(--measure-content); margin-inline: auto; padding-inline: var(--space-5); }
.container-wide { max-width: var(--measure-wide); margin-inline: auto; padding-inline: var(--space-5); }
.stack > * + * { margin-top: var(--space-4); }
.row   { display: flex; align-items: center; gap: var(--space-3); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.spacer { flex: 1 1 auto; }
.grid  { display: grid; gap: var(--space-5); }

/* =================================================================
   BUTTONS
   ================================================================= */
.btn {
  --_h: var(--control-md);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: var(--_h); padding-inline: var(--space-4);
  font-size: var(--text-sm); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-snug); line-height: 1;
  border: 1px solid transparent; border-radius: var(--radius-md);
  background: transparent; color: var(--text);
  cursor: pointer; white-space: nowrap; user-select: none;
  transition: var(--transition-colors), transform var(--duration-fast) var(--ease-out);
}
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn:active { transform: translateY(0.5px); }
.btn:disabled, .btn[aria-disabled="true"] { cursor: not-allowed; opacity: 0.5; transform: none; }
.btn svg { width: 1.05em; height: 1.05em; }

.btn--sm { --_h: var(--control-sm); padding-inline: var(--space-3); font-size: var(--text-xs); }
.btn--lg { --_h: var(--control-lg); padding-inline: var(--space-5); font-size: var(--text-base); }
.btn--block { display: flex; width: 100%; }
.btn--icon { padding-inline: 0; width: var(--_h); }

/* primary — solid accent */
.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--primary:hover { background: var(--accent-hover); }
.btn--primary:active { background: var(--accent-active); }

/* neutral — solid dark, for primary non-brand actions */
.btn--neutral { background: var(--gray-900); color: var(--text-inverse); }
.btn--neutral:hover { background: var(--gray-800); }

/* secondary — bordered on surface */
.btn--secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); box-shadow: var(--shadow-xs); }
.btn--secondary:hover { background: var(--surface-subtle); border-color: var(--gray-400); }
.btn--secondary:active { background: var(--gray-100); }

/* ghost — quiet, no chrome until hover */
.btn--ghost { color: var(--text-secondary); }
.btn--ghost:hover { background: var(--surface-subtle); color: var(--text); }

/* danger — destructive */
.btn--danger { background: var(--danger); color: var(--text-inverse); }
.btn--danger:hover { background: var(--red-600); filter: brightness(0.94); }

/* link-style */
.btn--link { height: auto; padding: 0; color: var(--text-link); border-radius: var(--radius-xs); }
.btn--link:hover { text-decoration: underline; background: transparent; }

/* =================================================================
   FORMS
   ================================================================= */
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text); }
.label .req { color: var(--accent); margin-left: 2px; }
.help { font-size: var(--text-xs); color: var(--text-muted); }
.error-text { font-size: var(--text-xs); color: var(--danger); }

.input, .textarea, .select {
  width: 100%; min-height: var(--control-md);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-base); color: var(--text);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-xs);
  transition: var(--transition-colors);
}
.input::placeholder, .textarea::placeholder { color: var(--text-placeholder); }
.input:hover, .textarea:hover, .select:hover { border-color: var(--border-strong); }
.input:focus, .textarea:focus, .select:focus {
  outline: none; border-color: var(--border-focus); box-shadow: var(--focus-ring);
}
.input:disabled, .textarea:disabled, .select:disabled {
  background: var(--surface-subtle); color: var(--text-disabled); cursor: not-allowed; box-shadow: none;
}
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--danger); }
.input[aria-invalid="true"]:focus, .textarea[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px color-mix(in oklch, var(--danger) 24%, transparent); }
.textarea { min-height: 96px; resize: vertical; line-height: var(--leading-normal); }

.input--sm { min-height: var(--control-sm); font-size: var(--text-sm); padding: var(--space-1) var(--space-3); }

/* input with leading icon / addon */
.input-group { position: relative; display: flex; align-items: center; }
.input-group .input { padding-left: calc(var(--space-3) + 22px); }
.input-group__icon { position: absolute; left: var(--space-3); color: var(--text-muted); pointer-events: none; display: flex; }
.input-group__icon svg { width: 16px; height: 16px; }

/* select with caret */
.select-wrap { position: relative; }
.select {
  appearance: none; -webkit-appearance: none; padding-right: var(--space-7); cursor: pointer;
}
.select-wrap::after {
  content: ""; position: absolute; right: var(--space-3); top: 50%; width: 9px; height: 9px;
  border-right: 1.5px solid var(--text-muted); border-bottom: 1.5px solid var(--text-muted);
  transform: translateY(-65%) rotate(45deg); pointer-events: none;
}

/* styled select (listbox) — a clean, on-brand replacement for the native
   option list. The trigger keeps the input look; the panel is a soft popover
   with a coral check on the selected row. Used by the React Select component
   and the progressive-enhancement script that upgrades any <select>. */
.hselect { position: relative; display: block; width: 100%; }
.hselect__btn {
  display: flex; align-items: center; gap: var(--space-2); width: 100%;
  min-height: var(--control-md); padding: var(--space-2) var(--space-3);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs); font: inherit; font-size: var(--text-base); color: var(--text);
  cursor: pointer; text-align: left; transition: var(--transition-colors);
}
.hselect__btn:hover { border-color: var(--border-strong); }
.hselect__btn:focus-visible,
.hselect[data-open="true"] .hselect__btn { outline: none; border-color: var(--border-focus); box-shadow: var(--focus-ring); }
.hselect__btn:disabled { background: var(--surface-subtle); color: var(--text-disabled); cursor: not-allowed; box-shadow: none; }
.hselect__value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hselect__value--placeholder { color: var(--text-placeholder); }
.hselect__caret { flex: none; color: var(--text-muted); transition: transform var(--duration-fast) var(--ease-out); }
.hselect[data-open="true"] .hselect__caret { transform: rotate(180deg); }
.hselect--sm .hselect__btn { min-height: var(--control-sm); font-size: var(--text-sm); padding-block: var(--space-1); }

.hselect__panel {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 100%; width: max-content; max-width: min(320px, 90vw);
  z-index: var(--z-dropdown);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); padding: var(--space-1); max-height: 264px; overflow-y: auto;
  animation: halo-pop var(--duration-fast) var(--ease-out);
}
.hselect__panel--up { top: auto; bottom: calc(100% + 6px); }
.hselect__opt {
  display: flex; align-items: center; gap: var(--space-2); width: 100%; white-space: nowrap;
  padding: var(--space-2) var(--space-3); border: 0; background: none; border-radius: var(--radius-sm);
  font: inherit; font-size: var(--text-sm); color: var(--text); cursor: pointer; text-align: left;
}
.hselect__opt .tick { margin-left: auto; flex: none; color: var(--accent); opacity: 0; }
.hselect__opt[aria-selected="true"] { font-weight: var(--weight-semibold); }
.hselect__opt[aria-selected="true"] .tick { opacity: 1; }
.hselect__opt:hover, .hselect__opt[data-active="true"] { background: var(--surface-subtle); }
.hselect__opt:disabled { color: var(--text-disabled); cursor: not-allowed; }


/* checkbox & radio */
.check { display: inline-flex; align-items: flex-start; gap: var(--space-2); cursor: pointer; font-size: var(--text-sm); }
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check__box {
  flex: none; width: 18px; height: 18px; margin-top: 1px;
  border: 1.5px solid var(--border-strong); border-radius: var(--radius-xs);
  background: var(--surface); display: grid; place-items: center;
  color: var(--on-accent); transition: var(--transition-colors);
}
.check--radio .check__box { border-radius: var(--radius-full); }
.check__box svg { width: 12px; height: 12px; opacity: 0; transform: scale(0.6); transition: var(--transition-transform), opacity var(--duration-fast); }
.check input:checked + .check__box { background: var(--accent); border-color: var(--accent); }
.check input:checked + .check__box svg { opacity: 1; transform: scale(1); }
.check--radio input:checked + .check__box { background: var(--surface); border-color: var(--accent); }
.check--radio input:checked + .check__box::after { content: ""; width: 9px; height: 9px; border-radius: var(--radius-full); background: var(--accent); }
.check input:focus-visible + .check__box { box-shadow: var(--focus-ring); }
.check input:disabled + .check__box { background: var(--surface-subtle); border-color: var(--border); }

/* switch */
.switch { display: inline-flex; align-items: center; gap: var(--space-3); cursor: pointer; font-size: var(--text-sm); }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch__track {
  flex: none; width: 40px; height: 24px; border-radius: var(--radius-full);
  background: var(--gray-300); position: relative; transition: var(--transition-colors);
}
.switch__track::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px;
  border-radius: var(--radius-full); background: var(--gray-0); box-shadow: var(--shadow-sm);
  transition: transform var(--duration-base) var(--ease-out);
}
.switch input:checked + .switch__track { background: var(--accent); }
.switch input:checked + .switch__track::after { transform: translateX(16px); }
.switch input:focus-visible + .switch__track { box-shadow: var(--focus-ring); }

/* =================================================================
   BADGES & TAGS
   ================================================================= */
.badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  height: 22px; padding-inline: var(--space-2);
  font-size: var(--text-2xs); font-weight: var(--weight-semibold);
  letter-spacing: 0.01em; border-radius: var(--radius-full); white-space: nowrap;
  background: var(--surface-subtle); color: var(--text-secondary); border: 1px solid transparent;
}
.badge .dot { width: 6px; height: 6px; border-radius: var(--radius-full); background: currentColor; }
.badge--neutral { background: var(--surface-subtle); color: var(--text-secondary); }
.badge--accent  { background: var(--accent-surface); color: var(--accent-text); }
.badge--success { background: var(--success-surface); color: var(--success); }
.badge--warning { background: var(--warning-surface); color: var(--warning); }
.badge--danger  { background: var(--danger-surface); color: var(--danger); }
.badge--info    { background: var(--info-surface); color: var(--info); }
.badge--outline { background: transparent; border-color: var(--border-strong); color: var(--text-secondary); }

.tag {
  display: inline-flex; align-items: center; gap: var(--space-1);
  min-height: 26px; padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs); font-weight: var(--weight-medium);
  background: var(--surface-subtle); color: var(--text-secondary);
  border: 1px solid var(--border); border-radius: var(--radius-full);
}

/* =================================================================
   CARDS & SURFACES
   ================================================================= */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--space-5);
}
.card--raised { box-shadow: var(--shadow-sm); }
.card--interactive { cursor: pointer; transition: var(--transition-colors), transform var(--duration-base) var(--ease-out); }
.card--interactive:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); transform: translateY(-2px); }
.card__title { font-size: var(--text-lg); font-weight: var(--weight-semibold); }
.card__body { color: var(--text-secondary); }

.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.panel--subtle { background: var(--surface-subtle); }
.well { background: var(--surface-sunken); border-radius: var(--radius-md); padding: var(--space-4); }

/* =================================================================
   TABLES
   ================================================================= */
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--text-sm); }
.table th {
  text-align: left; font-weight: var(--weight-semibold); color: var(--text-muted);
  font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase;
  padding: var(--space-3) var(--space-4); background: var(--surface-subtle);
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
.table th:first-child { border-top-left-radius: var(--radius-md); }
.table th:last-child  { border-top-right-radius: var(--radius-md); }
.table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); color: var(--text); vertical-align: middle; }
.table tbody tr { transition: background var(--duration-fast) var(--ease-out); }
.table tbody tr:hover td { background: var(--surface-subtle); }
.table tbody tr[aria-selected="true"] td { background: var(--accent-surface); }
.table th.num, .table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.table--card { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.table--card td { padding-inline: var(--space-4); }

/* =================================================================
   NAV / TABS
   ================================================================= */
.tabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--border); }
.tab {
  appearance: none; background: none; border: 0; cursor: pointer;
  padding: var(--space-3) var(--space-3); margin-bottom: -1px;
  font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-muted);
  border-bottom: 2px solid transparent; transition: var(--transition-colors);
}
.tab:hover { color: var(--text); }
.tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); font-weight: var(--weight-semibold); }
.tab:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }

.navlink {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-md);
  color: var(--text-secondary); font-size: var(--text-sm); font-weight: var(--weight-medium);
  text-decoration: none; transition: var(--transition-colors);
}
.navlink:hover { background: var(--surface-subtle); color: var(--text); text-decoration: none; }
.navlink[aria-current="page"] { background: var(--accent-surface); color: var(--accent-text); }
.navlink svg { width: 18px; height: 18px; flex: none; }

/* =================================================================
   FEEDBACK — alert, toast, tooltip, progress, spinner, avatar
   ================================================================= */
.alert {
  display: flex; gap: var(--space-3); padding: var(--space-4);
  border-radius: var(--radius-md); border: 1px solid var(--border);
  background: var(--surface); font-size: var(--text-sm); color: var(--text-secondary);
}
.alert__title { font-weight: var(--weight-semibold); color: var(--text); }
.alert--accent  { background: var(--accent-surface); border-color: var(--accent-border); }
.alert--success { background: var(--success-surface); border-color: color-mix(in oklch, var(--success) 24%, transparent); }
.alert--warning { background: var(--warning-surface); border-color: color-mix(in oklch, var(--warning) 24%, transparent); }
.alert--danger  { background: var(--danger-surface); border-color: color-mix(in oklch, var(--danger) 24%, transparent); }

.toast {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  background: var(--surface-inverse); color: var(--text-inverse);
  box-shadow: var(--shadow-lg); font-size: var(--text-sm); font-weight: var(--weight-medium);
}

.tooltip {
  background: var(--surface-inverse); color: var(--text-inverse);
  font-size: var(--text-xs); font-weight: var(--weight-medium);
  padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}

.progress { height: 8px; border-radius: var(--radius-full); background: var(--surface-sunken); overflow: hidden; }
.progress__bar { height: 100%; border-radius: inherit; background: var(--accent); transition: width var(--duration-slow) var(--ease-out); }

.spinner {
  width: 18px; height: 18px; border-radius: var(--radius-full);
  border: 2px solid var(--border-strong); border-top-color: var(--accent);
  animation: halo-spin 0.7s linear infinite;
}
@keyframes halo-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 1.6s; } }

.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--radius-full);
  background: var(--accent-surface); color: var(--accent-text);
  font-size: var(--text-sm); font-weight: var(--weight-semibold);
  overflow: hidden; flex: none;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar--sm { width: 28px; height: 28px; font-size: var(--text-xs); }
.avatar--lg { width: 48px; height: 48px; font-size: var(--text-md); }

/* =================================================================
   OVERLAY — modal / dropdown
   ================================================================= */
.overlay { position: fixed; inset: 0; background: rgba(33, 30, 26, 0.32); display: grid; place-items: center; padding: var(--space-5); z-index: var(--z-modal); }
.modal {
  width: 100%; max-width: 480px; background: var(--surface);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-xl);
  padding: var(--space-6); animation: halo-pop var(--duration-base) var(--ease-out);
}
@keyframes halo-pop { from { opacity: 0; transform: translateY(8px) scale(0.98); } }
.menu {
  min-width: 200px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); padding: var(--space-1);
}
.menu__item {
  display: flex; align-items: center; gap: var(--space-3); width: 100%;
  padding: var(--space-2) var(--space-3); border: 0; background: none; cursor: pointer;
  font-size: var(--text-sm); color: var(--text); border-radius: var(--radius-sm); text-align: left;
}
.menu__item:hover { background: var(--surface-subtle); }
.menu__sep { height: 1px; background: var(--border); margin: var(--space-1) 0; }

/* =================================================================
   UTILITIES (sparse — tokens do most of the work)
   ================================================================= */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }