/* ═══════════════════════════════════════════════════════════════════════
   The design system, as one stylesheet.

   Import once. Then set two attributes on the root element:

     <html data-structure="foolscap" data-palette="naval" data-mode="light">

   Structure owns everything that is not colour; palette owns colour only;
   the component layer reads neither by name. Changing either attribute
   restyles the whole application and redraws no screen.

   GENERATED — built from src/styles by scripts/buildcss.mjs.
   ═══════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════
   THE TOKEN CONTRACT

   Every structure and palette must define every token below. Components
   read ONLY these names — never a raw hex, never a font stack, never a
   theme name. That single rule is what lets one component set carry every
   identity we ship.

   Naming: --ui-<group>-<role>[-<state>]
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Surfaces ───────────────────────────────────────────────────── */
  --ui-bg: #ffffff;              /* page ground */
  --ui-surface: #ffffff;         /* raised card ground */
  --ui-surface-2: #f4f5f7;       /* inset / subtle fill */
  --ui-surface-3: #e8eaee;       /* deeper inset, table stripes */
  /* The ground under a control being pressed. Derived from the palette, so
     a new palette gets it for free and dark mode follows without a second
     value. A system with no shadows and square corners has no other way to
     show a press: 1px of displacement is not a state change. */
  --ui-surface-press: color-mix(in srgb, var(--ui-border) 96%, var(--ui-text));

  /* ── Lines ──────────────────────────────────────────────────────── */
  --ui-border: #e2e5ea;
  --ui-border-strong: #c4c9d2;

  /* ── Text ───────────────────────────────────────────────────────── */
  --ui-text: #16181d;
  --ui-text-muted: #5b6270;
  --ui-text-subtle: #8b93a1;
  --ui-text-inverse: #ffffff;

  /* ── Brand ──────────────────────────────────────────────────────── */
  --ui-accent: #3b5bdb;
  --ui-accent-hover: #2f4bc4;
  --ui-accent-press: #263ea6;
  --ui-accent-fg: #ffffff;       /* text ON a filled accent surface */
  --ui-accent-soft: #eaeeff;     /* tinted surface */
  --ui-accent-border: #c3cdf7;
  --ui-accent-2: #7048e8;        /* secondary brand, gradients */
  /* The brand colour at full saturation. Decorative only — gradients,
     brand marks, progress fills, rules. Most saturated brand colours
     cannot carry body text at any foreground; splitting the token is how
     the system keeps the character without shipping a contrast failure. */
  --ui-accent-vivid: #4c6ef5;

  /* ── Semantic ───────────────────────────────────────────────────── */
  /* Each state carries a fill, a text colour and a BOUNDARY. "Required but
     empty" is a warning-weight border, not a warning-weight fill, and a
     boundary hand-picked to look right almost always lands under the 3:1
     that WCAG 1.4.11 asks of it. Generated and audited with the rest. */
  --ui-success: #10794b;
  --ui-success-soft: #e3f5eb;
  --ui-success-border: #1f6a4a;
  --ui-warning: #8a5a00;
  --ui-warning-soft: #fdf1da;
  --ui-warning-border: #b38a26;
  --ui-danger: #b4232a;
  --ui-danger-soft: #fdeaea;
  --ui-danger-border: #a8332c;
  --ui-info: #17607f;
  --ui-info-soft: #e2f1f7;
  --ui-info-border: #1560a8;

  /* ── Focus ──────────────────────────────────────────────────────── */
  --ui-ring: var(--ui-accent);
  --ui-ring-width: 2px;
  --ui-ring-offset: 2px;

  /* ── Typography ─────────────────────────────────────────────────── */
  --ui-font-display: 'Public Sans', system-ui, sans-serif;
  --ui-font-body: 'Public Sans', system-ui, sans-serif;
  --ui-font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  /* Hand-lettered accents — a signature line, a marginal note. Never body
     text, never a label. A structure without a script face falls back to its
     display face, so nothing that asks for it renders in a browser default. */
  --ui-font-script: var(--ui-font-display);

  --ui-text-xs: 0.75rem;
  --ui-text-sm: 0.8125rem;
  --ui-text-base: 0.9375rem;
  --ui-text-md: 1.0625rem;
  --ui-text-lg: 1.25rem;
  --ui-text-xl: 1.5rem;
  --ui-text-2xl: 1.875rem;
  --ui-text-3xl: 2.375rem;
  --ui-text-4xl: 3rem;
  --ui-text-5xl: 3.75rem;

  --ui-weight-body: 400;
  --ui-weight-medium: 500;
  --ui-weight-strong: 600;
  --ui-weight-display: 700;

  --ui-leading-tight: 1.12;
  /* Three leading slots, not two. A structure whose 14px table rows want 1.5
     and whose 16px customer prose wants 1.7 cannot express both with two,
     and most structures have screens carrying both. It defaults to `body`,
     so a structure that does not need the distinction never states it. */
  --ui-leading-snug: var(--ui-leading-body);
  --ui-leading-body: 1.6;
  --ui-tracking-display: -0.015em;
  --ui-tracking-label: 0.06em;

  /* ── Shape ──────────────────────────────────────────────────────── */
  --ui-radius-sm: 4px;
  --ui-radius-md: 8px;
  --ui-radius-lg: 14px;
  --ui-radius-pill: 999px;

  /* ── Elevation ──────────────────────────────────────────────────── */
  /* The colour comes from the palette (so dark themes cast black shadows
     and light ones cast a tinted grey); the shape comes from the
     structure. Both axes contribute, which is why it lives here. */
  --ui-shadow-color: #101418;
  --ui-shadow-sm: 0 1px 2px color-mix(in srgb, var(--ui-shadow-color) 8%, transparent);
  --ui-shadow-md: 0 4px 14px -2px color-mix(in srgb, var(--ui-shadow-color) 14%, transparent);
  --ui-shadow-lg: 0 18px 40px -12px color-mix(in srgb, var(--ui-shadow-color) 26%, transparent);

  /* Frosted glass: the blur behind a translucent bar or card. Zero means
     the structure has no glass, and a translucent surface simply reads as a
     tint — which is why it is a structure token and not a component's own. */
  --ui-blur: 0px;

  /* ── Density ────────────────────────────────────────────────────── */
  /* Themes shift one number and every gap in the system moves with it. */
  --ui-unit: 4px;
  --ui-space-1: calc(var(--ui-unit) * 1);
  --ui-space-2: calc(var(--ui-unit) * 2);
  --ui-space-3: calc(var(--ui-unit) * 3);
  --ui-space-4: calc(var(--ui-unit) * 4);
  --ui-space-5: calc(var(--ui-unit) * 5);
  --ui-space-6: calc(var(--ui-unit) * 6);
  --ui-space-8: calc(var(--ui-unit) * 8);
  --ui-space-10: calc(var(--ui-unit) * 10);
  --ui-space-12: calc(var(--ui-unit) * 12);
  --ui-space-16: calc(var(--ui-unit) * 16);

  --ui-control-h-sm: 30px;
  --ui-control-h-md: 38px;
  --ui-control-h-lg: 46px;

  /* ── Motion ─────────────────────────────────────────────────────── */
  --ui-dur-fast: 120ms;
  --ui-dur-base: 220ms;
  --ui-dur-slow: 420ms;
  --ui-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ui-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}


/* ═══════════════════════════════════════════════════════════════════════
   BASE

   Inside @layer base deliberately. Unlayered CSS outranks every layered
   rule, so `h1 { margin: 0 }` sitting outside a layer would beat Tailwind's
   `mx-auto` and quietly break any utility used on a heading.
   ═══════════════════════════════════════════════════════════════════════ */

@layer base {
  * {
    border-color: var(--ui-border);
  }

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

body {
  margin: 0;
  background: var(--ui-bg);
  color: var(--ui-text);
  font-family: var(--ui-font-body);
  font-size: var(--ui-text-base);
  line-height: var(--ui-leading-body);
  font-weight: var(--ui-weight-body);
  -webkit-font-smoothing: antialiased;
  transition:
    background-color var(--ui-dur-base) var(--ui-ease),
    color var(--ui-dur-base) var(--ui-ease);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--ui-font-display);
  font-weight: var(--ui-weight-display);
  line-height: var(--ui-leading-tight);
  letter-spacing: var(--ui-tracking-display);
  margin: 0;
  text-wrap: balance;
}

/* One focus treatment for the whole system. Keyboard only. */
:focus-visible {
  outline: var(--ui-ring-width) solid var(--ui-ring);
  outline-offset: var(--ui-ring-offset);
  border-radius: var(--ui-radius-sm);
}

::selection {
  background: var(--ui-accent);
  color: var(--ui-accent-fg);
}

@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;
  }
}

/* closes @layer base */
}

/* ═══════════════════════════════════════════════════════════════════════
   STRUCTURES  —  axis 1 of 2

   A structure owns everything that is NOT colour: typeface pairing, type
   scale, weight, leading, tracking, corner radius, density and elevation.
   These are few on purpose — each one changes how components behave and
   how much content fits on a screen, so each is a real design decision.

   Colour lives in palettes.css. The two axes never reference each other,
   which is why any structure composes with any palette.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── SIGNAL ──────────────────────────────────────────────────────────────
   SaaS and product marketing. Rubik, heavy display weights, roomy
   controls, soft corners. The default for anything that has to sell. */

[data-structure='signal'] {
  --ui-font-display: 'Rubik', system-ui, sans-serif;
  --ui-font-body: 'Rubik', system-ui, sans-serif;

  --ui-text-base: 1rem;
  --ui-text-3xl: 2.375rem;
  --ui-text-4xl: 3.125rem;
  --ui-text-5xl: 3.75rem;

  --ui-weight-display: 700;
  --ui-weight-strong: 500;
  --ui-leading-tight: 1.1;
  --ui-leading-body: 1.65;
  --ui-tracking-display: -0.02em;
  --ui-tracking-label: 0.08em;

  --ui-radius-sm: 6px;
  --ui-radius-md: 8px;
  --ui-radius-lg: 14px;

  --ui-unit: 4px;
  --ui-control-h-sm: 32px;
  --ui-control-h-md: 42px;
  --ui-control-h-lg: 52px;

  --ui-shadow-sm: 0 1px 2px color-mix(in srgb, var(--ui-shadow-color) 8%, transparent);
  --ui-shadow-md: 0 6px 18px -4px color-mix(in srgb, var(--ui-shadow-color) 16%, transparent);
  --ui-shadow-lg: 0 20px 44px -14px color-mix(in srgb, var(--ui-shadow-color) 28%, transparent);
}

/* ── ATELIER ─────────────────────────────────────────────────────────────
   Boutique, fashion, hospitality. Josefin Sans at weight 300 over Open
   Sans, square corners, wide tracking, generous air. Quiet and editorial. */

[data-structure='atelier'] {
  --ui-font-display: 'Josefin Sans', Georgia, sans-serif;
  --ui-font-body: 'Open Sans', system-ui, sans-serif;

  --ui-text-base: 0.9375rem;
  --ui-text-3xl: 2.75rem;
  --ui-text-4xl: 3.5rem;
  --ui-text-5xl: 4.5rem;

  --ui-weight-display: 300;
  --ui-weight-strong: 600;
  --ui-leading-tight: 1.06;
  --ui-leading-body: 1.75;
  --ui-tracking-display: 0.02em;
  --ui-tracking-label: 0.18em;

  --ui-radius-sm: 0px;
  --ui-radius-md: 0px;
  --ui-radius-lg: 0px;
  --ui-radius-pill: 0px;

  --ui-unit: 5px;
  --ui-control-h-sm: 34px;
  --ui-control-h-md: 46px;
  --ui-control-h-lg: 58px;

  --ui-shadow-sm: 0 1px 2px color-mix(in srgb, var(--ui-shadow-color) 5%, transparent);
  --ui-shadow-md: 0 12px 34px -14px color-mix(in srgb, var(--ui-shadow-color) 18%, transparent);
  --ui-shadow-lg: 0 30px 64px -22px color-mix(in srgb, var(--ui-shadow-color) 30%, transparent);
}

/* ── CONSOLE ─────────────────────────────────────────────────────────────
   Dense data work. Roboto at a 14px base, 2px radius, light headings,
   tight controls. Fits roughly a third more rows on a screen than Signal. */

[data-structure='console'] {
  --ui-font-display: 'Roboto', system-ui, sans-serif;
  --ui-font-body: 'Roboto', system-ui, sans-serif;

  --ui-text-xs: 0.6875rem;
  --ui-text-sm: 0.75rem;
  --ui-text-base: 0.875rem;
  --ui-text-md: 1rem;
  --ui-text-lg: 1.125rem;
  --ui-text-xl: 1.25rem;
  --ui-text-2xl: 1.5rem;
  --ui-text-3xl: 1.75rem;
  --ui-text-4xl: 2rem;
  --ui-text-5xl: 2.5rem;

  --ui-weight-display: 400;
  --ui-weight-strong: 500;
  --ui-leading-tight: 1.15;
  --ui-leading-snug: 1.5;
  --ui-leading-body: 1.5;
  --ui-tracking-display: 0;
  --ui-tracking-label: 0.06em;

  --ui-radius-sm: 2px;
  --ui-radius-md: 2px;
  --ui-radius-lg: 2px;

  --ui-unit: 4px;
  --ui-control-h-sm: 28px;
  --ui-control-h-md: 36px;
  --ui-control-h-lg: 44px;

  --ui-shadow-sm: 0 1px 3px color-mix(in srgb, var(--ui-shadow-color) 14%, transparent);
  --ui-shadow-md: 0 3px 6px color-mix(in srgb, var(--ui-shadow-color) 20%, transparent);
  --ui-shadow-lg: 0 10px 20px color-mix(in srgb, var(--ui-shadow-color) 26%, transparent);
}

/* Console's 28px row is the whole reason the structure exists, so it is not
   raised for everyone. It is raised for the hand. A viewport floor would be
   wrong twice over: it would strip a desktop back office of its density, and
   it would still fail a tablet at 1024px. `pointer: coarse` asks the right
   question of the right device. */

@media (pointer: coarse) {
  [data-structure='console'] {
    --ui-control-h-sm: 44px;
    --ui-control-h-md: 44px;
  }
}

/* ── AURORA ──────────────────────────────────────────────────────────────
   Our house structure. Sora over Public Sans, large radii, generous
   spacing. Friendly without being soft-headed. */

[data-structure='aurora'] {
  --ui-font-display: 'Sora', system-ui, sans-serif;
  --ui-font-body: 'Public Sans', system-ui, sans-serif;

  --ui-text-base: 0.9375rem;
  --ui-text-3xl: 2.25rem;
  --ui-text-4xl: 2.875rem;
  --ui-text-5xl: 3.5rem;

  --ui-weight-display: 600;
  --ui-weight-strong: 600;
  --ui-leading-tight: 1.14;
  --ui-leading-body: 1.65;
  --ui-tracking-display: -0.025em;
  --ui-tracking-label: 0.07em;

  --ui-radius-sm: 8px;
  --ui-radius-md: 12px;
  --ui-radius-lg: 20px;

  --ui-unit: 4px;
  --ui-control-h-sm: 32px;
  --ui-control-h-md: 40px;
  --ui-control-h-lg: 50px;

  --ui-shadow-sm: 0 1px 2px color-mix(in srgb, var(--ui-shadow-color) 6%, transparent);
  --ui-shadow-md: 0 8px 24px -8px color-mix(in srgb, var(--ui-shadow-color) 16%, transparent);
  --ui-shadow-lg: 0 26px 52px -18px color-mix(in srgb, var(--ui-shadow-color) 26%, transparent);
}

/* ── BROADSHEET ──────────────────────────────────────────────────────────
   Editorial. A serif display over a plain grotesque, hairline rules
   instead of shadows, almost no radius. For boutiques that want to read
   like a magazine rather than an app. */

[data-structure='broadsheet'] {
  --ui-font-display: 'Fraunces', Georgia, serif;
  --ui-font-body: 'Public Sans', system-ui, sans-serif;

  --ui-text-base: 1rem;
  --ui-text-3xl: 2.5rem;
  --ui-text-4xl: 3.25rem;
  --ui-text-5xl: 4.25rem;

  --ui-weight-display: 600;
  --ui-weight-strong: 600;
  --ui-leading-tight: 1.04;
  --ui-leading-body: 1.7;
  --ui-tracking-display: -0.015em;
  --ui-tracking-label: 0.14em;

  --ui-radius-sm: 2px;
  --ui-radius-md: 3px;
  --ui-radius-lg: 3px;

  --ui-unit: 5px;
  --ui-control-h-sm: 32px;
  --ui-control-h-md: 44px;
  --ui-control-h-lg: 54px;

  /* Deliberately near-flat: this structure separates with rules, not lift. */
  --ui-shadow-sm: 0 0 0 1px color-mix(in srgb, var(--ui-shadow-color) 8%, transparent);
  --ui-shadow-md: 0 2px 8px -2px color-mix(in srgb, var(--ui-shadow-color) 12%, transparent);
  --ui-shadow-lg: 0 12px 28px -10px color-mix(in srgb, var(--ui-shadow-color) 20%, transparent);
}

/* ── FOOLSCAP ────────────────────────────────────────────────────────────
   The made-to-order boutique. Inter at 2px corners over hairline rules is a
   ruled order book, not an app — foolscap folio is still the paper an Indian
   shop keeps its ledger on. A serif display face appears only where the
   customer does: the wordmark, a customer page title, a portfolio card. It
   never touches a table cell, a line item or a number.

   Every control is 44px because the person using it is standing in her shop
   holding a phone. `sm` and `md` are deliberately the same number. */

[data-structure='foolscap'] {
  --ui-font-display: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  --ui-font-body: Inter, ui-sans-serif, system-ui, sans-serif;

  --ui-text-xs: 0.75rem;      /* 12 */
  --ui-text-sm: 0.8125rem;    /* 13 */
  --ui-text-base: 0.875rem;   /* 14 */
  --ui-text-md: 1rem;         /* 16 */
  --ui-text-lg: 1.125rem;     /* 18 */
  --ui-text-xl: 1.375rem;     /* 22 */
  --ui-text-2xl: 1.75rem;     /* 28 */
  --ui-text-3xl: 2.25rem;     /* 36 */
  /* The ceiling is 36. A component asking for a size this structure does not
     own gets the largest one it does, rather than an off-scale value. */
  --ui-text-4xl: 2.25rem;
  --ui-text-5xl: 2.25rem;

  --ui-leading-tight: 1.15;
  --ui-leading-snug: 1.5;
  --ui-leading-body: 1.7;
  --ui-tracking-display: -0.02em;
  --ui-tracking-label: 0.08em;

  --ui-radius-sm: 2px;
  --ui-radius-md: 2px;
  --ui-radius-lg: 2px;
  --ui-radius-pill: 999px;

  --ui-unit: 4px;
  --ui-control-h-sm: 44px;
  --ui-control-h-md: 44px;
  --ui-control-h-lg: 52px;

  /* Hairlines, not lift. The one shadow in the structure is for overlays,
     which have to float above the page or they are not overlays. */
  --ui-shadow-sm: none;
  --ui-shadow-md: none;
  --ui-shadow-lg: 0 8px 32px color-mix(in srgb, var(--ui-shadow-color) 12%, transparent);

  --ui-dur-fast: 120ms;
  --ui-dur-base: 200ms;
  --ui-dur-slow: 320ms;
  --ui-ease: cubic-bezier(0.2, 0, 0, 1);
}

/* ── DRAPE ───────────────────────────────────────────────────────────────
   Drawn off the Elegance Designer Boutique home mock (22 September 2026).
   A high-contrast serif for display, a soft grotesque for everything read,
   a script reserved for accents. 8px corners, lift that is long and low
   rather than tight, and frosted glass for bars that sit over photography.
   Controls stay at 44px: it is a storefront, so it is a phone first. */

[data-structure='drape'] {
  --ui-font-display: 'Playfair Display', 'Libre Caslon Text', Georgia, serif;
  --ui-font-body: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
  --ui-font-script: 'Ms Madi', 'Parisienne', 'Snell Roundhand', cursive;

  --ui-text-xs: 0.75rem;      /* 12 */
  --ui-text-sm: 0.8125rem;    /* 13 */
  --ui-text-base: 0.9375rem;  /* 15 */
  --ui-text-md: 1.0625rem;    /* 17 */
  --ui-text-lg: 1.25rem;      /* 20 */
  --ui-text-xl: 1.5rem;       /* 24 */
  --ui-text-2xl: 1.875rem;    /* 30 */
  --ui-text-3xl: 2.5rem;      /* 40 */
  --ui-text-4xl: 3.25rem;     /* 52 */
  --ui-text-5xl: 4.125rem;    /* 66 — the hero headline at desk width */

  --ui-weight-body: 400;
  --ui-weight-medium: 500;
  --ui-weight-strong: 600;
  --ui-weight-display: 500;

  --ui-leading-tight: 1.04;
  --ui-leading-snug: 1.45;
  --ui-leading-body: 1.6;
  --ui-tracking-display: -0.012em;
  --ui-tracking-label: 0.14em;

  --ui-radius-sm: 6px;
  --ui-radius-md: 8px;
  --ui-radius-lg: 16px;
  --ui-radius-pill: 999px;

  --ui-unit: 4px;
  --ui-control-h-sm: 36px;
  --ui-control-h-md: 44px;
  --ui-control-h-lg: 50px;

  --ui-shadow-sm: 0 1px 2px color-mix(in srgb, var(--ui-shadow-color) 8%, transparent);
  --ui-shadow-md: 0 10px 24px -16px color-mix(in srgb, var(--ui-shadow-color) 42%, transparent);
  --ui-shadow-lg: 0 26px 56px -28px color-mix(in srgb, var(--ui-shadow-color) 55%, transparent);
  --ui-blur: 14px;

  --ui-dur-fast: 150ms;
  --ui-dur-base: 300ms;
  --ui-dur-slow: 500ms;
  --ui-ease: cubic-bezier(0.22, 0.7, 0.2, 1);
}

/* ═══════════════════════════════════════════════════════════════════════
   PALETTES  —  axis 2 of 2

   GENERATED FILE — do not hand-edit. Source: scripts/genpalettes.mjs
   Regenerate with:  node scripts/genpalettes.mjs > src/styles/palettes.css

   Each palette starts from one brand colour. The ramp around it is derived,
   not chosen: the accent is walked in lightness until it clears 4.6:1
   against its own soft tint (the harder of the two backgrounds it must sit
   on), the foreground is picked as whichever of white or a tinted ink
   passes, and neutrals are tinted toward the brand hue so the palette reads
   as one family.

   Every value below is machine-verified against the same thirteen pairs the
   catalogue measures in the browser, plus every ground the semantic border
   tokens can land on. The count is printed by the generator on each run.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Semantic colours ────────────────────────────────────────────────────
   Shared across every palette and varying only by mode. Success must stay
   green when the brand is bronze — semantic meaning does not belong to the
   brand, and keeping it out of the palette means it is audited once rather
   than twenty-three times. */

:root {
  --ui-success: #0f7a45;
  --ui-success-soft: #e4f6ec;
  --ui-success-border: #1f6a4a;
  --ui-warning: #8a5a00;
  --ui-warning-soft: #fff3dc;
  --ui-warning-border: #b38a26;
  --ui-danger: #c0202b;
  --ui-danger-soft: #fdebec;
  --ui-danger-border: #a8332c;
  --ui-info: #1560a8;
  --ui-info-soft: #e7f1fd;
  --ui-info-border: #1560a8;
}

[data-mode='dark'] {
  --ui-success: #4ade9b;
  --ui-success-soft: #10281d;
  --ui-success-border: #237753;
  --ui-warning: #f0b24a;
  --ui-warning-soft: #2a2011;
  --ui-warning-border: #d6a93c;
  --ui-danger: #ff8078;
  --ui-danger-soft: #2e1614;
  --ui-danger-border: #bb3931;
  --ui-info: #6cb4f5;
  --ui-info-soft: #12212f;
  --ui-info-border: #1769b8;
}

[data-palette='ember'] {
  --ui-bg: #fefefe;
  --ui-surface: #ffffff;
  --ui-surface-2: #f7f7f6;
  --ui-surface-3: #efeeed;
  --ui-border: #e8e6e5;
  --ui-border-strong: #988f8a;
  --ui-text: #241f1e;
  --ui-text-muted: #625956;
  --ui-text-subtle: #7c726f;
  --ui-accent: #cd3100;
  --ui-accent-hover: #a92800;
  --ui-accent-press: #8b2100;
  --ui-accent-fg: #ffffff;
  --ui-accent-soft: #fdeeea;
  --ui-accent-border: #ecac98;
  --ui-accent-vivid: #ff5722;
  --ui-accent-2: #5034fc;
  --ui-shadow-color: #221d1b;
}

[data-palette='ember'][data-mode='dark'] {
  --ui-bg: #0f0d0d;
  --ui-surface: #181514;
  --ui-surface-2: #201c1b;
  --ui-surface-3: #292523;
  --ui-border: #342f2d;
  --ui-border-strong: #6f6460;
  --ui-text: #f1f1f1;
  --ui-text-muted: #b6b1af;
  --ui-text-subtle: #847a76;
  --ui-accent: #ff5722;
  --ui-accent-hover: #ff764b;
  --ui-accent-press: #ff916f;
  --ui-accent-fg: #2c1711;
  --ui-accent-soft: #35190f;
  --ui-accent-border: #863217;
  --ui-accent-vivid: #ff5722;
  --ui-accent-2: #8473fd;
  --ui-shadow-color: #000000;
}

[data-palette='lagoon'] {
  --ui-bg: #fefefe;
  --ui-surface: #ffffff;
  --ui-surface-2: #f6f7f7;
  --ui-surface-3: #edf0f0;
  --ui-border: #e5e8e8;
  --ui-border-strong: #859393;
  --ui-text: #1d2525;
  --ui-text-muted: #556363;
  --ui-text-subtle: #687676;
  --ui-accent: #077d7b;
  --ui-accent-hover: #089895;
  --ui-accent-press: #066563;
  --ui-accent-fg: #ffffff;
  --ui-accent-soft: #ebfcfc;
  --ui-accent-border: #9bd0cf;
  --ui-accent-vivid: #099a97;
  --ui-accent-2: #ea0000;
  --ui-shadow-color: #1a2323;
}

[data-palette='lagoon'][data-mode='dark'] {
  --ui-bg: #0c1010;
  --ui-surface: #131818;
  --ui-surface-2: #1a2020;
  --ui-surface-3: #232a2a;
  --ui-border: #2c3534;
  --ui-border-strong: #586b68;
  --ui-text: #f0f1f1;
  --ui-text-muted: #afb6b6;
  --ui-text-subtle: #708080;
  --ui-accent: #0aaba8;
  --ui-accent-hover: #0cd2ce;
  --ui-accent-press: #10f1ed;
  --ui-accent-fg: #112c2c;
  --ui-accent-soft: #103534;
  --ui-accent-border: #0e6462;
  --ui-accent-vivid: #099a97;
  --ui-accent-2: #ff7272;
  --ui-shadow-color: #000000;
}

[data-palette='blossom'] {
  --ui-bg: #fefefe;
  --ui-surface: #ffffff;
  --ui-surface-2: #f7f6f7;
  --ui-surface-3: #efedee;
  --ui-border: #e8e5e6;
  --ui-border-strong: #9a8d92;
  --ui-text: #241e20;
  --ui-text-muted: #625659;
  --ui-text-subtle: #7e7174;
  --ui-accent: #d5023f;
  --ui-accent-hover: #b20235;
  --ui-accent-press: #93012c;
  --ui-accent-fg: #ffffff;
  --ui-accent-soft: #fdeaef;
  --ui-accent-border: #ef99b1;
  --ui-accent-vivid: #fd346e;
  --ui-accent-2: #07817f;
  --ui-shadow-color: #221b1d;
}

[data-palette='blossom'][data-mode='dark'] {
  --ui-bg: #0f0d0d;
  --ui-surface: #181415;
  --ui-surface-2: #201b1c;
  --ui-surface-3: #292325;
  --ui-border: #342d2f;
  --ui-border-strong: #716266;
  --ui-text: #f1f1f1;
  --ui-text-muted: #b6afb1;
  --ui-text-subtle: #87787d;
  --ui-accent: #fd346e;
  --ui-accent-hover: #fd5c8b;
  --ui-accent-press: #fe80a4;
  --ui-accent-fg: #2c1119;
  --ui-accent-soft: #350f1a;
  --ui-accent-border: #851e3c;
  --ui-accent-vivid: #fd346e;
  --ui-accent-2: #0abfbc;
  --ui-shadow-color: #000000;
}

[data-palette='circuit'] {
  --ui-bg: #fefefe;
  --ui-surface: #ffffff;
  --ui-surface-2: #f6f7f7;
  --ui-surface-3: #edeef0;
  --ui-border: #e5e7e8;
  --ui-border-strong: #899297;
  --ui-text: #1d2125;
  --ui-text-muted: #555c63;
  --ui-text-subtle: #6e757d;
  --ui-accent: #036ad5;
  --ui-accent-hover: #0358b2;
  --ui-accent-press: #024994;
  --ui-accent-fg: #ffffff;
  --ui-accent-soft: #eaf3fd;
  --ui-accent-border: #99c3ef;
  --ui-accent-vivid: #1787fc;
  --ui-accent-2: #5034fc;
  --ui-shadow-color: #1a1f23;
}

[data-palette='circuit'][data-mode='dark'] {
  --ui-bg: #0c0e10;
  --ui-surface: #131618;
  --ui-surface-2: #1a1d20;
  --ui-surface-3: #23262a;
  --ui-border: #2c3035;
  --ui-border-strong: #5e6771;
  --ui-text: #f0f1f1;
  --ui-text-muted: #afb2b6;
  --ui-text-subtle: #757d86;
  --ui-accent: #1b89fc;
  --ui-accent-hover: #439efd;
  --ui-accent-press: #67b0fd;
  --ui-accent-fg: #111e2c;
  --ui-accent-soft: #0f2235;
  --ui-accent-border: #144b85;
  --ui-accent-vivid: #1787fc;
  --ui-accent-2: #8473fd;
  --ui-shadow-color: #000000;
}

[data-palette='meadow'] {
  --ui-bg: #fefefe;
  --ui-surface: #ffffff;
  --ui-surface-2: #f6f7f7;
  --ui-surface-3: #edefee;
  --ui-border: #e5e8e7;
  --ui-border-strong: #86948f;
  --ui-text: #1e2421;
  --ui-text-muted: #56625c;
  --ui-text-subtle: #6c7771;
  --ui-accent: #157f48;
  --ui-accent-hover: #199756;
  --ui-accent-press: #11693c;
  --ui-accent-fg: #ffffff;
  --ui-accent-soft: #edfaf3;
  --ui-accent-border: #a1cfb7;
  --ui-accent-vivid: #22cc74;
  --ui-accent-2: #b05f00;
  --ui-shadow-color: #1b221e;
}

[data-palette='meadow'][data-mode='dark'] {
  --ui-bg: #0d0f0e;
  --ui-surface: #141816;
  --ui-surface-2: #1b201d;
  --ui-surface-3: #232926;
  --ui-border: #2d3430;
  --ui-border-strong: #5c6b62;
  --ui-text: #f1f1f1;
  --ui-text-muted: #afb6b2;
  --ui-text-subtle: #727f78;
  --ui-accent: #22cc74;
  --ui-accent-hover: #39de88;
  --ui-accent-press: #57e39b;
  --ui-accent-fg: #112c1e;
  --ui-accent-soft: #143122;
  --ui-accent-border: #1a6f43;
  --ui-accent-vivid: #22cc74;
  --ui-accent-2: #ff971d;
  --ui-shadow-color: #000000;
}

[data-palette='saffron'] {
  --ui-bg: #fefefe;
  --ui-surface: #ffffff;
  --ui-surface-2: #f7f7f6;
  --ui-surface-3: #f0efed;
  --ui-border: #e8e7e5;
  --ui-border-strong: #959087;
  --ui-text: #25211d;
  --ui-text-muted: #635c55;
  --ui-text-subtle: #7a736b;
  --ui-accent: #a85b00;
  --ui-accent-hover: #844800;
  --ui-accent-press: #663700;
  --ui-accent-fg: #ffffff;
  --ui-accent-soft: #fdf4ea;
  --ui-accent-border: #dfbe98;
  --ui-accent-vivid: #ff971d;
  --ui-accent-2: #25373f;
  --ui-shadow-color: #231f1a;
}

[data-palette='saffron'][data-mode='dark'] {
  --ui-bg: #100e0c;
  --ui-surface: #181613;
  --ui-surface-2: #201e1a;
  --ui-surface-3: #2a2723;
  --ui-border: #35312c;
  --ui-border-strong: #6e665b;
  --ui-text: #f1f1f0;
  --ui-text-muted: #b6b3af;
  --ui-text-subtle: #827b72;
  --ui-accent: #ff971d;
  --ui-accent-hover: #ffaa46;
  --ui-accent-press: #ffba6a;
  --ui-accent-fg: #2c2011;
  --ui-accent-soft: #35240f;
  --ui-accent-border: #865215;
  --ui-accent-vivid: #ff971d;
  --ui-accent-2: #6c8fa8;
  --ui-shadow-color: #000000;
}

[data-palette='scarlet'] {
  --ui-bg: #fefefe;
  --ui-surface: #ffffff;
  --ui-surface-2: #f7f6f7;
  --ui-surface-3: #efeeee;
  --ui-border: #e8e6e6;
  --ui-border-strong: #988f8f;
  --ui-text: #241e1f;
  --ui-text-muted: #615758;
  --ui-text-subtle: #7d7273;
  --ui-accent: #d80019;
  --ui-accent-hover: #b40015;
  --ui-accent-press: #960011;
  --ui-accent-fg: #ffffff;
  --ui-accent-soft: #fdeaec;
  --ui-accent-border: #f098a2;
  --ui-accent-vivid: #ff1e38;
  --ui-accent-2: #6001d3;
  --ui-shadow-color: #221c1c;
}

[data-palette='scarlet'][data-mode='dark'] {
  --ui-bg: #0f0d0d;
  --ui-surface: #171414;
  --ui-surface-2: #1f1b1c;
  --ui-surface-3: #292424;
  --ui-border: #332e2e;
  --ui-border-strong: #6e6363;
  --ui-text: #f1f1f1;
  --ui-text-muted: #b5b0b0;
  --ui-text-subtle: #85797b;
  --ui-accent: #ff2a43;
  --ui-accent-hover: #ff5367;
  --ui-accent-press: #ff7787;
  --ui-accent-fg: #2c1114;
  --ui-accent-soft: #350f14;
  --ui-accent-border: #861a27;
  --ui-accent-vivid: #ff1e38;
  --ui-accent-2: #a35cfe;
  --ui-shadow-color: #000000;
}

[data-palette='violet'] {
  --ui-bg: #fefefe;
  --ui-surface: #ffffff;
  --ui-surface-2: #f6f6f7;
  --ui-surface-3: #eeedf0;
  --ui-border: #e6e5e8;
  --ui-border-strong: #938e9b;
  --ui-text: #1e1d25;
  --ui-text-muted: #575563;
  --ui-text-subtle: #747382;
  --ui-accent: #5034fc;
  --ui-accent-hover: #3211fb;
  --ui-accent-press: #2403ea;
  --ui-accent-fg: #ffffff;
  --ui-accent-soft: #edeafd;
  --ui-accent-border: #b6aafd;
  --ui-accent-vivid: #5034fc;
  --ui-accent-2: #847300;
  --ui-shadow-color: #1c1a23;
}

[data-palette='violet'][data-mode='dark'] {
  --ui-bg: #0d0c10;
  --ui-surface: #141318;
  --ui-surface-2: #1b1a20;
  --ui-surface-3: #24232a;
  --ui-border: #2e2c35;
  --ui-border-strong: #676377;
  --ui-text: #f1f0f1;
  --ui-text-muted: #b0afb6;
  --ui-text-subtle: #7c798a;
  --ui-accent: #7f6afd;
  --ui-accent-hover: #a292fe;
  --ui-accent-press: #c0b5fe;
  --ui-accent-fg: #15112c;
  --ui-accent-soft: #150f35;
  --ui-accent-border: #3f3385;
  --ui-accent-vivid: #5034fc;
  --ui-accent-2: #fcdc00;
  --ui-shadow-color: #000000;
}

[data-palette='chartreuse'] {
  --ui-bg: #fefefe;
  --ui-surface: #ffffff;
  --ui-surface-2: #f7f7f6;
  --ui-surface-3: #efefed;
  --ui-border: #e8e8e5;
  --ui-border-strong: #919182;
  --ui-text: #24241e;
  --ui-text-muted: #616256;
  --ui-text-subtle: #74756a;
  --ui-accent: #6f7900;
  --ui-accent-hover: #899500;
  --ui-accent-press: #586000;
  --ui-accent-fg: #ffffff;
  --ui-accent-soft: #fcfdea;
  --ui-accent-border: #cbcf98;
  --ui-accent-vivid: #b5c400;
  --ui-accent-2: #d6236a;
  --ui-shadow-color: #22221b;
}

[data-palette='chartreuse'][data-mode='dark'] {
  --ui-bg: #0f0f0d;
  --ui-surface: #171814;
  --ui-surface-2: #1f201b;
  --ui-surface-3: #292923;
  --ui-border: #33342d;
  --ui-border-strong: #686a5b;
  --ui-text: #f1f1f1;
  --ui-text-muted: #b5b6af;
  --ui-text-subtle: #7d7e71;
  --ui-accent: #b5c400;
  --ui-accent-hover: #dbed00;
  --ui-accent-press: #edff11;
  --ui-accent-fg: #2a2c11;
  --ui-accent-soft: #32350f;
  --ui-accent-border: #666e09;
  --ui-accent-vivid: #b5c400;
  --ui-accent-2: #df6d97;
  --ui-shadow-color: #000000;
}

[data-palette='oxblood'] {
  --ui-bg: #fefefe;
  --ui-surface: #ffffff;
  --ui-surface-2: #f7f6f6;
  --ui-surface-3: #f0edee;
  --ui-border: #e8e5e6;
  --ui-border-strong: #9a8d92;
  --ui-text: #251d1f;
  --ui-text-muted: #635557;
  --ui-text-subtle: #7f7073;
  --ui-accent: #7b2233;
  --ui-accent-hover: #5f1a27;
  --ui-accent-press: #47141d;
  --ui-accent-fg: #ffffff;
  --ui-accent-soft: #f9eef0;
  --ui-accent-border: #cda7ae;
  --ui-accent-vivid: #7b2233;
  --ui-accent-2: #8c6f42;
  --ui-shadow-color: #231a1c;
}

[data-palette='oxblood'][data-mode='dark'] {
  --ui-bg: #100c0d;
  --ui-surface: #181314;
  --ui-surface-2: #201a1c;
  --ui-surface-3: #2a2324;
  --ui-border: #352c2e;
  --ui-border-strong: #756165;
  --ui-text: #f1f0f1;
  --ui-text-muted: #b6afb0;
  --ui-text-subtle: #88777b;
  --ui-accent: #d46278;
  --ui-accent-hover: #dd8294;
  --ui-accent-press: #e49eac;
  --ui-accent-fg: #2c1116;
  --ui-accent-soft: #2e171b;
  --ui-accent-border: #703540;
  --ui-accent-vivid: #7b2233;
  --ui-accent-2: #b08d57;
  --ui-shadow-color: #000000;
}

[data-palette='plum'] {
  --ui-bg: #fefefe;
  --ui-surface: #ffffff;
  --ui-surface-2: #f7f6f7;
  --ui-surface-3: #f0edef;
  --ui-border: #e8e5e8;
  --ui-border-strong: #9a8d9a;
  --ui-text: #251d23;
  --ui-text-muted: #63555f;
  --ui-text-subtle: #7f707b;
  --ui-accent: #6b2d5c;
  --ui-accent-hover: #7f356d;
  --ui-accent-press: #59254d;
  --ui-accent-fg: #ffffff;
  --ui-accent-soft: #f8f0f6;
  --ui-accent-border: #c7acc0;
  --ui-accent-vivid: #6b2d5c;
  --ui-accent-2: #8b701b;
  --ui-shadow-color: #231a21;
}

[data-palette='plum'][data-mode='dark'] {
  --ui-bg: #100c0f;
  --ui-surface: #181317;
  --ui-surface-2: #201a1f;
  --ui-surface-3: #2a2328;
  --ui-border: #352c33;
  --ui-border-strong: #73606f;
  --ui-text: #f1f0f1;
  --ui-text-muted: #b6afb4;
  --ui-text-subtle: #887784;
  --ui-accent: #c06aac;
  --ui-accent-hover: #cc87bc;
  --ui-accent-press: #d7a0ca;
  --ui-accent-fg: #2b1225;
  --ui-accent-soft: #2b1a27;
  --ui-accent-border: #673a5c;
  --ui-accent-vivid: #6b2d5c;
  --ui-accent-2: #c9a227;
  --ui-shadow-color: #000000;
}

[data-palette='sapphire'] {
  --ui-bg: #fefefe;
  --ui-surface: #ffffff;
  --ui-surface-2: #f6f7f7;
  --ui-surface-3: #edeef0;
  --ui-border: #e5e6e8;
  --ui-border-strong: #8c9199;
  --ui-text: #1d2025;
  --ui-text-muted: #555a63;
  --ui-text-subtle: #6f747e;
  --ui-accent: #1b3a6b;
  --ui-accent-hover: #214681;
  --ui-accent-press: #162f57;
  --ui-accent-fg: #ffffff;
  --ui-accent-soft: #eef2f9;
  --ui-accent-border: #a4b2c7;
  --ui-accent-vivid: #1b3a6b;
  --ui-accent-2: #8c6f38;
  --ui-shadow-color: #1a1e23;
}

[data-palette='sapphire'][data-mode='dark'] {
  --ui-bg: #0c0e10;
  --ui-surface: #131518;
  --ui-surface-2: #1a1d20;
  --ui-surface-3: #23252a;
  --ui-border: #2c3035;
  --ui-border-strong: #5e6771;
  --ui-text: #f0f1f1;
  --ui-text-muted: #afb2b6;
  --ui-text-subtle: #767d87;
  --ui-accent: #5889d5;
  --ui-accent-hover: #79a0dd;
  --ui-accent-press: #95b4e4;
  --ui-accent-fg: #111c2c;
  --ui-accent-soft: #16202f;
  --ui-accent-border: #304a71;
  --ui-accent-vivid: #1b3a6b;
  --ui-accent-2: #c0a062;
  --ui-shadow-color: #000000;
}

[data-palette='forest'] {
  --ui-bg: #fefefe;
  --ui-surface: #ffffff;
  --ui-surface-2: #f6f7f7;
  --ui-surface-3: #edf0ef;
  --ui-border: #e5e8e7;
  --ui-border-strong: #86948f;
  --ui-text: #1d2522;
  --ui-text-muted: #55635d;
  --ui-text-subtle: #697871;
  --ui-accent: #1b4332;
  --ui-accent-hover: #235741;
  --ui-accent-press: #143124;
  --ui-accent-fg: #ffffff;
  --ui-accent-soft: #eff8f4;
  --ui-accent-border: #a5b9b0;
  --ui-accent-vivid: #1b4332;
  --ui-accent-2: #8b701b;
  --ui-shadow-color: #1a231f;
}

[data-palette='forest'][data-mode='dark'] {
  --ui-bg: #0c100e;
  --ui-surface: #131816;
  --ui-surface-2: #1a201e;
  --ui-surface-3: #232a27;
  --ui-border: #2c3531;
  --ui-border-strong: #586b62;
  --ui-text: #f0f1f1;
  --ui-text-muted: #afb6b3;
  --ui-text-subtle: #708079;
  --ui-accent: #41a077;
  --ui-accent-hover: #51b88c;
  --ui-accent-press: #6bc39d;
  --ui-accent-fg: #122c20;
  --ui-accent-soft: #1a2b24;
  --ui-accent-border: #2a5a45;
  --ui-accent-vivid: #1b4332;
  --ui-accent-2: #c9a227;
  --ui-shadow-color: #000000;
}

[data-palette='mulberry'] {
  --ui-bg: #fff6f7;
  --ui-surface: #ffffff;
  --ui-surface-2: #f8f0f0;
  --ui-surface-3: #f2e4e6;
  --ui-border: #eddadc;
  --ui-border-strong: #aa888c;
  --ui-text: #2a191b;
  --ui-text-muted: #6c4c4f;
  --ui-text-subtle: #7e5e62;
  --ui-accent: #621a3f;
  --ui-accent-hover: #78204d;
  --ui-accent-press: #4e1532;
  --ui-accent-fg: #ffffff;
  --ui-accent-soft: #f9eef4;
  --ui-accent-border: #c4a4b5;
  --ui-accent-vivid: #621a3f;
  --ui-accent-2: #ac546a;
  --ui-shadow-color: #281517;
}

[data-palette='mulberry'][data-mode='dark'] {
  --ui-bg: #160608;
  --ui-surface: #210a0d;
  --ui-surface-2: #2c0f12;
  --ui-surface-3: #381519;
  --ui-border: #451c21;
  --ui-border-strong: #83585d;
  --ui-text: #f2f0f0;
  --ui-text-muted: #bbaaac;
  --ui-text-subtle: #a18184;
  --ui-accent: #d45c99;
  --ui-accent-hover: #dd7cad;
  --ui-accent-press: #e499bf;
  --ui-accent-fg: #2c111f;
  --ui-accent-soft: #2e1623;
  --ui-accent-border: #703252;
  --ui-accent-vivid: #621a3f;
  --ui-accent-2: #b96e80;
  --ui-shadow-color: #000000;
}

[data-palette='sage'] {
  --ui-bg: #fefefe;
  --ui-surface: #ffffff;
  --ui-surface-2: #f7f7f6;
  --ui-surface-3: #eeefee;
  --ui-border: #e7e8e6;
  --ui-border-strong: #8d9288;
  --ui-text: #21241e;
  --ui-text-muted: #5b6157;
  --ui-text-subtle: #71766c;
  --ui-accent: #627453;
  --ui-accent-hover: #505f44;
  --ui-accent-press: #414d37;
  --ui-accent-fg: #ffffff;
  --ui-accent-soft: #f3f5f2;
  --ui-accent-border: #c0c8ba;
  --ui-accent-vivid: #8fa37e;
  --ui-accent-2: #817250;
  --ui-shadow-color: #1e221c;
}

[data-palette='sage'][data-mode='dark'] {
  --ui-bg: #0e0f0d;
  --ui-surface: #161714;
  --ui-surface-2: #1d1f1b;
  --ui-surface-3: #262924;
  --ui-border: #30332e;
  --ui-border-strong: #62695e;
  --ui-text: #f1f1f1;
  --ui-text-muted: #b2b5b0;
  --ui-text-subtle: #787e73;
  --ui-accent: #8fa37e;
  --ui-accent-hover: #a4b496;
  --ui-accent-press: #b6c3ab;
  --ui-accent-fg: #1e2419;
  --ui-accent-soft: #22261f;
  --ui-accent-border: #4e5845;
  --ui-accent-vivid: #8fa37e;
  --ui-accent-2: #b7a98b;
  --ui-shadow-color: #000000;
}

[data-palette='blush'] {
  --ui-bg: #fefefe;
  --ui-surface: #ffffff;
  --ui-surface-2: #f7f7f6;
  --ui-surface-3: #efeeee;
  --ui-border: #e8e6e6;
  --ui-border-strong: #988f8f;
  --ui-text: #241f1e;
  --ui-text-muted: #615857;
  --ui-text-subtle: #7a7270;
  --ui-accent: #b74936;
  --ui-accent-hover: #9b3e2e;
  --ui-accent-press: #843527;
  --ui-accent-fg: #ffffff;
  --ui-accent-soft: #f9f0ee;
  --ui-accent-border: #e2b6ae;
  --ui-accent-vivid: #d98c7f;
  --ui-accent-2: #8b6e62;
  --ui-shadow-color: #221c1c;
}

[data-palette='blush'][data-mode='dark'] {
  --ui-bg: #0f0d0d;
  --ui-surface: #171514;
  --ui-surface-2: #1f1c1b;
  --ui-surface-3: #292424;
  --ui-border: #332e2e;
  --ui-border-strong: #6f6464;
  --ui-text: #f1f1f1;
  --ui-text-muted: #b5b1b0;
  --ui-text-subtle: #837a78;
  --ui-accent: #d98c7f;
  --ui-accent-hover: #e2a89e;
  --ui-accent-press: #ebc1ba;
  --ui-accent-fg: #2c1511;
  --ui-accent-soft: #2e1a17;
  --ui-accent-border: #724841;
  --ui-accent-vivid: #d98c7f;
  --ui-accent-2: #9c7e72;
  --ui-shadow-color: #000000;
}

[data-palette='lavender'] {
  --ui-bg: #fefefe;
  --ui-surface: #ffffff;
  --ui-surface-2: #f7f6f7;
  --ui-surface-3: #eeeeef;
  --ui-border: #e6e6e8;
  --ui-border-strong: #909099;
  --ui-text: #201e24;
  --ui-text-muted: #5a5761;
  --ui-text-subtle: #76727d;
  --ui-accent: #7561ab;
  --ui-accent-hover: #645198;
  --ui-accent-press: #574684;
  --ui-accent-fg: #ffffff;
  --ui-accent-soft: #f2f1f6;
  --ui-accent-border: #c6bfdc;
  --ui-accent-vivid: #8b7ab8;
  --ui-accent-2: #5f6c7d;
  --ui-shadow-color: #1d1c22;
}

[data-palette='lavender'][data-mode='dark'] {
  --ui-bg: #0e0d0f;
  --ui-surface: #151417;
  --ui-surface-2: #1c1b1f;
  --ui-surface-3: #252429;
  --ui-border: #2f2e33;
  --ui-border-strong: #66646f;
  --ui-text: #f1f1f1;
  --ui-text-muted: #b1b0b5;
  --ui-text-subtle: #7e7b86;
  --ui-accent: #8e7eba;
  --ui-accent-hover: #a599c8;
  --ui-accent-press: #bab0d5;
  --ui-accent-fg: #1a1528;
  --ui-accent-soft: #201c29;
  --ui-accent-border: #4c4363;
  --ui-accent-vivid: #8b7ab8;
  --ui-accent-2: #758498;
  --ui-shadow-color: #000000;
}

[data-palette='wisteria'] {
  --ui-bg: #f5effb;
  --ui-surface: #ffffff;
  --ui-surface-2: #eee6f7;
  --ui-surface-3: #e6daf3;
  --ui-border: #deceef;
  --ui-border-strong: #9a8aac;
  --ui-text: #21192a;
  --ui-text-muted: #5c4c6c;
  --ui-text-subtle: #6a5b7a;
  --ui-accent: #7c4d7f;
  --ui-accent-hover: #664069;
  --ui-accent-press: #543456;
  --ui-accent-fg: #ffffff;
  --ui-accent-soft: #f6f1f6;
  --ui-accent-border: #cbb8cc;
  --ui-accent-vivid: #7c4d7f;
  --ui-accent-2: #3f2f46;
  --ui-shadow-color: #1f1528;
}

[data-palette='wisteria'][data-mode='dark'] {
  --ui-bg: #0e0319;
  --ui-surface: #160526;
  --ui-surface-2: #1d0932;
  --ui-surface-3: #260d3f;
  --ui-border: #30134e;
  --ui-border-strong: #6e5984;
  --ui-text: #f1f0f2;
  --ui-text-muted: #b3aabb;
  --ui-text-subtle: #8e7e9e;
  --ui-accent: #aa78ad;
  --ui-accent-hover: #ba91bc;
  --ui-accent-press: #c8a8ca;
  --ui-accent-fg: #251726;
  --ui-accent-soft: #271d27;
  --ui-accent-border: #5b415d;
  --ui-accent-vivid: #7c4d7f;
  --ui-accent-2: #967da5;
  --ui-shadow-color: #000000;
}

[data-palette='wisteria-light'] {
  --ui-bg: #fcfbfd;
  --ui-surface: #ffffff;
  --ui-surface-2: #f5f4f6;
  --ui-surface-3: #edebef;
  --ui-border: #e5e2e8;
  --ui-border-strong: #9a8aa9;
  --ui-text: #21192a;
  --ui-text-muted: #5c4c6c;
  --ui-text-subtle: #736384;
  --ui-accent: #7c4d7f;
  --ui-accent-hover: #664069;
  --ui-accent-press: #543456;
  --ui-accent-fg: #ffffff;
  --ui-accent-soft: #f6f1f6;
  --ui-accent-border: #cbb8cc;
  --ui-accent-vivid: #7c4d7f;
  --ui-accent-2: #3f2f46;
  --ui-shadow-color: #1f1528;
}

[data-palette='wisteria-light'][data-mode='dark'] {
  --ui-bg: #0e0c10;
  --ui-surface: #161219;
  --ui-surface-2: #1d1922;
  --ui-surface-3: #26212c;
  --ui-border: #302a37;
  --ui-border-strong: #725c89;
  --ui-text: #f1f0f2;
  --ui-text-muted: #b3aabb;
  --ui-text-subtle: #9485a4;
  --ui-accent: #aa78ad;
  --ui-accent-hover: #ba91bc;
  --ui-accent-press: #c8a8ca;
  --ui-accent-fg: #251726;
  --ui-accent-soft: #271d27;
  --ui-accent-border: #5b415d;
  --ui-accent-vivid: #7c4d7f;
  --ui-accent-2: #967ba4;
  --ui-shadow-color: #000000;
}

[data-palette='bronze'] {
  --ui-bg: #fefefe;
  --ui-surface: #ffffff;
  --ui-surface-2: #f7f7f6;
  --ui-surface-3: #efeeee;
  --ui-border: #e8e7e6;
  --ui-border-strong: #95908c;
  --ui-text: #24211e;
  --ui-text-muted: #615b57;
  --ui-text-subtle: #78736e;
  --ui-accent: #9c5f34;
  --ui-accent-hover: #814f2b;
  --ui-accent-press: #6a4123;
  --ui-accent-fg: #ffffff;
  --ui-accent-soft: #f8f3ef;
  --ui-accent-border: #d8bfae;
  --ui-accent-vivid: #b46e3c;
  --ui-accent-2: #797269;
  --ui-shadow-color: #221e1c;
}

[data-palette='bronze'][data-mode='dark'] {
  --ui-bg: #0f0e0d;
  --ui-surface: #171514;
  --ui-surface-2: #1f1d1b;
  --ui-surface-3: #292624;
  --ui-border: #33302e;
  --ui-border-strong: #6c6661;
  --ui-text: #f1f1f1;
  --ui-text-muted: #b5b2b0;
  --ui-text-subtle: #827b77;
  --ui-accent: #c27b48;
  --ui-accent-hover: #cc9167;
  --ui-accent-press: #d5a481;
  --ui-accent-fg: #2c1c11;
  --ui-accent-soft: #2d2118;
  --ui-accent-border: #69452b;
  --ui-accent-vivid: #b46e3c;
  --ui-accent-2: #8e877c;
  --ui-shadow-color: #000000;
}

[data-palette='terracotta'] {
  --ui-bg: #fefefe;
  --ui-surface: #ffffff;
  --ui-surface-2: #f7f7f6;
  --ui-surface-3: #efeeed;
  --ui-border: #e8e6e5;
  --ui-border-strong: #988f8a;
  --ui-text: #24201e;
  --ui-text-muted: #625956;
  --ui-text-subtle: #7c726f;
  --ui-accent: #aa5434;
  --ui-accent-hover: #8f462c;
  --ui-accent-press: #773b24;
  --ui-accent-fg: #ffffff;
  --ui-accent-soft: #f9f1ee;
  --ui-accent-border: #ddbaad;
  --ui-accent-vivid: #c4633f;
  --ui-accent-2: #5f6b52;
  --ui-shadow-color: #221d1b;
}

[data-palette='terracotta'][data-mode='dark'] {
  --ui-bg: #0f0d0d;
  --ui-surface: #181514;
  --ui-surface-2: #201c1b;
  --ui-surface-3: #292523;
  --ui-border: #342f2d;
  --ui-border-strong: #6f6460;
  --ui-text: #f1f1f1;
  --ui-text-muted: #b6b1af;
  --ui-text-subtle: #847a76;
  --ui-accent: #ca7252;
  --ui-accent-hover: #d48b71;
  --ui-accent-press: #dca28d;
  --ui-accent-fg: #2c1811;
  --ui-accent-soft: #2d1d17;
  --ui-accent-border: #6c3f2f;
  --ui-accent-vivid: #c4633f;
  --ui-accent-2: #7c8b6d;
  --ui-shadow-color: #000000;
}

[data-palette='ivory'] {
  --ui-bg: #fefefe;
  --ui-surface: #ffffff;
  --ui-surface-2: #f7f7f6;
  --ui-surface-3: #efefee;
  --ui-border: #e8e7e6;
  --ui-border-strong: #95908c;
  --ui-text: #24221e;
  --ui-text-muted: #615e57;
  --ui-text-subtle: #76746c;
  --ui-accent: #866c25;
  --ui-accent-hover: #6a551d;
  --ui-accent-press: #524217;
  --ui-accent-fg: #ffffff;
  --ui-accent-soft: #f9f6ee;
  --ui-accent-border: #d1c6a8;
  --ui-accent-vivid: #a0812c;
  --ui-accent-2: #827254;
  --ui-shadow-color: #22201c;
}

[data-palette='ivory'][data-mode='dark'] {
  --ui-bg: #0f0f0d;
  --ui-surface: #171614;
  --ui-surface-2: #1f1e1b;
  --ui-surface-3: #292724;
  --ui-border: #33322e;
  --ui-border-strong: #69675e;
  --ui-text: #f1f1f1;
  --ui-text-muted: #b5b4b0;
  --ui-text-subtle: #7f7c74;
  --ui-accent: #ae8d30;
  --ui-accent-hover: #caa53d;
  --ui-accent-press: #d1b259;
  --ui-accent-fg: #2c2511;
  --ui-accent-soft: #2e2817;
  --ui-accent-border: #615021;
  --ui-accent-vivid: #a0812c;
  --ui-accent-2: #a38a6f;
  --ui-shadow-color: #000000;
}

[data-palette='verdant'] {
  --ui-bg: #fefefe;
  --ui-surface: #ffffff;
  --ui-surface-2: #f6f7f7;
  --ui-surface-3: #edefef;
  --ui-border: #e5e8e8;
  --ui-border-strong: #859393;
  --ui-text: #1e2423;
  --ui-text-muted: #566260;
  --ui-text-subtle: #6b7674;
  --ui-accent: #1c6b5e;
  --ui-accent-hover: #228172;
  --ui-accent-press: #17574c;
  --ui-accent-fg: #ffffff;
  --ui-accent-soft: #eef9f7;
  --ui-accent-border: #a5c7c1;
  --ui-accent-vivid: #1c6b5e;
  --ui-accent-2: #ce441c;
  --ui-shadow-color: #1b2221;
}

[data-palette='verdant'][data-mode='dark'] {
  --ui-bg: #0d0f0f;
  --ui-surface: #141817;
  --ui-surface-2: #1b201f;
  --ui-surface-3: #232928;
  --ui-border: #2d3433;
  --ui-border-strong: #5b6a68;
  --ui-text: #f1f1f1;
  --ui-text-muted: #afb6b5;
  --ui-text-subtle: #727f7d;
  --ui-accent: #2ba490;
  --ui-accent-hover: #33c4ac;
  --ui-accent-press: #4cd0ba;
  --ui-accent-fg: #112c28;
  --ui-accent-soft: #162f2b;
  --ui-accent-border: #1e5e53;
  --ui-accent-vivid: #1c6b5e;
  --ui-accent-2: #e56c46;
  --ui-shadow-color: #000000;
}

[data-palette='indigo'] {
  --ui-bg: #fefefe;
  --ui-surface: #ffffff;
  --ui-surface-2: #f6f7f7;
  --ui-surface-3: #eeeeef;
  --ui-border: #e6e6e8;
  --ui-border-strong: #909099;
  --ui-text: #1e1f24;
  --ui-text-muted: #575861;
  --ui-text-subtle: #72737d;
  --ui-accent: #3949ab;
  --ui-accent-hover: #303e90;
  --ui-accent-press: #283479;
  --ui-accent-fg: #ffffff;
  --ui-accent-soft: #eff0f8;
  --ui-accent-border: #afb6dd;
  --ui-accent-vivid: #3949ab;
  --ui-accent-2: #a36600;
  --ui-shadow-color: #1c1c22;
}

[data-palette='indigo'][data-mode='dark'] {
  --ui-bg: #0d0d0f;
  --ui-surface: #141517;
  --ui-surface-2: #1b1c1f;
  --ui-surface-3: #242429;
  --ui-border: #2e2e33;
  --ui-border-strong: #656570;
  --ui-text: #f1f1f1;
  --ui-text-muted: #b0b1b5;
  --ui-text-subtle: #797c85;
  --ui-accent: #7380d0;
  --ui-accent-hover: #929cda;
  --ui-accent-press: #acb4e3;
  --ui-accent-fg: #11152c;
  --ui-accent-soft: #181b2d;
  --ui-accent-border: #3c436e;
  --ui-accent-vivid: #3949ab;
  --ui-accent-2: #ffa000;
  --ui-shadow-color: #000000;
}

[data-palette='graphite'] {
  --ui-bg: #fefefe;
  --ui-surface: #ffffff;
  --ui-surface-2: #f7f7f7;
  --ui-surface-3: #eeeeef;
  --ui-border: #e6e7e8;
  --ui-border-strong: #8d9196;
  --ui-text: #202123;
  --ui-text-muted: #595b5f;
  --ui-text-subtle: #717478;
  --ui-accent: #4a5568;
  --ui-accent-hover: #3b4453;
  --ui-accent-press: #2e3541;
  --ui-accent-fg: #ffffff;
  --ui-accent-soft: #f2f3f5;
  --ui-accent-border: #b7bcc4;
  --ui-accent-vivid: #4a5568;
  --ui-accent-2: #66758a;
  --ui-shadow-color: #1d1e20;
}

[data-palette='graphite'][data-mode='dark'] {
  --ui-bg: #0d0e0f;
  --ui-surface: #151517;
  --ui-surface-2: #1c1d1f;
  --ui-surface-3: #252628;
  --ui-border: #2f3032;
  --ui-border-strong: #63666a;
  --ui-text: #f1f1f1;
  --ui-text-muted: #b1b2b4;
  --ui-text-subtle: #7a7c81;
  --ui-accent: #7c8aa2;
  --ui-accent-hover: #949fb3;
  --ui-accent-press: #a9b2c2;
  --ui-accent-fg: #191d24;
  --ui-accent-soft: #1f2126;
  --ui-accent-border: #444b58;
  --ui-accent-vivid: #4a5568;
  --ui-accent-2: #78879d;
  --ui-shadow-color: #000000;
}

[data-palette='naval'] {
  --ui-bg: #f8f8f7;
  --ui-surface: #ffffff;
  --ui-surface-2: #f4f2ee;
  --ui-surface-3: #edeae4;
  --ui-border: #e7e3db;
  --ui-border-strong: #939088;
  --ui-text: #24221e;
  --ui-text-muted: #615d57;
  --ui-text-subtle: #737069;
  --ui-accent: #1b2a41;
  --ui-accent-hover: #233755;
  --ui-accent-press: #141e2f;
  --ui-accent-fg: #ffffff;
  --ui-accent-soft: #eff3f8;
  --ui-accent-border: #a5adb8;
  --ui-accent-vivid: #1b2a41;
  --ui-accent-2: #8c6c1e;
  --ui-shadow-color: #22201c;
}

[data-palette='naval'][data-mode='dark'] {
  --ui-bg: #120f0a;
  --ui-surface: #1c180f;
  --ui-surface-2: #252016;
  --ui-surface-3: #30291d;
  --ui-border: #3b3425;
  --ui-border-strong: #6c6861;
  --ui-text: #f1f1f1;
  --ui-text-muted: #b5b3b0;
  --ui-text-subtle: #807d75;
  --ui-accent: #688bc0;
  --ui-accent-hover: #85a1cc;
  --ui-accent-press: #9eb4d7;
  --ui-accent-fg: #121c2b;
  --ui-accent-soft: #1a212b;
  --ui-accent-border: #394b67;
  --ui-accent-vivid: #1b2a41;
  --ui-accent-2: #d6a93c;
  --ui-shadow-color: #000000;
}


/* ═══════════════════════════════════════════════════════════════════════
   COMPONENT LAYER

   Plain CSS driven entirely by the token contract. Deliberately not
   Tailwind utilities: a library that ships tokens + CSS imposes nothing on
   the consuming app, so this drops into a Next app, a Vite app or a plain
   page without dragging a build config behind it.

   No structure or palette name appears anywhere below this line.

   Inside @layer components so Tailwind utilities can still override a
   component class where a one-off needs it — unlayered CSS would outrank
   every utility and silently break things like `lg:hidden` on a .ui-btn.
   ═══════════════════════════════════════════════════════════════════════ */

@layer components {

/* ───────────────────────── Accessibility ─────────────────────────────── */

/* Present to a screen reader, absent to the eye. Every application needs
   this and none should have to write it, so it belongs to the system rather
   than to whoever remembers. Not `display: none`, which removes it from the
   accessibility tree as well. */
.ui-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ─────────────────────────── Button ──────────────────────────────────── */

.ui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ui-space-2);
  height: var(--ui-control-h-md);
  padding-inline: var(--ui-space-5);
  border: 1px solid transparent;
  border-radius: var(--ui-radius-md);
  font-family: var(--ui-font-body);
  font-size: var(--ui-text-base);
  font-weight: var(--ui-weight-strong);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  background: transparent;
  color: var(--ui-text);
  transition:
    background-color var(--ui-dur-fast) var(--ui-ease),
    border-color var(--ui-dur-fast) var(--ui-ease),
    color var(--ui-dur-fast) var(--ui-ease),
    transform var(--ui-dur-fast) var(--ui-ease),
    box-shadow var(--ui-dur-fast) var(--ui-ease);
}

.ui-btn:active:not(:disabled, [aria-disabled='true']) {
  transform: translateY(1px);
}

/* Disabled reads as unavailable at a glance, in every variant: a flat quiet
   fill, a plain hairline, subtle ink — no accent, no gradient, no shadow, no
   lift. Not half-opacity: a faded accent button still looks like an accent
   button, only a worse one. The ink is muted, not subtle: it clears 4.5:1
   on surface-2 in every palette (genpalettes checks it), because a disabled
   label still has to be read to know what is unavailable.

   A loading button is disabled too, but it is working, not unavailable, so
   it keeps its colours. */
.ui-btn.ui-btn:is(:disabled, [aria-disabled='true']):not([aria-busy='true']) {
  cursor: not-allowed;
  transform: none;
  background: var(--ui-surface-2);
  border-color: var(--ui-border);
  color: var(--ui-text-muted);
  box-shadow: none;
  filter: none;
}
.ui-btn.ui-btn:is(:disabled, [aria-disabled='true']):not([aria-busy='true']) svg {
  opacity: 0.6;
}
.ui-btn.ui-btn:is(.ui-btn--ghost, .ui-btn--link):is(:disabled, [aria-disabled='true']) {
  background: transparent;
  border-color: transparent;
}
.ui-btn[aria-busy='true'] {
  cursor: progress;
}

.ui-btn--sm {
  height: var(--ui-control-h-sm);
  padding-inline: var(--ui-space-3);
  font-size: var(--ui-text-sm);
}

.ui-btn--lg {
  height: var(--ui-control-h-lg);
  padding-inline: var(--ui-space-8);
  font-size: var(--ui-text-md);
}

.ui-btn--solid {
  background: var(--ui-accent);
  color: var(--ui-accent-fg);
  border-color: var(--ui-accent);
}
.ui-btn--solid:hover:not(:disabled) {
  background: var(--ui-accent-hover);
  border-color: var(--ui-accent-hover);
}

.ui-btn--soft {
  background: var(--ui-accent-soft);
  color: var(--ui-accent);
  border-color: transparent;
}
.ui-btn--soft:hover:not(:disabled) {
  border-color: var(--ui-accent-border);
}

.ui-btn--outline {
  background: transparent;
  color: var(--ui-accent);
  border-color: var(--ui-accent-border);
}
.ui-btn--outline:hover:not(:disabled) {
  background: var(--ui-accent-soft);
  border-color: var(--ui-accent);
}

.ui-btn--ghost {
  background: transparent;
  color: var(--ui-text-muted);
}
.ui-btn--ghost:hover:not(:disabled) {
  background: var(--ui-surface-2);
  color: var(--ui-text);
}

.ui-btn--link {
  background: transparent;
  color: var(--ui-accent);
  height: auto;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ui-btn--link:hover:not(:disabled) {
  color: var(--ui-accent-hover);
}
.ui-btn--link:active:not(:disabled) {
  transform: none;
}

/* Runs between the two AA-tuned accents, not the vivid one, so the label
   clears 4.5:1 at both ends of the gradient. The generator enforces that
   accent-fg passes against accent AND accent-2 for exactly this. */
.ui-btn--gradient {
  background: linear-gradient(100deg, var(--ui-accent), var(--ui-accent-2));
  color: var(--ui-accent-fg);
  border-color: transparent;
  box-shadow: var(--ui-shadow-sm);
}
.ui-btn--gradient:hover:not(:disabled) {
  box-shadow: var(--ui-shadow-md);
  filter: saturate(1.1);
}

.ui-btn--danger {
  background: var(--ui-danger);
  color: var(--ui-text-inverse);
  border-color: var(--ui-danger);
}
.ui-btn--danger:hover:not(:disabled) {
  filter: brightness(0.92);
}

.ui-btn--block {
  width: 100%;
}

.ui-btn__spinner {
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: ui-spin 0.7s linear infinite;
}

@keyframes ui-spin {
  to {
    transform: rotate(1turn);
  }
}

/* ─────────────────────────── Card ────────────────────────────────────── */

.ui-card {
  display: flex;
  flex-direction: column;
  background: var(--ui-surface);
  border-radius: var(--ui-radius-lg);
  overflow: hidden;
  transition:
    box-shadow var(--ui-dur-base) var(--ui-ease),
    transform var(--ui-dur-base) var(--ui-ease),
    border-color var(--ui-dur-base) var(--ui-ease);
}

.ui-card--elevated {
  box-shadow: var(--ui-shadow-md);
  border: 1px solid transparent;
}
.ui-card--elevated:hover {
  box-shadow: var(--ui-shadow-lg);
  transform: translateY(-2px);
}

.ui-card--outline {
  border: 1px solid var(--ui-border);
}
.ui-card--outline:hover {
  border-color: var(--ui-border-strong);
}

.ui-card--flat {
  background: var(--ui-surface-2);
  border: 1px solid transparent;
}

.ui-card--accent {
  border: 1px solid var(--ui-accent-border);
  background:
    linear-gradient(var(--ui-surface), var(--ui-surface)) padding-box,
    linear-gradient(135deg, var(--ui-accent-vivid), var(--ui-accent-2))
      border-box;
  border-color: transparent;
  position: relative;
}

.ui-card__media {
  aspect-ratio: 16 / 10;
  background:
    linear-gradient(135deg, var(--ui-accent-soft), var(--ui-surface-3));
  display: grid;
  place-items: center;
  color: var(--ui-accent);
  position: relative;
  overflow: hidden;
}

.ui-card__body {
  padding: var(--ui-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-2);
  flex: 1;
}

.ui-card__footer {
  padding: var(--ui-space-4) var(--ui-space-5);
  border-top: 1px solid var(--ui-border);
  display: flex;
  align-items: center;
  gap: var(--ui-space-3);
  background: var(--ui-surface);
}

.ui-card__title {
  font-family: var(--ui-font-display);
  font-size: var(--ui-text-lg);
  font-weight: var(--ui-weight-strong);
  line-height: var(--ui-leading-tight);
  color: var(--ui-text);
  margin: 0;
}

.ui-card__text {
  color: var(--ui-text-muted);
  font-size: var(--ui-text-sm);
  margin: 0;
}

/* Stat tile — the one card shape that legitimately leads with a number. */
.ui-stat {
  padding: var(--ui-space-5);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface);
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-1);
}
.ui-stat__label {
  font-size: var(--ui-text-xs);
  text-transform: uppercase;
  letter-spacing: var(--ui-tracking-label);
  color: var(--ui-text-subtle);
  font-weight: var(--ui-weight-medium);
}
.ui-stat__value {
  font-family: var(--ui-font-display);
  font-size: var(--ui-text-2xl);
  font-weight: var(--ui-weight-display);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--ui-text);
}
.ui-stat__delta {
  font-size: var(--ui-text-xs);
  font-weight: var(--ui-weight-medium);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ui-stat__delta[data-dir='up'] {
  color: var(--ui-success);
}
.ui-stat__delta[data-dir='down'] {
  color: var(--ui-danger);
}

/* ─────────────────────────── Fields ──────────────────────────────────── */

.ui-field {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-2);
}

.ui-label {
  font-size: var(--ui-text-sm);
  font-weight: var(--ui-weight-medium);
  color: var(--ui-text);
}

.ui-hint {
  font-size: var(--ui-text-xs);
  color: var(--ui-text-subtle);
}

.ui-error {
  font-size: var(--ui-text-xs);
  color: var(--ui-danger);
  font-weight: var(--ui-weight-medium);
}

.ui-input {
  width: 100%;
  height: var(--ui-control-h-md);
  padding-inline: var(--ui-space-3);
  background: var(--ui-surface);
  color: var(--ui-text);
  border: 1px solid var(--ui-border-strong);
  border-radius: var(--ui-radius-md);
  font-family: var(--ui-font-body);
  font-size: var(--ui-text-base);
  transition:
    border-color var(--ui-dur-fast) var(--ui-ease),
    box-shadow var(--ui-dur-fast) var(--ui-ease),
    background-color var(--ui-dur-fast) var(--ui-ease);
}

.ui-input::placeholder {
  color: var(--ui-text-subtle);
}

.ui-input:hover:not(:disabled) {
  border-color: var(--ui-text-subtle);
}

.ui-input:focus {
  outline: none;
  border-color: var(--ui-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-accent) 22%, transparent);
}

.ui-input:disabled {
  background: var(--ui-surface-2);
  color: var(--ui-text-subtle);
  cursor: not-allowed;
}

.ui-input[aria-invalid='true'] {
  border-color: var(--ui-danger);
}
.ui-input[aria-invalid='true']:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-danger) 22%, transparent);
}

textarea.ui-input {
  height: auto;
  min-height: calc(var(--ui-control-h-md) * 2.2);
  padding-block: var(--ui-space-2);
  resize: vertical;
  line-height: var(--ui-leading-body);
}

/* Underline variant — Material's field, and Atelier's editorial look. */
.ui-input--underline {
  border: 0;
  border-bottom: 1px solid var(--ui-border-strong);
  border-radius: 0;
  padding-inline: 0;
  background: transparent;
}
.ui-input--underline:focus {
  box-shadow: none;
  border-bottom-color: var(--ui-accent);
  border-bottom-width: 2px;
}

.ui-input--filled {
  background: var(--ui-surface-2);
  border-color: transparent;
}
.ui-input--filled:focus {
  background: var(--ui-surface);
}

.ui-input-group {
  position: relative;
  display: flex;
  align-items: center;
}
.ui-input-group > svg {
  position: absolute;
  left: var(--ui-space-3);
  width: 16px;
  height: 16px;
  color: var(--ui-text-subtle);
  pointer-events: none;
}
.ui-input-group > .ui-input {
  padding-left: calc(var(--ui-space-3) * 2 + 16px);
}

/* Switch */
.ui-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--ui-space-3);
  cursor: pointer;
  font-size: var(--ui-text-sm);
  color: var(--ui-text);
}
.ui-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.ui-switch__track {
  width: 40px;
  height: 22px;
  border-radius: 999px;
  background: var(--ui-border-strong);
  position: relative;
  transition: background-color var(--ui-dur-base) var(--ui-ease);
  flex: none;
}
.ui-switch__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.3);
  transition: transform var(--ui-dur-base) var(--ui-ease-spring);
}
.ui-switch input:checked + .ui-switch__track {
  background: var(--ui-accent);
}
.ui-switch input:checked + .ui-switch__track .ui-switch__thumb {
  transform: translateX(18px);
}
.ui-switch input:focus-visible + .ui-switch__track {
  outline: var(--ui-ring-width) solid var(--ui-ring);
  outline-offset: var(--ui-ring-offset);
}

/* Checkbox + radio */
/* A check and its words are one target, at least 24px tall on a touch screen
   (WCAG 2.5.8): an 18px box on a line of small text was 21px. */
.ui-check {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  gap: var(--ui-space-3);
  cursor: pointer;
  font-size: var(--ui-text-sm);
  color: var(--ui-text);
}
.ui-check input {
  appearance: none;
  width: 18px;
  height: 18px;
  border: 1px solid var(--ui-border-strong);
  border-radius: var(--ui-radius-sm);
  background: var(--ui-surface);
  display: grid;
  place-content: center;
  cursor: pointer;
  flex: none;
  transition:
    background-color var(--ui-dur-fast) var(--ui-ease),
    border-color var(--ui-dur-fast) var(--ui-ease);
}
.ui-check input[type='radio'] {
  border-radius: 50%;
}
.ui-check input::after {
  content: '';
  width: 10px;
  height: 10px;
  transform: scale(0);
  transition: transform var(--ui-dur-fast) var(--ui-ease-spring);
  background: var(--ui-accent-fg);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
.ui-check input[type='radio']::after {
  clip-path: none;
  border-radius: 50%;
  width: 8px;
  height: 8px;
}
.ui-check input:checked {
  background: var(--ui-accent);
  border-color: var(--ui-accent);
}
.ui-check input:checked::after {
  transform: scale(1);
}

/* ─────────────────────────── Badge ───────────────────────────────────── */

.ui-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px var(--ui-space-2);
  border-radius: var(--ui-radius-pill);
  font-size: var(--ui-text-xs);
  font-weight: var(--ui-weight-strong);
  line-height: 1.5;
  border: 1px solid transparent;
  white-space: nowrap;
}

.ui-badge--solid {
  background: var(--ui-accent);
  color: var(--ui-accent-fg);
}
.ui-badge--soft {
  background: var(--ui-accent-soft);
  color: var(--ui-accent);
}
.ui-badge--outline {
  border-color: var(--ui-border-strong);
  color: var(--ui-text-muted);
}
.ui-badge--dot::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.ui-badge[data-tone='success'] {
  background: var(--ui-success-soft);
  color: var(--ui-success);
}
.ui-badge[data-tone='warning'] {
  background: var(--ui-warning-soft);
  color: var(--ui-warning);
}
.ui-badge[data-tone='danger'] {
  background: var(--ui-danger-soft);
  color: var(--ui-danger);
}
.ui-badge[data-tone='info'] {
  background: var(--ui-info-soft);
  color: var(--ui-info);
}
.ui-badge[data-tone='neutral'] {
  background: var(--ui-surface-3);
  color: var(--ui-text-muted);
}

/* ─────────────────────────── Table ───────────────────────────────────── */

.ui-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface);
}

.ui-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ui-text-sm);
  min-width: 560px;
}

.ui-table th,
.ui-table td {
  padding: var(--ui-space-3) var(--ui-space-4);
  text-align: left;
  border-bottom: 1px solid var(--ui-border);
}

.ui-table thead th {
  font-size: var(--ui-text-xs);
  text-transform: uppercase;
  letter-spacing: var(--ui-tracking-label);
  color: var(--ui-text-subtle);
  font-weight: var(--ui-weight-strong);
  background: var(--ui-surface-2);
  white-space: nowrap;
  position: sticky;
  top: 0;
}

.ui-table tbody tr:last-child td {
  border-bottom: 0;
}

.ui-table tbody tr {
  transition: background-color var(--ui-dur-fast) var(--ui-ease);
}
.ui-table tbody tr:hover {
  background: var(--ui-surface-2);
}

.ui-table--striped tbody tr:nth-child(even) {
  background: var(--ui-surface-2);
}
.ui-table--striped tbody tr:hover {
  background: var(--ui-surface-3);
}

.ui-table--compact th,
.ui-table--compact td {
  padding: var(--ui-space-2) var(--ui-space-3);
}

.ui-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-family: var(--ui-font-mono);
}

.ui-table__sort {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ui-table__sort:hover {
  color: var(--ui-text);
}

/* ─────────────────────────── Modal ───────────────────────────────────── */

.ui-scrim {
  position: fixed;
  inset: 0;
  background: rgb(0 0 0 / 0.5);
  backdrop-filter: blur(2px);
  z-index: 60;
  display: grid;
  place-items: center;
  padding: var(--ui-space-4);
}

.ui-modal {
  background: var(--ui-surface);
  border-radius: var(--ui-radius-lg);
  box-shadow: var(--ui-shadow-lg);
  width: min(560px, 100%);
  max-height: 85vh;
  overflow: auto;
  border: 1px solid var(--ui-border);
}

.ui-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ui-space-4);
  padding: var(--ui-space-5);
  border-bottom: 1px solid var(--ui-border);
}

.ui-modal__body {
  padding: var(--ui-space-5);
  color: var(--ui-text-muted);
  font-size: var(--ui-text-sm);
}

.ui-modal__foot {
  padding: var(--ui-space-4) var(--ui-space-5);
  border-top: 1px solid var(--ui-border);
  display: flex;
  justify-content: flex-end;
  gap: var(--ui-space-3);
  background: var(--ui-surface-2);
}

.ui-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(400px, 100%);
  background: var(--ui-surface);
  border-left: 1px solid var(--ui-border);
  box-shadow: var(--ui-shadow-lg);
  z-index: 61;
  display: flex;
  flex-direction: column;
}

/* ─────────────────────────── Tabs ────────────────────────────────────── */

.ui-tabs {
  display: flex;
  gap: var(--ui-space-1);
}

.ui-tab {
  appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: var(--ui-text-sm);
  font-weight: var(--ui-weight-medium);
  color: var(--ui-text-muted);
  padding: var(--ui-space-2) var(--ui-space-4);
  cursor: pointer;
  border-radius: var(--ui-radius-md);
  transition: all var(--ui-dur-fast) var(--ui-ease);
  white-space: nowrap;
}
.ui-tab:hover {
  color: var(--ui-text);
}

.ui-tabs--underline {
  border-bottom: 1px solid var(--ui-border);
  gap: var(--ui-space-4);
}
.ui-tabs--underline .ui-tab {
  border-radius: 0;
  padding-inline: 0;
  padding-bottom: var(--ui-space-3);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.ui-tabs--underline .ui-tab[aria-selected='true'] {
  color: var(--ui-accent);
  border-bottom-color: var(--ui-accent);
}

.ui-tabs--pill .ui-tab[aria-selected='true'] {
  background: var(--ui-accent-soft);
  color: var(--ui-accent);
}

.ui-tabs--segmented {
  background: var(--ui-surface-2);
  padding: 3px;
  border-radius: var(--ui-radius-md);
  border: 1px solid var(--ui-border);
  display: inline-flex;
}
.ui-tabs--segmented .ui-tab[aria-selected='true'] {
  background: var(--ui-surface);
  color: var(--ui-text);
  box-shadow: var(--ui-shadow-sm);
}

/* ─────────────────────────── Accordion ───────────────────────────────── */

.ui-acc {
  display: flex;
  flex-direction: column;
}

.ui-acc__item {
  border-bottom: 1px solid var(--ui-border);
}

.ui-acc--separated {
  gap: var(--ui-space-3);
}
.ui-acc--separated .ui-acc__item {
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-md);
  overflow: hidden;
  background: var(--ui-surface);
}

.ui-acc--boxed {
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-md);
  overflow: hidden;
}
.ui-acc--boxed .ui-acc__item:last-child {
  border-bottom: 0;
}

.ui-acc__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-space-4);
  padding: var(--ui-space-4);
  background: transparent;
  border: 0;
  font: inherit;
  font-weight: var(--ui-weight-strong);
  font-size: var(--ui-text-base);
  color: var(--ui-text);
  cursor: pointer;
  text-align: left;
  transition: background-color var(--ui-dur-fast) var(--ui-ease);
}
.ui-acc__trigger:hover {
  background: var(--ui-surface-2);
}
.ui-acc__trigger svg {
  flex: none;
  transition: transform var(--ui-dur-base) var(--ui-ease);
  color: var(--ui-text-subtle);
}
.ui-acc__trigger[aria-expanded='true'] svg {
  transform: rotate(180deg);
}

.ui-acc__panel {
  padding: 0 var(--ui-space-4) var(--ui-space-4);
  color: var(--ui-text-muted);
  font-size: var(--ui-text-sm);
}

/* ─────────────────────────── Toast ───────────────────────────────────── */

.ui-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--ui-space-3);
  padding: var(--ui-space-3) var(--ui-space-4);
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-left: 3px solid var(--ui-accent);
  border-radius: var(--ui-radius-md);
  box-shadow: var(--ui-shadow-md);
  min-width: 280px;
  max-width: 380px;
}
.ui-toast[data-tone='success'] {
  border-left-color: var(--ui-success);
}
.ui-toast[data-tone='warning'] {
  border-left-color: var(--ui-warning);
}
.ui-toast[data-tone='danger'] {
  border-left-color: var(--ui-danger);
}
.ui-toast[data-tone='info'] {
  border-left-color: var(--ui-info);
}
.ui-toast__icon {
  flex: none;
  margin-top: 2px;
}
.ui-toast[data-tone='success'] .ui-toast__icon {
  color: var(--ui-success);
}
.ui-toast[data-tone='warning'] .ui-toast__icon {
  color: var(--ui-warning);
}
.ui-toast[data-tone='danger'] .ui-toast__icon {
  color: var(--ui-danger);
}
.ui-toast[data-tone='info'] .ui-toast__icon {
  color: var(--ui-info);
}
.ui-toast__title {
  font-weight: var(--ui-weight-strong);
  font-size: var(--ui-text-sm);
  color: var(--ui-text);
}
.ui-toast__text {
  font-size: var(--ui-text-xs);
  color: var(--ui-text-muted);
}

/* ─────────────────────────── Avatar ──────────────────────────────────── */

.ui-avatar {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--ui-radius-pill);
  background: var(--ui-accent-soft);
  color: var(--ui-accent);
  font-weight: var(--ui-weight-strong);
  font-size: var(--ui-text-sm);
  font-family: var(--ui-font-display);
  flex: none;
  position: relative;
  overflow: visible;
  user-select: none;
}
.ui-avatar--sm {
  width: 28px;
  height: 28px;
  font-size: var(--ui-text-xs);
}
.ui-avatar--lg {
  width: 56px;
  height: 56px;
  font-size: var(--ui-text-md);
}
.ui-avatar--square {
  border-radius: var(--ui-radius-md);
}
.ui-avatar__status {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid var(--ui-surface);
}
.ui-avatar__status[data-state='online'] {
  background: var(--ui-success);
}
.ui-avatar__status[data-state='busy'] {
  background: var(--ui-danger);
}
.ui-avatar__status[data-state='away'] {
  background: var(--ui-warning);
}

.ui-avatar-group {
  display: inline-flex;
}
.ui-avatar-group .ui-avatar {
  border: 2px solid var(--ui-surface);
  margin-left: -10px;
}
.ui-avatar-group .ui-avatar:first-child {
  margin-left: 0;
}

/* ─────────────────────────── Progress ────────────────────────────────── */

.ui-progress {
  height: 8px;
  background: var(--ui-surface-3);
  border-radius: var(--ui-radius-pill);
  overflow: hidden;
}
.ui-progress__bar {
  height: 100%;
  background: var(--ui-accent);
  border-radius: inherit;
  transition: width var(--ui-dur-slow) var(--ui-ease);
}
.ui-progress--gradient .ui-progress__bar {
  background: linear-gradient(
    90deg,
    var(--ui-accent-vivid),
    var(--ui-accent-2)
  );
}
.ui-progress--thin {
  height: 4px;
}

/* The only reason this class exists is that a step is two grid children —
   the dot and its label — and they must stay siblings of the row, not of a
   wrapper. `display: contents` was a Tailwind utility here; the component
   layer cannot depend on one, because a consumer has no Tailwind. */
.ui-steps__group {
  display: contents;
}

.ui-steps {
  display: flex;
  align-items: center;
  gap: var(--ui-space-2);
}
.ui-steps__dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: var(--ui-text-xs);
  font-weight: var(--ui-weight-strong);
  background: var(--ui-surface-3);
  color: var(--ui-text-subtle);
  flex: none;
  border: 1px solid transparent;
}
.ui-steps__dot[data-state='done'] {
  background: var(--ui-accent);
  color: var(--ui-accent-fg);
}
.ui-steps__dot[data-state='current'] {
  background: var(--ui-accent-soft);
  color: var(--ui-accent);
  border-color: var(--ui-accent);
}
.ui-steps__line {
  height: 2px;
  flex: 1;
  background: var(--ui-surface-3);
  min-width: 16px;
}

/* Numbered dots are enough for a back office, where the steps are known and
   the row is a reminder. They are not enough for a customer, who is reading
   the step names for the first time and is often on a 390px screen. The
   labelled variant gives each step its name under its dot and wraps rather
   than shrinking, because a truncated stage name tells her nothing. */
.ui-steps--labelled {
  flex-wrap: wrap;
  gap: var(--ui-space-4) var(--ui-space-3);
  padding: 0;
  margin: 0;
  list-style: none;
}

.ui-steps--labelled .ui-steps__group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ui-space-2);
  min-width: 0;
}

.ui-steps__label {
  font-size: var(--ui-text-xs);
  line-height: var(--ui-leading-snug);
  color: var(--ui-text-muted);
  text-align: center;
}

.ui-steps__group:has(.ui-steps__dot[data-state='current']) .ui-steps__label {
  color: var(--ui-text);
  font-weight: var(--ui-weight-strong);
}
.ui-steps__line[data-state='done'] {
  background: var(--ui-accent);
}

/* ─────────────────────────── Nav ─────────────────────────────────────── */

.ui-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-space-6);
  padding: var(--ui-space-3) var(--ui-space-5);
  background: var(--ui-surface);
  border-bottom: 1px solid var(--ui-border);
}

.ui-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--ui-space-2);
  font-family: var(--ui-font-display);
  font-weight: var(--ui-weight-display);
  font-size: var(--ui-text-md);
  letter-spacing: var(--ui-tracking-display);
  color: var(--ui-text);
}
.ui-brand__mark {
  width: 26px;
  height: 26px;
  border-radius: var(--ui-radius-sm);
  background: linear-gradient(
    135deg,
    var(--ui-accent-vivid),
    var(--ui-accent-2)
  );
  display: grid;
  place-items: center;
  color: #fff;
  flex: none;
}

.ui-navlinks {
  display: flex;
  align-items: center;
  gap: var(--ui-space-1);
}
.ui-navlink {
  padding: var(--ui-space-2) var(--ui-space-3);
  border-radius: var(--ui-radius-md);
  font-size: var(--ui-text-sm);
  font-weight: var(--ui-weight-medium);
  color: var(--ui-text-muted);
  text-decoration: none;
  cursor: pointer;
  transition: all var(--ui-dur-fast) var(--ui-ease);
}
.ui-navlink:hover {
  color: var(--ui-text);
  background: var(--ui-surface-2);
}
.ui-navlink[aria-current='page'] {
  color: var(--ui-accent);
  background: var(--ui-accent-soft);
}

.ui-sidebar {
  width: 220px;
  background: var(--ui-surface);
  border-right: 1px solid var(--ui-border);
  padding: var(--ui-space-4) var(--ui-space-3);
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-1);
  flex: none;
}
.ui-sidebar__section {
  font-size: var(--ui-text-xs);
  text-transform: uppercase;
  letter-spacing: var(--ui-tracking-label);
  color: var(--ui-text-subtle);
  padding: var(--ui-space-3) var(--ui-space-3) var(--ui-space-1);
  font-weight: var(--ui-weight-strong);
}
.ui-sideitem {
  display: flex;
  align-items: center;
  gap: var(--ui-space-3);
  padding: var(--ui-space-2) var(--ui-space-3);
  border-radius: var(--ui-radius-md);
  font-size: var(--ui-text-sm);
  color: var(--ui-text-muted);
  cursor: pointer;
  border: 0;
  background: transparent;
  width: 100%;
  text-align: left;
  font-family: inherit;
  transition: all var(--ui-dur-fast) var(--ui-ease);
}
.ui-sideitem:hover {
  background: var(--ui-surface-2);
  color: var(--ui-text);
}
.ui-sideitem[aria-current='page'] {
  background: var(--ui-accent-soft);
  color: var(--ui-accent);
  font-weight: var(--ui-weight-strong);
}
.ui-sideitem svg {
  flex: none;
}

/* ─────────────────────────── Utility ─────────────────────────────────── */

.ui-divider {
  height: 1px;
  background: var(--ui-border);
  border: 0;
  margin: 0;
}

.ui-eyebrow {
  font-size: var(--ui-text-xs);
  text-transform: uppercase;
  letter-spacing: var(--ui-tracking-label);
  font-weight: var(--ui-weight-strong);
  color: var(--ui-accent);
}

.ui-prose {
  color: var(--ui-text-muted);
  font-size: var(--ui-text-base);
  line-height: var(--ui-leading-body);
  max-width: 62ch;
}

/* The shape of what is coming. It pulses by opacity alone, which the
   compositor does without repainting; the old sweep moved a background and
   repainted every frame. Held still under reduced motion (tokens.css). */
.ui-skeleton {
  display: block;
  background: var(--ui-surface-3);
  border-radius: var(--ui-radius-sm);
  animation: ui-pulse 1.6s var(--ui-ease) infinite alternate;
}
.ui-skeleton[data-radius='md'] {
  border-radius: var(--ui-radius-md);
}
.ui-skeleton[data-radius='lg'] {
  border-radius: var(--ui-radius-lg);
}
.ui-skeleton[data-radius='pill'] {
  border-radius: var(--ui-radius-pill);
}

@keyframes ui-pulse {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.45;
  }
}

/* ═══ D1 · date picker ═════════════════════════════════════════════════════
   Native dates are `.ui-input[type=date]`: the field is ours, the calendar is
   the operating system's. The drawn calendar below is for the two dates whose
   choice depends on what only the product knows. */

.ui-input[type='date'] {
  font-variant-numeric: tabular-nums;
}

.ui-datepicker {
  position: relative;
}

.ui-datepicker__control {
  position: relative;
  display: flex;
  align-items: center;
}

.ui-datepicker__input {
  padding-right: calc(var(--ui-control-h-md) + var(--ui-space-1));
  font-variant-numeric: tabular-nums;
}

/* RULING 3: a closed day warns, in the warning weight, and still takes. */
.ui-datepicker__control[data-closed] .ui-datepicker__input {
  border-color: var(--ui-warning-border);
}

.ui-datepicker__trigger {
  position: absolute;
  right: 0;
  width: var(--ui-control-h-md);
  height: var(--ui-control-h-md);
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--ui-accent);
  cursor: pointer;
  border-radius: var(--ui-radius-md);
}
.ui-datepicker__trigger svg {
  width: 18px;
  height: 18px;
}
.ui-datepicker__trigger:disabled {
  color: var(--ui-text-subtle);
  cursor: not-allowed;
}

.ui-datepicker__line:empty {
  display: none;
}

.ui-datepicker__warn {
  font-size: var(--ui-text-xs);
  font-weight: var(--ui-weight-medium);
  color: var(--ui-warning);
}

.ui-datepicker__clear {
  align-self: flex-start;
}

.ui-datepicker__scrim {
  display: none;
}

/* A popover from 768px. */
.ui-datepicker__panel {
  position: absolute;
  top: calc(100% + var(--ui-space-1));
  left: 0;
  z-index: 50;
  width: min(360px, 100vw - 2 * var(--ui-space-4));
  display: grid;
  gap: var(--ui-space-3);
  padding: var(--ui-space-3);
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-lg);
  box-shadow: var(--ui-shadow-lg);
  animation: ui-datepicker-in var(--ui-dur-base) var(--ui-ease);
}

/* A bottom sheet below it: a popover over a 390 viewport covers its own field. */
@media (max-width: 767px) {
  .ui-datepicker__scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 59;
    background: rgb(0 0 0 / 0.4);
  }
  .ui-datepicker__panel {
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    width: 100%;
    border-radius: var(--ui-radius-lg) var(--ui-radius-lg) 0 0;
    padding: var(--ui-space-4) var(--ui-space-4) calc(var(--ui-space-4) + env(safe-area-inset-bottom));
    animation-name: ui-datepicker-sheet;
  }
}

@keyframes ui-datepicker-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}
@keyframes ui-datepicker-sheet {
  from {
    transform: translateY(100%);
  }
}

.ui-datepicker__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-space-2);
}

.ui-datepicker__title {
  font-size: var(--ui-text-md);
  font-weight: var(--ui-weight-strong);
  font-family: var(--ui-font-display);
}

.ui-datepicker__nav {
  width: max(44px, var(--ui-control-h-md));
  height: max(44px, var(--ui-control-h-md));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ui-border-strong);
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface);
  color: var(--ui-text);
  cursor: pointer;
}
.ui-datepicker__nav svg {
  width: 18px;
  height: 18px;
}
.ui-datepicker__nav:disabled {
  border-color: var(--ui-border);
  color: var(--ui-text-subtle);
  cursor: not-allowed;
}

.ui-datepicker__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
}

.ui-datepicker__dow {
  text-align: center;
  font-size: var(--ui-text-xs);
  font-weight: var(--ui-weight-strong);
  letter-spacing: var(--ui-tracking-label);
  text-transform: uppercase;
  color: var(--ui-text-muted);
  padding-bottom: var(--ui-space-1);
}

/* Day cells are 44 × 44 at 390: a month grid at 32px is a mis-tap per week. */
.ui-datepicker__day {
  min-height: max(44px, var(--ui-control-h-md));
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--ui-radius-md);
  background: transparent;
  color: var(--ui-text);
  font: inherit;
  font-size: var(--ui-text-sm);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.ui-datepicker__day:hover:not([aria-disabled='true']) {
  background: var(--ui-surface-2);
}
.ui-datepicker__day:focus-visible {
  outline: var(--ui-ring-width) solid var(--ui-ring);
  outline-offset: 2px;
}
.ui-datepicker__day[data-state='outside'] {
  color: var(--ui-text-subtle);
  cursor: default;
}
/* The refused day has NO fill: a struck, subtle numeral. */
.ui-datepicker__day[data-state='refused'],
.ui-datepicker__key[data-state='refused'] {
  color: var(--ui-text-subtle);
  text-decoration: line-through;
  cursor: not-allowed;
}
.ui-datepicker__day[data-closed],
.ui-datepicker__key[data-closed] {
  background: var(--ui-warning-soft);
  color: var(--ui-warning);
}
.ui-datepicker__day[data-marked],
.ui-datepicker__key[data-marked] {
  background: var(--ui-accent-soft);
  border-color: var(--ui-accent-border);
  font-weight: var(--ui-weight-strong);
}
/* RULING 4: today is ringed, and it is not the selection. */
.ui-datepicker__day[data-today] {
  border-color: var(--ui-border-strong);
  font-weight: var(--ui-weight-strong);
}
.ui-datepicker__day[data-selected] {
  background: var(--ui-accent);
  border-color: var(--ui-accent);
  color: var(--ui-accent-fg);
  font-weight: var(--ui-weight-strong);
}

.ui-datepicker__legend {
  list-style: none;
  margin: 0;
  padding: var(--ui-space-2) 0 0;
  border-top: 1px solid var(--ui-border);
  display: grid;
  gap: var(--ui-space-1);
  font-size: var(--ui-text-xs);
  color: var(--ui-text-muted);
}
.ui-datepicker__legend:empty {
  display: none;
}
.ui-datepicker__legend li {
  display: flex;
  align-items: center;
  gap: var(--ui-space-2);
}
.ui-datepicker__key {
  width: 22px;
  height: 22px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--ui-radius-sm);
  font-size: var(--ui-text-xs);
}

/* ═══ D2 · file upload ═════════════════════════════════════════════════════ */

.ui-upload__refused {
  list-style: none;
  margin: 0;
  padding: var(--ui-space-2) var(--ui-space-3);
  border: 1px solid var(--ui-danger-border);
  background: var(--ui-danger-soft);
  border-radius: var(--ui-radius-md);
  color: var(--ui-danger);
  font-size: var(--ui-text-xs);
  display: grid;
  gap: var(--ui-space-1);
}
.ui-upload__refused-name {
  font-weight: var(--ui-weight-strong);
}

.ui-upload__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--ui-space-3);
}
.ui-upload__grid:empty {
  display: none;
}

.ui-upload__slot {
  display: grid;
  gap: var(--ui-space-2);
  align-content: start;
  padding: var(--ui-space-2);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface);
}
.ui-upload__slot[data-status='failed_start'],
.ui-upload__slot[data-status='failed_send'] {
  border-color: var(--ui-danger-border);
  background: var(--ui-danger-soft);
}

.ui-upload__thumb,
.ui-upload__placeholder {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--ui-radius-sm);
}
/* The warm placeholder: a record with no URL is saved, not broken. */
.ui-upload__placeholder {
  display: flex;
  align-items: flex-end;
  padding: var(--ui-space-2);
  background: var(--ui-surface-2);
  color: var(--ui-text-muted);
  font-size: var(--ui-text-xs);
}

.ui-upload__status {
  display: flex;
  align-items: center;
  gap: var(--ui-space-1);
  font-size: var(--ui-text-xs);
  color: var(--ui-text-muted);
  font-variant-numeric: tabular-nums;
}
.ui-upload__status svg {
  width: 14px;
  height: 14px;
  color: var(--ui-success);
}
.ui-upload__slot[data-status^='failed'] .ui-upload__status {
  color: var(--ui-danger);
  font-weight: var(--ui-weight-medium);
}

.ui-upload__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ui-space-1);
}
.ui-upload__actions:empty {
  display: none;
}
.ui-upload__actions svg,
.ui-upload__add svg {
  width: 16px;
  height: 16px;
}
.ui-upload__add {
  align-self: flex-start;
}

/* ═══ D3 · select ══════════════════════════════════════════════════════════ */

.ui-select {
  position: relative;
  display: flex;
  align-items: center;
}
.ui-select__native {
  appearance: none;
  padding-right: calc(var(--ui-space-3) * 2 + 16px);
  cursor: pointer;
}
.ui-select__native:invalid,
.ui-select__native:has(option[value='']:checked) {
  color: var(--ui-text-subtle);
}
.ui-select__caret {
  position: absolute;
  right: var(--ui-space-3);
  width: 16px;
  height: 16px;
  color: var(--ui-text-muted);
  pointer-events: none;
}

.ui-listbox {
  position: relative;
}
.ui-listbox__field {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--ui-space-2);
  text-align: left;
  padding-right: calc(var(--ui-space-3) * 2 + 16px);
  cursor: pointer;
}
.ui-listbox__field[data-placeholder] .ui-listbox__value {
  color: var(--ui-text-subtle);
}
.ui-listbox__field[data-struck] .ui-listbox__value,
.ui-listbox__option[data-struck] .ui-listbox__label,
.ui-listbox__chip[data-struck] span {
  text-decoration: line-through;
  color: var(--ui-text-subtle);
}
.ui-listbox__value {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ui-listbox__amount {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.ui-listbox__panel {
  position: absolute;
  top: calc(100% + var(--ui-space-1));
  left: 0;
  right: 0;
  z-index: 50;
  display: grid;
  gap: var(--ui-space-2);
  padding: var(--ui-space-2);
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-lg);
  box-shadow: var(--ui-shadow-lg);
}
.ui-listbox__search {
  position: relative;
  display: flex;
  align-items: center;
}
.ui-listbox__search svg {
  position: absolute;
  left: var(--ui-space-3);
  width: 16px;
  height: 16px;
  color: var(--ui-text-subtle);
}
.ui-listbox__search .ui-input {
  padding-left: calc(var(--ui-space-3) * 2 + 16px);
}

.ui-listbox__list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: min(320px, 50vh);
  overflow: auto;
  outline: none;
}
.ui-listbox__option,
.ui-listbox__empty {
  min-height: max(44px, var(--ui-control-h-md));
  display: flex;
  align-items: center;
  gap: var(--ui-space-3);
  padding: var(--ui-space-2) var(--ui-space-3);
  border-radius: var(--ui-radius-md);
}
.ui-listbox__option {
  cursor: pointer;
}
.ui-listbox__option[data-active] {
  background: var(--ui-surface-2);
}
.ui-listbox__option[aria-selected='true'] {
  background: var(--ui-accent-soft);
}
.ui-listbox__option[aria-disabled='true'] {
  cursor: not-allowed;
}
.ui-listbox__empty {
  color: var(--ui-text-muted);
  font-size: var(--ui-text-sm);
}
.ui-listbox__lines {
  flex: 1;
  min-width: 0;
  display: grid;
}
.ui-listbox__secondary {
  font-size: var(--ui-text-xs);
  color: var(--ui-text-muted);
}

.ui-listbox__chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--ui-space-2);
}
.ui-listbox__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--ui-space-1);
  padding: 0 0 0 var(--ui-space-3);
  min-height: 36px;
  border: 1px solid var(--ui-accent-border);
  background: var(--ui-accent-soft);
  border-radius: var(--ui-radius-pill);
  font-size: var(--ui-text-sm);
  font-variant-numeric: tabular-nums;
}
.ui-listbox__chip button {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--ui-text-muted);
  border-radius: var(--ui-radius-pill);
  cursor: pointer;
}
.ui-listbox__chip button svg {
  width: 14px;
  height: 14px;
}

/* ═══ 0.6 · feedback, dialogs and states ═════════════════════════════════
   The states a real screen needs and a catalogue forgets: a message about the
   page, an empty list, the shape of a loading one, a field that is wrong, and
   an edit that happens over the page instead of down it. All CSS; the one
   component with behaviour (Dialog) leans on the platform's <dialog>.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────── Alert ───────────────────────────────────── */

/* Tone drives three things only: the icon and title ink, the ground, and the
   edge. The body stays in the page's own ink, so a long message reads as
   text, not as a coloured block. Tone ink on its own soft ground clears
   4.5:1 in every palette — genpalettes enforces it. */
.ui-alert {
  --_tone: var(--ui-info);
  --_ground: var(--ui-info-soft);
  --_edge: var(--ui-info-border);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--ui-space-3);
  padding: var(--ui-space-4);
  border: 1px solid color-mix(in srgb, var(--_edge) 32%, transparent);
  border-radius: var(--ui-radius-md);
  background: var(--_ground);
  color: var(--ui-text);
  font-size: var(--ui-text-sm);
  line-height: var(--ui-leading-snug);
}
.ui-alert[data-tone='success'] {
  --_tone: var(--ui-success);
  --_ground: var(--ui-success-soft);
  --_edge: var(--ui-success-border);
}
.ui-alert[data-tone='warning'] {
  --_tone: var(--ui-warning);
  --_ground: var(--ui-warning-soft);
  --_edge: var(--ui-warning-border);
}
.ui-alert[data-tone='danger'] {
  --_tone: var(--ui-danger);
  --_ground: var(--ui-danger-soft);
  --_edge: var(--ui-danger-border);
}
.ui-alert__icon {
  flex: none;
  color: var(--_tone);
  margin-top: 0.05em;
}
.ui-alert__body {
  min-width: 0;
}
.ui-alert__title {
  margin: 0;
  color: var(--_tone);
  font-weight: var(--ui-weight-strong);
}
.ui-alert__title + .ui-alert__text {
  margin-top: var(--ui-space-1);
}
.ui-alert__text > :where(p) {
  margin: 0;
}
.ui-alert__text > :where(p + p) {
  margin-top: var(--ui-space-2);
}
.ui-alert__action {
  align-self: center;
}
.ui-alert:not(:has(.ui-alert__action)) {
  grid-template-columns: auto minmax(0, 1fr);
}
/* One line beside the thing it explains — the reason a button is disabled. */
.ui-alert--compact {
  gap: var(--ui-space-2);
  padding: var(--ui-space-2) var(--ui-space-3);
  border-radius: var(--ui-radius-sm);
}
.ui-alert--compact .ui-alert__icon {
  margin-top: 0.1em;
}

/* ─────────────────────────── Field error ─────────────────────────────── */

/* A wrong field says so three ways, never by colour alone: the edge, a
   faint ground, and a message that starts with a mark. The mark is a CSS
   mask, so it costs no markup and no JavaScript. Lists (several problems at
   once) keep their bullets. */
.ui-error:not(ul, ol) {
  display: flex;
  align-items: flex-start;
  gap: var(--ui-space-1);
}
.ui-error:not(ul, ol)::before {
  content: '';
  flex: none;
  width: 1.15em;
  height: 1.15em;
  margin-top: 0.08em;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4M12 16h.01'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
.ui-input[aria-invalid='true'] {
  background: color-mix(in srgb, var(--ui-danger-soft) 55%, var(--ui-surface));
}

/* ─────────────────────────── Empty state ─────────────────────────────── */

.ui-empty {
  display: grid;
  justify-items: center;
  gap: var(--ui-space-3);
  padding: var(--ui-space-10) var(--ui-space-6);
  text-align: center;
}
.ui-empty__mark {
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  margin-bottom: var(--ui-space-1);
  border-radius: var(--ui-radius-pill);
  background: var(--ui-accent-soft);
  color: var(--ui-accent);
}
.ui-empty__title {
  margin: 0;
  font-family: var(--ui-font-display);
  font-size: var(--ui-text-xl);
  font-weight: var(--ui-weight-display);
  line-height: var(--ui-leading-tight);
  letter-spacing: var(--ui-tracking-display);
  color: var(--ui-text);
}
.ui-empty__text {
  max-width: 38ch;
  color: var(--ui-text-muted);
  font-size: var(--ui-text-base);
  line-height: var(--ui-leading-body);
}
.ui-empty__text > :where(p) {
  margin: 0;
}
.ui-empty__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ui-space-3);
  margin-top: var(--ui-space-3);
}

/* ─────────────────────────── Dialog ──────────────────────────────────── */

/* The page behind an open dialog does not scroll, and does not jump when its
   scrollbar goes: the gutter is kept. */
:root:has(.ui-dialog[open]) {
  overflow: hidden;
  scrollbar-gutter: stable;
}

.ui-dialog {
  width: min(100% - 2 * var(--ui-space-4), 34rem);
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ui-text);
  overflow: visible;
  opacity: 0;
  translate: 0 var(--ui-space-4);
  transition:
    opacity var(--ui-dur-base) var(--ui-ease),
    translate var(--ui-dur-slow) var(--ui-ease),
    overlay var(--ui-dur-slow) allow-discrete,
    display var(--ui-dur-slow) allow-discrete;
}
.ui-dialog[open] {
  opacity: 1;
  translate: 0 0;
}
@starting-style {
  .ui-dialog[open] {
    opacity: 0;
    translate: 0 var(--ui-space-4);
  }
}
.ui-dialog[data-size='sm'] {
  width: min(100% - 2 * var(--ui-space-4), 26rem);
}
.ui-dialog[data-size='lg'] {
  width: min(100% - 2 * var(--ui-space-4), 44rem);
}

.ui-dialog::backdrop {
  background: transparent;
  transition:
    background-color var(--ui-dur-base) var(--ui-ease),
    overlay var(--ui-dur-slow) allow-discrete,
    display var(--ui-dur-slow) allow-discrete;
}
.ui-dialog[open]::backdrop {
  background: color-mix(in srgb, var(--ui-text) 45%, transparent);
}
@starting-style {
  .ui-dialog[open]::backdrop {
    background: transparent;
  }
}

.ui-dialog__panel {
  display: flex;
  flex-direction: column;
  max-height: min(85dvh, 46rem);
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-lg);
  box-shadow: var(--ui-shadow-lg);
  overflow: hidden;
}
.ui-dialog__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ui-space-4);
  padding: var(--ui-space-5) var(--ui-space-5) var(--ui-space-3);
}
.ui-dialog__title {
  margin: 0;
  font-family: var(--ui-font-display);
  font-size: var(--ui-text-xl);
  font-weight: var(--ui-weight-display);
  line-height: var(--ui-leading-tight);
  letter-spacing: var(--ui-tracking-display);
}
.ui-dialog__desc {
  margin: var(--ui-space-1) 0 0;
  color: var(--ui-text-muted);
  font-size: var(--ui-text-sm);
  line-height: var(--ui-leading-snug);
}
.ui-dialog__close {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin: calc(var(--ui-space-2) * -1) calc(var(--ui-space-2) * -1) 0 0;
  border: 0;
  border-radius: var(--ui-radius-pill);
  background: transparent;
  color: var(--ui-text-muted);
  cursor: pointer;
  transition: background-color var(--ui-dur-fast) var(--ui-ease);
}
.ui-dialog__close:hover {
  background: var(--ui-surface-2);
  color: var(--ui-text);
}
.ui-dialog__close:focus-visible {
  outline: var(--ui-ring-width) solid var(--ui-ring);
  outline-offset: var(--ui-ring-offset);
}
.ui-dialog__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--ui-space-2) var(--ui-space-5) var(--ui-space-5);
}
.ui-dialog__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--ui-space-3);
  padding: var(--ui-space-4) var(--ui-space-5);
  border-top: 1px solid var(--ui-border);
  background: var(--ui-surface);
}

/* The sheet: pinned to the bottom edge, full width, rising from below, with
   its actions under the thumb and clear of the home indicator. `responsive`
   is a sheet until 40rem; `sheet` is one at every width. */
.ui-dialog[data-presentation='sheet'] {
  width: 100%;
  margin: auto 0 0;
  translate: 0 100%;
}
.ui-dialog[data-presentation='sheet'][open] {
  translate: 0 0;
}
@starting-style {
  .ui-dialog[data-presentation='sheet'][open] {
    translate: 0 100%;
  }
}
@media (width < 40rem) {
  .ui-dialog[data-presentation='responsive'] {
    width: 100%;
    margin: auto 0 0;
    translate: 0 100%;
  }
  .ui-dialog[data-presentation='responsive'][open] {
    translate: 0 0;
  }
  @starting-style {
    .ui-dialog[data-presentation='responsive'][open] {
      translate: 0 100%;
    }
  }
}
@media (width < 40rem) {
  .ui-dialog[data-presentation='responsive'] .ui-dialog__panel,
  .ui-dialog[data-presentation='sheet'] .ui-dialog__panel {
    max-height: 92dvh;
    border-bottom: 0;
    border-radius: var(--ui-radius-lg) var(--ui-radius-lg) 0 0;
  }
  .ui-dialog[data-presentation='responsive'] .ui-dialog__panel::before,
  .ui-dialog[data-presentation='sheet'] .ui-dialog__panel::before {
    content: '';
    align-self: center;
    flex: none;
    width: 2.5rem;
    height: 4px;
    margin-top: var(--ui-space-2);
    border-radius: var(--ui-radius-pill);
    background: var(--ui-border-strong);
  }
  .ui-dialog[data-presentation='responsive'] .ui-dialog__foot,
  .ui-dialog[data-presentation='sheet'] .ui-dialog__foot {
    padding-bottom: calc(var(--ui-space-4) + env(safe-area-inset-bottom));
  }
  .ui-dialog[data-presentation='responsive'] .ui-dialog__foot > *,
  .ui-dialog[data-presentation='sheet'] .ui-dialog__foot > * {
    flex: 1 1 auto;
  }
}

/* ─────────────────────────── Price ───────────────────────────────────── */

/* One price style for every surface: the body face, lining tabular figures,
   strong weight — never the display serif, whose figures are old-style and
   whose ₹ is decorative. Size is the only thing a screen chooses. */
.ui-price {
  /* The context for its own hidden ₹ (.ui-price__symbol). Without it, that
     absolutely placed character anchors to some ancestor outside a scroller
     and escapes its clipping: a price in a horizontal rail widened a phone's
     layout viewport to 1302px (0.6.1). */
  position: relative;
  display: inline-flex;
  /* In a box too narrow for it (a phone card at 200% text), the lead ("from")
     and the figure take a line each; the figure itself never splits, since
     nowrap is inherited (0.6.3). */
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.3em;
  font-family: var(--ui-font-body);
  font-size: var(--ui-text-md);
  font-weight: var(--ui-weight-strong);
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: 'lnum' 1, 'tnum' 1;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: none;
  white-space: nowrap;
  color: var(--ui-text);
}
.ui-price[data-size='sm'] {
  font-size: var(--ui-text-sm);
}
.ui-price[data-size='lg'] {
  font-size: var(--ui-text-lg);
}
.ui-price[data-size='xl'] {
  font-size: var(--ui-text-2xl, var(--ui-text-xl));
}
/* Inside a sentence: the sentence's size and colour, the price's figures. */
.ui-price[data-size='inherit'] {
  display: inline;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}
.ui-price[data-tone='muted'] {
  color: var(--ui-text-muted);
  font-weight: var(--ui-weight-medium);
}
.ui-price[data-tone='accent'] {
  color: var(--ui-accent);
}
.ui-price__lead {
  color: var(--ui-text-muted);
  font-size: 0.8em;
  font-weight: var(--ui-weight-body);
  letter-spacing: 0;
}
.ui-price__figure {
  display: inline-flex;
  align-items: baseline;
}
.ui-price[data-size='inherit'] .ui-price__figure {
  display: inline;
}
.ui-price__sign {
  margin-inline-end: 0.12em;
}
/* The standard rupee sign — two bars, the bowl, the diagonal leg — drawn at
   the figures' cap height and painted in the text colour. */
.ui-price__currency {
  display: inline-block;
  width: 0.56em;
  height: 0.78em;
  margin-inline-end: 0.06em;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='4.6 1.7 14.6 20.6' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='butt' stroke-linejoin='miter'%3E%3Cpath d='M6 3h12M6 8h12M6 13h3M9 13c6.667 0 6.667-10 0-10M6 13l8.5 8'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
.ui-price__figure > .ui-price__currency {
  align-self: baseline;
  translate: 0 0.06em;
}
/* The typed ₹, for copying and for screen readers: out of sight, and in the
   system face so it never pulls a web font's extended subset. */
.ui-price__symbol {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  font-family: system-ui, sans-serif;
}
.ui-price__minor {
  font-size: 0.72em;
  vertical-align: 0.28em;
}

/* closes @layer components */
}

/* ═══ Drape fields (0.7.0) ══════════════════════════════════════════════════
   A field in Drape is a place to write, not a box: a soft layered surface
   with a faint inner shadow, a plum edge under the pointer, and on focus a
   glowing ring and a small lift, with the label taking the plum too so the
   eye knows which question it is answering. Usable first: 48px tall, text at
   16px (iOS zooms into anything smaller), the invalid state by edge, ground
   and message, never colour alone, and a disabled field that reads as
   read-only rather than faint. Scoped to Drape: every other structure keeps
   its own fields (ADR-0030 ruling 3). */

[data-structure='drape'] .ui-field {
  gap: var(--ui-space-2);
}
[data-structure='drape'] .ui-label {
  font-size: var(--ui-text-sm);
  font-weight: var(--ui-weight-strong);
  letter-spacing: 0.01em;
  color: var(--ui-text);
  transition: color var(--ui-dur-fast) var(--ui-ease);
}
[data-structure='drape'] .ui-field:focus-within > .ui-label,
[data-structure='drape'] .ui-field:focus-within > label > .ui-label {
  color: var(--ui-accent);
}
[data-structure='drape'] .ui-hint {
  font-size: var(--ui-text-xs);
  line-height: var(--ui-leading-snug);
  color: var(--ui-text-muted);
}

[data-structure='drape'] .ui-input {
  height: 3rem;
  padding-inline: var(--ui-space-4);
  border: 1px solid color-mix(in srgb, var(--ui-border-strong) 70%, transparent);
  border-radius: var(--ui-radius-md);
  background-color: var(--ui-surface);
  background-image: linear-gradient(
    180deg,
    color-mix(in srgb, var(--ui-surface-2) 70%, var(--ui-surface)),
    var(--ui-surface) 65%
  );
  box-shadow: inset 0 1px 2px color-mix(in srgb, var(--ui-shadow-color) 8%, transparent);
  font-size: max(1rem, var(--ui-text-base));
  transition:
    border-color var(--ui-dur-fast) var(--ui-ease),
    box-shadow var(--ui-dur-base) var(--ui-ease),
    background-color var(--ui-dur-fast) var(--ui-ease),
    transform var(--ui-dur-base) var(--ui-ease);
}
[data-structure='drape'] .ui-input::placeholder {
  color: var(--ui-text-subtle);
  opacity: 1;
}
[data-structure='drape'] .ui-input:hover:not(:disabled, :focus) {
  border-color: var(--ui-accent-border);
}
[data-structure='drape'] .ui-input:focus {
  outline: none;
  border-color: var(--ui-accent);
  background-image: none;
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--ui-accent) 14%, transparent),
    var(--ui-shadow-md);
}
@media (prefers-reduced-motion: no-preference) {
  [data-structure='drape'] .ui-input:focus {
    transform: translateY(-1px);
  }
}
[data-structure='drape'] .ui-input[aria-invalid='true'] {
  border-color: var(--ui-danger);
  background-image: none;
  background-color: color-mix(in srgb, var(--ui-danger-soft) 55%, var(--ui-surface));
}
[data-structure='drape'] .ui-input[aria-invalid='true']:focus {
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--ui-danger) 16%, transparent),
    var(--ui-shadow-md);
}
[data-structure='drape'] .ui-input:disabled {
  border-style: dashed;
  background-image: none;
  background-color: var(--ui-surface-2);
  box-shadow: none;
  color: var(--ui-text-muted);
}
/* The browser's autofill yellow is not ours. */
[data-structure='drape'] .ui-input:autofill {
  box-shadow: inset 0 0 0 100vmax var(--ui-surface);
  -webkit-text-fill-color: var(--ui-text);
}
[data-structure='drape'] textarea.ui-input {
  height: auto;
  min-height: 7.5rem;
  padding-block: var(--ui-space-3);
  line-height: var(--ui-leading-body);
}
[data-structure='drape'] .ui-input::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.55;
  transition: opacity var(--ui-dur-fast) var(--ui-ease);
}
[data-structure='drape'] .ui-input:hover::-webkit-calendar-picker-indicator {
  opacity: 1;
}

/* A bare <select>: the platform's arrow is replaced by one drawn from tokens,
   so it takes the field's colour. NativeSelect draws its own caret. */
[data-structure='drape'] select.ui-input:not(.ui-select__native) {
  appearance: none;
  padding-inline-end: calc(var(--ui-space-4) * 2 + 0.5rem);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ui-text-muted) 50%),
    linear-gradient(135deg, var(--ui-text-muted) 50%, transparent 50%),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--ui-surface-2) 70%, var(--ui-surface)),
      var(--ui-surface) 65%
    );
  background-position:
    calc(100% - 1.35rem) 55%,
    calc(100% - 1rem) 55%,
    0 0;
  background-size:
    0.35rem 0.35rem,
    0.35rem 0.35rem,
    100% 100%;
  background-repeat: no-repeat;
  cursor: pointer;
}
[data-structure='drape'] select.ui-input:not(.ui-select__native):focus {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ui-accent) 50%),
    linear-gradient(135deg, var(--ui-accent) 50%, transparent 50%);
  background-size:
    0.35rem 0.35rem,
    0.35rem 0.35rem;
}
[data-structure='drape'] .ui-select__caret {
  color: var(--ui-text-muted);
}
[data-structure='drape'] .ui-select:focus-within .ui-select__caret {
  color: var(--ui-accent);
}

/* Checks and radios: a real target, and chosen reads as chosen. */
[data-structure='drape'] .ui-check {
  min-height: 2rem;
  gap: var(--ui-space-3);
  font-size: var(--ui-text-base);
}
[data-structure='drape'] .ui-check input {
  width: 1.25rem;
  height: 1.25rem;
  border: 1.5px solid var(--ui-border-strong);
  border-radius: var(--ui-radius-sm);
  background: var(--ui-surface);
  box-shadow: inset 0 1px 2px color-mix(in srgb, var(--ui-shadow-color) 8%, transparent);
}
[data-structure='drape'] .ui-check input[type='radio'] {
  border-radius: 50%;
}
[data-structure='drape'] .ui-check:hover input:not(:checked, :disabled) {
  border-color: var(--ui-accent);
}
[data-structure='drape'] .ui-check input:checked {
  border-color: transparent;
  background: linear-gradient(135deg, var(--ui-accent), var(--ui-accent-2));
  box-shadow: var(--ui-shadow-sm);
}
[data-structure='drape'] .ui-check input:focus-visible {
  outline: var(--ui-ring-width) solid var(--ui-ring);
  outline-offset: var(--ui-ring-offset);
}