@tartaguti/ui-components 0.0.0-stage → 0.1.0

package/dist/tokens.css

@@ -0,0 +1,1124 @@
+/* =========================================
+   Tartaguti Design Tokens
+
+   Single source of truth for the design system. Every tt-* component
+   reads these; nothing hardcodes a colour.
+
+   Setup (once per app):
+     import "@tartaguti/ui-components/tokens.css";
+
+   Dark mode: toggle the `dark` class on <html>. Custom properties are
+   inherited properties, so they cross shadow boundaries automatically -
+   no per-component prop needed.
+
+   Theming: override any token on :root (or on any subtree) and every
+   component below it updates.
+
+   ---------------------------------------------------------------------
+   The palette is neutral ON PURPOSE, with ONE brand accent.
+
+   Surfaces, text and borders are greyscale. Colour means something:
+   destructive, success and warning are red, green and amber, and
+   --tt-brand (indigo by default) marks where the keyboard IS (the focus
+   ring) and nothing else in the library. A base with a loud brand forces
+   every consumer to fight it, so the accent is spent like money: an app
+   sets --tt-brand on :root and every focus ring takes its colour.
+
+   The status colours and the brand are one family (Oct 2026): every one
+   is inside sRGB, so no screen clips it into a different colour, and
+   every one passes 4.5:1 as text on the card, on the page and on its own
+   13% badge tint over any surface (the card, the page, --tt-muted, the
+   subtle tints), in both themes. The old warning sat outside sRGB and
+   was clipped to a muddy brown; the old light-mode badge text failed AA
+   for all three.
+
+   Named themes are preset blocks of overrides, the same shape as the
+   .dark block: <html data-theme="soft">, or any subtree. Neutral, the
+   values on :root, is still the default. See Themes below.
+   ========================================================================= */
+
+:root {
+  /* ---- Surfaces ---- */
+  /* The page sits slightly below its cards. When both were pure white,
+     a card only existed because of its border and light mode read flat
+     next to dark mode, where 0.205 already floats above 0.145. */
+  --tt-background: oklch(0.976 0 0);
+  --tt-foreground: oklch(0.145 0 0);
+
+  --tt-card: oklch(1 0 0);
+  --tt-card-foreground: oklch(0.145 0 0);
+
+  --tt-popover: oklch(1 0 0);
+  --tt-popover-foreground: oklch(0.145 0 0);
+
+  /* ---- Intent ---- */
+  --tt-primary: oklch(0.205 0 0);
+  --tt-primary-foreground: oklch(0.985 0 0);
+
+  --tt-secondary: oklch(0.97 0 0);
+  --tt-secondary-foreground: oklch(0.205 0 0);
+
+  /* muted = a static surface that is deliberately quiet: table headers,
+     disabled fields, code chips. */
+  --tt-muted: oklch(0.97 0 0);
+
+  /* Was 0.556, which measured about 4.4:1 on the page grey. Most of the
+     text using it is 12px, so it needs the margin, not the minimum. */
+  --tt-muted-foreground: oklch(0.52 0 0);
+  /* Table headers, separate from muted so a colour theme can tint them
+     without tinting every muted surface. Muted text, as in shadcn. */
+  --tt-table-header: var(--tt-muted);
+  --tt-table-header-foreground: var(--tt-muted-foreground);
+
+  /* accent = the surface something takes ON INTERACTION: hover, the
+     highlighted option in a list, the active menu item. It used to be
+     identical to --tt-muted, so hovering a table row landed on exactly
+     the header's colour and the two stopped separating. */
+  --tt-accent: oklch(0.955 0 0);
+  --tt-accent-foreground: oklch(0.205 0 0);
+
+  --tt-destructive: oklch(0.51 0.18 25);
+  --tt-destructive-foreground: oklch(0.985 0 0);
+
+  /* The one accent. Indigo, at the same lightness as the status colours
+     so none of them shouts over the others. Text on it is white here and
+     near-black in dark mode, where the fill is light. */
+  --tt-brand: oklch(0.51 0.2 277);
+  --tt-brand-foreground: oklch(0.985 0 0);
+
+  /* ---- Lines & focus ---- */
+  --tt-border: oklch(0.922 0 0);
+
+  /* --tt-input is the BORDER of a field; --tt-field is its surface.
+     Without the second one, inputs inherited the page grey and vanished
+     when placed outside a card. */
+  --tt-input: oklch(0.922 0 0);
+  --tt-field: oklch(1 0 0);
+
+  /*
+    THE focus ring. One recipe, every component:
+
+      :focus-visible {
+        outline: var(--tt-ring-width) solid var(--tt-ring);
+        outline-offset: var(--tt-ring-offset);
+      }
+
+    outline, never box-shadow. An outline takes no space in layout, cannot
+    be clipped by an ancestor's overflow:hidden, and follows border-radius.
+    A box-shadow ring fails all three. Components used to split three ways
+    between an outline, a box-shadow ring at four different opacities, and
+    a ring drawn on some inner element, so focus changed appearance
+    depending on what you tabbed onto.
+
+    The colour is 3:1 against its surround, which WCAG requires of any
+    non-text UI element. The old 0.708 grey measured about 2.3:1 on white,
+    which is a focus indicator you cannot actually see.
+
+    ---------------------------------------------------------------------
+    BORDERED controls negate the offset instead:
+
+      .control:focus-within {
+        border-color: var(--tt-ring);
+        outline: var(--tt-ring-width) solid var(--tt-ring);
+        outline-offset: calc(var(--tt-ring-width) * -1);
+      }
+
+    A button has no border, so a ring sitting 2px outside it reads as one
+    indicator. A field already has a border, so the same ring outside is a
+    SECOND one with a gap between them, and the field looks like it grew on
+    focus. Negating the offset draws the ring over the border instead: one
+    crisp 2px edge, no halo, no apparent growth, and no layout shift.
+
+    Still an outline, not a box-shadow, for all the reasons above. The
+    indicator is not optional - a text field with no visible focus state is
+    unusable by keyboard - so the fix is to draw it better, never to remove
+    it.
+  */
+  /*
+    The ring is the brand colour: the one place the accent appears in
+    every component. It used to double as the HOVER border of fields and
+    cards too, which would have painted every hovered input indigo, so
+    hover now has its own neutral, --tt-border-strong (the old ring grey).
+
+    A subtree that sets its own --tt-brand must set --tt-ring: var(--tt-brand)
+    beside it. A custom property resolves its var() where it is DECLARED,
+    so the ring declared here keeps the root's brand otherwise.
+  */
+  --tt-ring: var(--tt-brand);
+  --tt-border-strong: oklch(0.55 0 0);
+  --tt-ring-width: 2px;
+  --tt-ring-offset: 2px;
+
+  /* ---- Disabled ----
+     How far a disabled control fades. Was 0.55 on some controls, 0.5 on
+     others and 0.4 on one, so two disabled things side by side did not
+     match. Fields do NOT use this: a disabled field keeps full opacity and
+     takes the --tt-muted surface instead, so its text stays readable. */
+  --tt-opacity-disabled: 0.5;
+
+  /* ---- Scrim behind overlays ---- */
+  --tt-overlay: oklch(0.145 0 0 / 42%);
+
+  /* ---- Sidebar ---- */
+  --tt-sidebar: oklch(1 0 0);
+  --tt-sidebar-foreground: oklch(0.145 0 0);
+  --tt-sidebar-primary: oklch(0.205 0 0);
+  --tt-sidebar-primary-foreground: oklch(0.985 0 0);
+  --tt-sidebar-accent: oklch(0.955 0 0);
+  --tt-sidebar-accent-foreground: oklch(0.205 0 0);
+  --tt-sidebar-border: oklch(0.922 0 0);
+  --tt-sidebar-ring: var(--tt-brand);
+
+  /* ---- Charts ---- */
+  --tt-chart-1: oklch(0.87 0 0);
+  --tt-chart-2: oklch(0.556 0 0);
+  --tt-chart-3: oklch(0.439 0 0);
+  --tt-chart-4: oklch(0.371 0 0);
+  --tt-chart-5: oklch(0.269 0 0);
+
+  /* ---- Radius ----
+
+     On the unit rhythm, same as spacing. That is not tidiness, it is what
+     makes the concentric rule below possible: a radius and a padding can
+     only subtract cleanly from each other if they step by the same amount.
+     The old scale went 4, 6, 8, 10 while spacing went 4, 8, 12, 16, so the
+     two could never line up.
+
+     Roughly: sm for chips and tags, md for controls, lg for cards, xl for
+     panels, 2xl for bento tiles and anything full-bleed. */
+
+  /* ---- Three shape types, and only three ----
+
+     Every corner in the system is one of these. Naming the KINDS rather
+     than only the sizes is what stops a layout drifting: two shapes are
+     allowed to differ because they are different types, never because
+     nobody decided.
+
+       FIXED       a constant radius off the scale below. The default.
+                   Picked from the size ramp: sm for chips, md for
+                   controls, lg for cards, xl for panels, 2xl for tiles.
+
+       CAPSULE     radius = half the height, which --tt-radius-full gets
+                   by overshooting. For pills and anything whose shape
+                   should track its own height: badges, tags, avatars,
+                   progress tracks.
+
+       CONCENTRIC  radius = parent radius - padding, published by the
+                   container as --tt-radius-nested and read by the child.
+                   For a child that FILLS its parent's padding box.
+
+     A concentric shape ALWAYS carries a fixed fallback:
+
+       border-radius: var(--tt-radius-nested, var(--tt-radius-lg));
+
+     so the same component is correct nested and correct standing alone.
+     Writing it without the fallback is a bug, not a shortcut: when no
+     container defines the property the whole declaration is invalid and
+     the corner silently goes square. That is not hypothetical, it is how
+     tt-product's row lost its left corners.
+
+     See the Concentric corners note below for the full reasoning. */
+
+  --tt-radius-sm: calc(var(--tt-unit) * 1); /* 4px  */
+  --tt-radius-md: calc(var(--tt-unit) * 2); /* 8px  */
+  --tt-radius-lg: calc(var(--tt-unit) * 3); /* 12px */
+  --tt-radius-xl: calc(var(--tt-unit) * 4); /* 16px */
+  --tt-radius-2xl: calc(var(--tt-unit) * 6); /* 24px */
+  --tt-radius-full: 9999px;
+
+  /* The unqualified default, for anything that has not picked a rung. */
+  --tt-radius: var(--tt-radius-md);
+
+  /* ---- Concentric corners ----
+
+     A child inset inside a rounded parent needs a SMALLER radius, or the
+     two curves are not concentric and the corner reads as two unrelated
+     arcs stacked. The rule is inner = outer - inset.
+
+     A container publishes this for its children:
+
+       .card {
+         padding: var(--_pad);
+         border-radius: var(--tt-radius-lg);
+         --tt-radius-nested: max(
+           var(--tt-radius-sm),
+           calc(var(--tt-radius-lg) - var(--_pad))
+         );
+       }
+
+     and a child reads `var(--tt-radius-nested, var(--tt-radius))`, so it
+     is correct inside a container and unchanged outside one. Custom
+     properties inherit through shadow roots, so this crosses component
+     boundaries with no props and no coordination.
+
+     IMPORTANT: this is for a child that FILLS the padding box, so its
+     corner really does sit one inset in from the parent's - a bento tile's
+     content, a full-width image, a code block, a nested panel. It is not
+     for every descendant. A button floating in the middle of a card is
+     nowhere near the corner, so it keeps its own radius from its size ramp;
+     giving it the nested value would make it tighter for no reason.
+
+     The floor matters. When padding is larger than the radius the
+     subtraction goes negative, which is an invalid radius, and the
+     relationship stops meaning anything visually anyway. Floor it at sm.
+
+     Note this only does visible work when the parent radius EXCEEDS its
+     padding, which is the large-radius case: a 24px bento tile with 16px
+     padding gives its children 8px. A tight 8px card with 12px padding
+     just floors, which is the correct answer for it.
+
+     There is deliberately NO default value here. A container defines it or
+     nothing does, which is what lets a consumer write
+
+       border-radius: var(--tt-radius-nested, var(--tt-radius-2xl));
+
+     and get the concentric value when nested and its own full radius when
+     standing alone. A global default would always resolve, the fallback
+     would never fire, and a top-level tile would silently take the tight
+     nested corner it was never inside anything to earn. */
+
+  /* ---- Typography ---- */
+  --tt-font-sans:
+    "Inter",
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    sans-serif;
+
+  /* Page-level headings: tt-text h1 to h3, tt-page and tt-page-header.
+     The sans by default, so nothing changes until a theme gives
+     headings a face of their own. Like the ring, it resolves where it
+     is declared: a subtree that sets --tt-font-sans sets this beside it. */
+  --tt-font-display: var(--tt-font-sans);
+
+  --tt-font-mono:
+    "JetBrains Mono",
+    "Fira Code",
+    ui-monospace,
+    "SFMono-Regular",
+    Consolas,
+    "Liberation Mono",
+    monospace;
+
+  --tt-text-xs: 0.75rem;
+  --tt-text-sm: 0.875rem;
+  --tt-text-md: 1rem;
+  --tt-text-lg: 1.125rem;
+  --tt-text-xl: 1.25rem;
+  --tt-text-2xl: 1.5rem;
+  --tt-text-3xl: 1.875rem;
+
+  /* Line height was hardcoded per component and had drifted to 1.4, 1.45,
+     1.5 and 1.6 for the same kind of text. Four named steps instead:
+       tight    headings and numbers, where the size does the spacing
+       snug     labels and single-line UI text
+       normal   default body copy
+       relaxed  long prose, docs paragraphs */
+  --tt-leading-tight: 1.2;
+  --tt-leading-snug: 1.4;
+  --tt-leading-normal: 1.5;
+  --tt-leading-relaxed: 1.65;
+
+  /* Weight had no tokens and drifted the same way: 550, 600, 650 and 700
+     for the same kind of title. Four roles:
+       regular   body copy, and the quiet half of a two-part value
+       medium    labels, menu items, links: UI text that must not shout
+       semibold  component titles and anything selected or current
+       bold      page-level display text: page headings, big numbers
+     tt-button keeps its own 550, an optical choice between medium and
+     semibold that no other component shares. */
+  --tt-weight-regular: 400;
+  --tt-weight-medium: 500;
+  --tt-weight-semibold: 600;
+  --tt-weight-bold: 650;
+
+  /* ---- The unit ----
+
+     Every measurement in the system is a multiple of this. Spacing, radius
+     and control heights all derive from it below, which means density is
+     ONE knob: a spacious theme sets --tt-unit and the whole layout breathes
+     without a single component changing.
+
+     It is in rem rather than px on purpose, so the whole system still
+     scales with a user's root font size.
+
+     The scale numbering already was the multiplier - --tt-space-4 was 1rem,
+     which is 4 units - so switching to calc() changed no value anywhere.
+     That was luck worth keeping: never add a step that breaks it. */
+
+  --tt-unit: 0.25rem; /* 4px at the default root size */
+
+  /* ---- Spacing ---- */
+  --tt-space-1: calc(var(--tt-unit) * 1);
+  --tt-space-2: calc(var(--tt-unit) * 2);
+  --tt-space-3: calc(var(--tt-unit) * 3);
+  --tt-space-4: calc(var(--tt-unit) * 4);
+  --tt-space-5: calc(var(--tt-unit) * 5);
+  --tt-space-6: calc(var(--tt-unit) * 6);
+  --tt-space-8: calc(var(--tt-unit) * 8);
+  --tt-space-10: calc(var(--tt-unit) * 10);
+  --tt-space-12: calc(var(--tt-unit) * 12);
+
+  /* ---- Control heights ----
+     On the same rhythm, so a control sits on the grid its padding uses. */
+  --tt-control-sm: calc(var(--tt-unit) * 8); /* 32px */
+  --tt-control-md: calc(var(--tt-unit) * 9); /* 36px */
+  --tt-control-lg: calc(var(--tt-unit) * 10); /* 40px */
+
+  /* ---- Elevation ----
+
+     Height above the page, as four rungs. Each rung pairs a SURFACE with
+     a SHADOW, and they must move together: a shadow with no surface
+     change reads as a smudge, and a surface change with no shadow reads
+     as a colour swatch.
+
+       rung  surface           shadow              used by
+       0     --tt-background   none                the page itself
+       1     --tt-card         --tt-elevation-1    cards, stat tiles
+       2     --tt-popover      --tt-elevation-2    dropdowns, tooltips, toasts
+       3     --tt-popover      --tt-elevation-3    modals, drawers
+
+     Rungs 2 and 3 share a surface on purpose: once something is floating
+     over a scrim, the shadow alone carries the difference.
+
+     Reach for a rung, not a shadow. "Raise this to 2" is one decision;
+     picking a shadow by hand is how tt-card, tt-tooltip and tt-search all
+     ended up on --tt-shadow-md for three unrelated reasons. */
+
+  --tt-elevation-1: var(--tt-shadow-sm);
+  --tt-elevation-2: var(--tt-shadow-lg);
+  --tt-elevation-3: var(--tt-shadow-overlay);
+
+  /* ---- Shadows ----
+     The raw values the rungs above are built from. Prefer a rung. */
+  --tt-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+
+  --tt-shadow-md:
+    0 4px 6px -1px rgb(0 0 0 / 0.08),
+    0 2px 4px -2px rgb(0 0 0 / 0.08);
+
+  --tt-shadow-lg:
+    0 10px 15px -3px rgb(0 0 0 / 0.08),
+    0 4px 6px -4px rgb(0 0 0 / 0.08);
+
+  --tt-shadow-overlay:
+    0 12px 32px rgb(0 0 0 / 0.18),
+    0 2px 8px rgb(0 0 0 / 0.1);
+
+  /* The edge of something pinned while content scrolls UNDER it, such as
+     a sticky table column. Cast sideways, which no rung above does. */
+  --tt-shadow-pinned: 2px 0 4px -2px rgb(0 0 0 / 0.08);
+
+  /* ---- Motion ----
+
+     Two groups, and the split matters.
+
+     The durations and easings in the first group are the CHARACTER knob.
+     Every transition and every one-shot entrance in the library reads one
+     of them; nothing hardcodes a duration. A theme overrides these four
+     values and the whole system changes feel at once - calmer, snappier,
+     springier - with no component touched.
+
+     The looping group is different. A spinner is not character, it is
+     feedback, and it survives the reduced-motion block at the bottom of
+     this file: a frozen spinner reads as "hung", not as "working".
+
+     Durations are deliberately short. Motion in an interface is feedback,
+     not decoration, and anything past about 400ms starts being something
+     the user waits for rather than something that confirms what they did. */
+
+  --tt-duration-fast: 100ms; /* hover, focus, colour */
+  --tt-duration-normal: 150ms; /* the default for anything interactive */
+  --tt-duration-slow: 250ms; /* disclosure, popovers, entrances */
+  --tt-duration-slower: 400ms; /* full surfaces: drawers, sheets, modals */
+
+  /* Looping feedback. Exempt from the reduced-motion block below. */
+  --tt-duration-spin: 0.6s;
+
+  /* Easings.
+
+     in  = leaving. Accelerates away, because the user has stopped caring
+           about a thing that is on its way out.
+     out = entering. Decelerates in, because the eye tracks it and wants
+           to see where it lands.
+     The plain --tt-ease is symmetric, for anything that changes in place
+     rather than arriving or leaving: a colour, a background, a border. */
+
+  --tt-ease: cubic-bezier(0.4, 0, 0.2, 1);
+  --tt-ease-in: cubic-bezier(0.7, 0, 0.84, 0);
+  --tt-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+
+  /* A damped spring, sampled from 1 - e^(-10t)cos(10t).
+
+     It overshoots by about 6% around a quarter of the way through, then
+     settles. That single soft overshoot is what makes a control feel
+     physical. Anything bouncier reads as a toy, which is why this is one
+     overshoot and not three.
+
+     Use it for things that should feel picked up and put down: a toggle
+     landing, a panel snapping open, a tile lifting. Never for opacity,
+     where overshoot is invisible and only costs time. */
+
+  --tt-ease-spring: linear(
+    0,
+    0.468 5%,
+    0.801 10%,
+    0.984 15%,
+    1.056 20%,
+    1.066 25%,
+    1.049 30%,
+    1.028 35%,
+    1.012 40%,
+    0.998 50%,
+    0.998 60%,
+    0.999 70%,
+    1
+  );
+
+  /* ---- Z-index ---- */
+  --tt-z-dropdown: 1000;
+  --tt-z-sticky: 1100;
+  --tt-z-overlay: 1200;
+  --tt-z-drawer: 1250;
+  --tt-z-modal: 1300;
+  --tt-z-toast: 1400;
+
+  /* ---- Code surface ----
+     Intentionally theme-independent: code blocks stay dark in both
+     themes so a single syntax palette stays readable. Override these
+     if you need a light code surface. */
+  --tt-code-background: #0d1117;
+  --tt-code-surface: #161b22;
+  --tt-code-border: #30363d;
+  --tt-code-foreground: #e6edf3;
+  --tt-code-muted: #8b949e;
+
+  --tt-code-comment: #8b949e;
+  --tt-code-punctuation: #c9d1d9;
+  --tt-code-constant: #79c0ff;
+  --tt-code-string: #a5d6ff;
+  --tt-code-operator: #d2a8ff;
+  --tt-code-keyword: #ff7b72;
+  --tt-code-function: #d2a8ff;
+  --tt-code-regex: #ffa657;
+
+  /* :root. See the header for how these were chosen.
+
+     Green and amber sit a little darker than the brand and red. At the
+     same oklch lightness they carry more luminance, which is what WCAG
+     measures, and their badge text fell to 4.2:1 on the page grey and
+     on --tt-muted. Matched by contrast instead, with chroma pulled in to
+     stay inside sRGB at the lower lightness. */
+  --tt-success: oklch(0.48 0.115 155);
+  --tt-warning: oklch(0.5 0.12 55);
+
+  /* Text on a success or warning FILL, so every colour that can be an
+     accent has a readable pair, like brand and destructive: a success
+     button, a warning switch. White here (5.9:1 and 6:1), near-black
+     in dark mode, where the fills are light. */
+  --tt-success-foreground: oklch(0.985 0 0);
+  --tt-warning-foreground: oklch(0.985 0 0);
+
+  /* ---- Subtle tints ----
+     A quiet surface in each accent's hue: a callout, a highlighted card,
+     a neutral badge given an accent. One lightness and chroma for all
+     four, so none is louder than the others. 0.018 is as much chroma as
+     indigo holds inside sRGB this light; more is clipped, like the old
+     warning was.
+
+     Text on them is --tt-foreground. Muted text and every accent colour
+     still pass 4.5:1 as text on them, in both themes (4.8:1 at worst),
+     and so does a status badge sitting on one.
+
+     Like the ring, they do not follow a re-pointed --tt-brand on their
+     own: a custom property resolves its var() where it is declared, so a
+     subtree that sets --tt-brand sets --tt-brand-subtle beside it. */
+  --tt-brand-subtle: oklch(0.96 0.018 277);
+  --tt-success-subtle: oklch(0.96 0.018 155);
+  --tt-warning-subtle: oklch(0.96 0.018 55);
+  --tt-destructive-subtle: oklch(0.96 0.018 25);
+
+  /* ---- Content hues ----
+     Colour an app picks for content, not for meaning: a tag, a callout,
+     a highlighted panel. No component reads them; the builder offers
+     them as accents. Each is a kit like the status colours (fill, text
+     on it, quiet tint), built by the same rules: inside sRGB, 4.5:1 as
+     text on every surface and every tint, in both themes. Hues sit
+     between the ones already spoken for, so none reads as a status. */
+  --tt-teal: oklch(0.49 0.08 185);
+  --tt-teal-foreground: oklch(0.985 0 0);
+  --tt-teal-subtle: oklch(0.96 0.018 185);
+
+  --tt-blue: oklch(0.5 0.135 250);
+  --tt-blue-foreground: oklch(0.985 0 0);
+  --tt-blue-subtle: oklch(0.96 0.018 250);
+
+  --tt-purple: oklch(0.51 0.2 305);
+  --tt-purple-foreground: oklch(0.985 0 0);
+  --tt-purple-subtle: oklch(0.96 0.018 305);
+
+  --tt-pink: oklch(0.51 0.19 350);
+  --tt-pink-foreground: oklch(0.985 0 0);
+  --tt-pink-subtle: oklch(0.96 0.018 350);
+
+  /* ---- Constants ----
+     The same in every theme and mode, on purpose: text over a photo or
+     a fill that does not change with the theme. Everywhere else, a
+     -foreground pair is the right answer, because it flips with the
+     surface. Never redeclared below. */
+  --tt-white: oklch(1 0 0);
+}
+
+/* =========================================
+   Baseline
+
+   The only rule in this file that is not a variable, and it is here
+   for one reason: -webkit-tap-highlight-color is an INHERITED
+   property, exactly like the custom properties above. Inherited
+   properties cross shadow boundaries, so declaring it once on :root
+   reaches inside all 58 components. An ordinary CSS rule could not.
+
+   What it fixes: on Android Chrome and iOS Safari, tapping anything
+   clickable flashes a translucent blue-grey box over it. It exists so
+   a plain HTML link gives some feedback on touch, but every control
+   here already has its own hover, active and focus-visible states, so
+   the flash is a second uninvited highlight on top of them. Removing
+   it costs nothing: the control's own states still show the tap.
+
+   user-select is deliberately NOT set here. It is inherited too, so
+   putting it on :root would make body copy unselectable, and not
+   being able to copy text off a page is a real loss. It belongs on
+   individual controls instead.
+   ========================================= */
+
+:root {
+  -webkit-tap-highlight-color: transparent;
+
+  /* ---- The canvas, and the one thing that must never disagree ----
+
+     color-scheme decides what the BROWSER paints: the canvas behind the
+     page, form controls, scrollbars, the caret. The tokens decide what WE
+     paint. When those two answers differ, the browser's dark canvas shows
+     around the edges of a light app, which reads as a black border around
+     everything.
+
+     That happened twice. First when nothing set the .dark class at all
+     and the page asked the browser to follow the OS. Then again when a
+     theme TOGGLE was added: the class started following the user's saved
+     choice while the canvas was still following the OS, so choosing light
+     on a machine set to dark brought the black border straight back.
+
+     Binding it to the same class that drives the tokens makes the
+     disagreement impossible rather than merely fixed. One class, one
+     owner, both answers.
+
+     Do NOT declare a two-value color-scheme in a page that has a theme
+     toggle. That hands the canvas back to the OS and reopens this. */
+  color-scheme: light;
+}
+
+/* =========================================
+   Dark theme
+   ========================================= */
+
+.dark {
+  /* Pairs with color-scheme on :root above. See the note there: this is
+     what stops the browser's canvas and our tokens ever disagreeing. */
+  color-scheme: dark;
+
+  --tt-background: oklch(0.145 0 0);
+  --tt-foreground: oklch(0.985 0 0);
+
+  --tt-card: oklch(0.205 0 0);
+  --tt-card-foreground: oklch(0.985 0 0);
+
+  --tt-popover: oklch(0.205 0 0);
+  --tt-popover-foreground: oklch(0.985 0 0);
+
+  --tt-primary: oklch(0.922 0 0);
+  --tt-primary-foreground: oklch(0.205 0 0);
+
+  --tt-secondary: oklch(0.269 0 0);
+  --tt-secondary-foreground: oklch(0.985 0 0);
+
+  --tt-muted: oklch(0.269 0 0);
+  --tt-muted-foreground: oklch(0.72 0 0);
+  /* Table headers, separate from muted so a colour theme can tint them
+     without tinting every muted surface. Muted text, as in shadcn. */
+  --tt-table-header: var(--tt-muted);
+  --tt-table-header-foreground: var(--tt-muted-foreground);
+
+  /* Lifts on interaction, same as light mode. Dark surfaces get lighter
+     on hover rather than darker: the eye reads "closer to the light". */
+  --tt-accent: oklch(0.3 0 0);
+  --tt-accent-foreground: oklch(0.985 0 0);
+
+  /* Light fills in dark mode, so text on them is dark. White on this red
+     was 2.4:1: every danger button failed contrast in dark mode. */
+  --tt-destructive: oklch(0.73 0.15 24);
+  --tt-destructive-foreground: oklch(0.145 0 0);
+
+  --tt-brand: oklch(0.74 0.13 277);
+  --tt-brand-foreground: oklch(0.145 0 0);
+
+  --tt-border: oklch(1 0 0 / 10%);
+  --tt-input: oklch(1 0 0 / 15%);
+  --tt-field: oklch(0.205 0 0);
+  --tt-ring: var(--tt-brand);
+  --tt-border-strong: oklch(0.68 0 0);
+
+  --tt-overlay: oklch(0 0 0 / 62%);
+
+  --tt-sidebar: oklch(0.205 0 0);
+  --tt-sidebar-foreground: oklch(0.985 0 0);
+
+  /* Was a saturated blue while light mode was neutral black, so the
+     active sidebar item changed brand between themes. A token pair
+     should mean the same thing in both. */
+  --tt-sidebar-primary: oklch(0.922 0 0);
+  --tt-sidebar-primary-foreground: oklch(0.205 0 0);
+
+  --tt-sidebar-accent: oklch(0.3 0 0);
+  --tt-sidebar-accent-foreground: oklch(0.985 0 0);
+  --tt-sidebar-border: oklch(1 0 0 / 10%);
+  --tt-sidebar-ring: var(--tt-brand);
+
+  --tt-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
+
+  --tt-shadow-md:
+    0 4px 6px -1px rgb(0 0 0 / 0.4),
+    0 2px 4px -2px rgb(0 0 0 / 0.4);
+
+  --tt-shadow-lg:
+    0 10px 15px -3px rgb(0 0 0 / 0.45),
+    0 4px 6px -4px rgb(0 0 0 / 0.45);
+
+  --tt-shadow-overlay:
+    0 12px 32px rgb(0 0 0 / 0.5),
+    0 2px 8px rgb(0 0 0 / 0.35);
+
+  --tt-shadow-pinned: 2px 0 4px -2px rgb(0 0 0 / 0.4);
+
+  /* .dark - lighter, so they stay readable on a dark surface */
+  --tt-success: oklch(0.77 0.13 155);
+  --tt-warning: oklch(0.8 0.13 70);
+
+  /* Light fills, so dark text, the same as brand and destructive. */
+  --tt-success-foreground: oklch(0.145 0 0);
+  --tt-warning-foreground: oklch(0.145 0 0);
+
+  /* Lifted above the card to the same lightness as --tt-accent, in the
+     same hues as the fills above. A tint is also a hover and selected
+     surface (a builder colour theme points --tt-accent at one), so it
+     has to lift the way the grey one does. At 0.26 it sat below
+     --tt-secondary, and a hovered secondary button went darker. */
+  --tt-brand-subtle: oklch(0.3 0.045 277);
+  --tt-success-subtle: oklch(0.3 0.045 155);
+  --tt-warning-subtle: oklch(0.3 0.045 70);
+  --tt-destructive-subtle: oklch(0.3 0.045 24);
+
+  --tt-teal: oklch(0.76 0.12 185);
+  --tt-teal-foreground: oklch(0.145 0 0);
+  --tt-teal-subtle: oklch(0.3 0.045 185);
+
+  --tt-blue: oklch(0.75 0.12 250);
+  --tt-blue-foreground: oklch(0.145 0 0);
+  --tt-blue-subtle: oklch(0.3 0.045 250);
+
+  --tt-purple: oklch(0.75 0.13 305);
+  --tt-purple-foreground: oklch(0.145 0 0);
+  --tt-purple-subtle: oklch(0.3 0.045 305);
+
+  --tt-pink: oklch(0.76 0.13 350);
+  --tt-pink-foreground: oklch(0.145 0 0);
+  --tt-pink-subtle: oklch(0.3 0.045 350);
+}
+
+/* =========================================
+   Density
+
+   One attribute on <html> remaps the spacing and control-height tokens,
+   so every component tightens or loosens together:
+
+     <html data-density="compact">
+
+   Data-heavy screens want compact; a marketing page or a settings form
+   reads better spacious. This works for free because nothing hardcodes a
+   pixel value: components only ever read --tt-space-* and --tt-control-*.
+   ========================================= */
+
+[data-density="compact"] {
+  --tt-space-1: 0.125rem;
+  --tt-space-2: 0.375rem;
+  --tt-space-3: 0.5rem;
+  --tt-space-4: 0.75rem;
+  --tt-space-5: 0.875rem;
+  --tt-space-6: 1rem;
+  --tt-space-8: 1.25rem;
+  --tt-space-10: 1.5rem;
+  --tt-space-12: 2rem;
+
+  --tt-control-sm: 1.75rem;
+  --tt-control-md: 2rem;
+  --tt-control-lg: 2.25rem;
+}
+
+[data-density="spacious"] {
+  --tt-space-1: 0.375rem;
+  --tt-space-2: 0.625rem;
+  --tt-space-3: 1rem;
+  --tt-space-4: 1.25rem;
+  --tt-space-5: 1.5rem;
+  --tt-space-6: 2rem;
+  --tt-space-8: 2.5rem;
+  --tt-space-10: 3rem;
+  --tt-space-12: 4rem;
+
+  --tt-control-sm: 2.25rem;
+  --tt-control-md: 2.75rem;
+  --tt-control-lg: 3rem;
+}
+
+/* =========================================
+   Themes
+
+   One attribute changes the personality of every component at once:
+
+     <html data-theme="soft">     soft, sharp, editorial, bold
+
+   or on any element, for a subtree. A theme is a block of overrides of
+   tokens that already exist, exactly like .dark and density, so no
+   component knows themes exist.
+
+   Four rules keep them composable, and styles.test.ts checks each one:
+
+   1. A theme never touches spacing, control heights or durations. Those
+      belong to density, touch and reduced motion, and a theme that set
+      them would quietly win over the user's own setting.
+
+   2. Every token defined as var(--tt-x) on :root is redeclared beside
+      --tt-x. A custom property resolves its var() where it is DECLARED,
+      so on a subtree, --tt-radius would keep the root's medium radius
+      and --tt-ring the root's brand.
+
+   3. Anything .dark changes, a theme changes again under .dark: the
+      second block per theme. Both selectors are needed, one for a theme
+      inside a dark page and one for <html class="dark" data-theme>.
+
+   4. Brand pairs keep AA in both modes: text on the brand, the brand as
+      text on every surface and tint, the ring at 3:1.
+
+   Themes compose, like density does: a theme on a subtree changes what
+   it declares and inherits the rest from the page. "neutral" is the one
+   that declares everything any theme touches, at the :root values, so
+   <div data-theme="neutral"> is a clean slate inside a themed page.
+   ========================================= */
+
+[data-theme="neutral"] {
+  --tt-radius-sm: calc(var(--tt-unit) * 1);
+  --tt-radius-md: calc(var(--tt-unit) * 2);
+  --tt-radius-lg: calc(var(--tt-unit) * 3);
+  --tt-radius-xl: calc(var(--tt-unit) * 4);
+  --tt-radius-2xl: calc(var(--tt-unit) * 6);
+  --tt-radius: var(--tt-radius-md);
+
+  --tt-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --tt-shadow-md:
+    0 4px 6px -1px rgb(0 0 0 / 0.08),
+    0 2px 4px -2px rgb(0 0 0 / 0.08);
+  --tt-shadow-lg:
+    0 10px 15px -3px rgb(0 0 0 / 0.08),
+    0 4px 6px -4px rgb(0 0 0 / 0.08);
+  --tt-shadow-overlay:
+    0 12px 32px rgb(0 0 0 / 0.18),
+    0 2px 8px rgb(0 0 0 / 0.1);
+  --tt-shadow-pinned: 2px 0 4px -2px rgb(0 0 0 / 0.08);
+  --tt-elevation-1: var(--tt-shadow-sm);
+  --tt-elevation-2: var(--tt-shadow-lg);
+  --tt-elevation-3: var(--tt-shadow-overlay);
+
+  --tt-font-display: var(--tt-font-sans);
+  --tt-weight-medium: 500;
+  --tt-weight-semibold: 600;
+  --tt-weight-bold: 650;
+  --tt-leading-snug: 1.4;
+  --tt-leading-normal: 1.5;
+  --tt-leading-relaxed: 1.65;
+  --tt-text-2xl: 1.5rem;
+  --tt-text-3xl: 1.875rem;
+
+  --tt-brand: oklch(0.51 0.2 277);
+  --tt-brand-foreground: oklch(0.985 0 0);
+  --tt-brand-subtle: oklch(0.96 0.018 277);
+  --tt-ring: var(--tt-brand);
+  --tt-sidebar-ring: var(--tt-brand);
+  --tt-primary: oklch(0.205 0 0);
+  --tt-primary-foreground: oklch(0.985 0 0);
+  --tt-sidebar-primary: oklch(0.205 0 0);
+  --tt-sidebar-primary-foreground: oklch(0.985 0 0);
+
+  --tt-border: oklch(0.922 0 0);
+  --tt-input: oklch(0.922 0 0);
+  --tt-border-strong: oklch(0.55 0 0);
+  --tt-sidebar-border: oklch(0.922 0 0);
+}
+
+.dark [data-theme="neutral"],
+.dark[data-theme="neutral"] {
+  --tt-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
+  --tt-shadow-md:
+    0 4px 6px -1px rgb(0 0 0 / 0.4),
+    0 2px 4px -2px rgb(0 0 0 / 0.4);
+  --tt-shadow-lg:
+    0 10px 15px -3px rgb(0 0 0 / 0.45),
+    0 4px 6px -4px rgb(0 0 0 / 0.45);
+  --tt-shadow-overlay:
+    0 12px 32px rgb(0 0 0 / 0.5),
+    0 2px 8px rgb(0 0 0 / 0.35);
+  --tt-shadow-pinned: 2px 0 4px -2px rgb(0 0 0 / 0.4);
+
+  --tt-brand: oklch(0.74 0.13 277);
+  --tt-brand-foreground: oklch(0.145 0 0);
+  --tt-brand-subtle: oklch(0.3 0.045 277);
+  --tt-primary: oklch(0.922 0 0);
+  --tt-primary-foreground: oklch(0.205 0 0);
+  --tt-sidebar-primary: oklch(0.922 0 0);
+  --tt-sidebar-primary-foreground: oklch(0.205 0 0);
+
+  --tt-border: oklch(1 0 0 / 10%);
+  --tt-input: oklch(1 0 0 / 15%);
+  --tt-border-strong: oklch(0.68 0 0);
+  --tt-sidebar-border: oklch(1 0 0 / 10%);
+}
+
+/* ---- Soft: rounder corners, diffuse shadows, lighter type ----
+   Every rung of the radius scale steps up, still on the unit. The small
+   one only by half a unit: it rounds an 18px checkbox, and at 8px the
+   box reads as a circle, which is a radio button. Shadows spread wider
+   at lower opacity, so a card floats instead of sitting on an edge. */
+
+[data-theme="soft"] {
+  --tt-radius-sm: calc(var(--tt-unit) * 1.5);
+  --tt-radius-md: calc(var(--tt-unit) * 3);
+  --tt-radius-lg: calc(var(--tt-unit) * 5);
+  --tt-radius-xl: calc(var(--tt-unit) * 6);
+  --tt-radius-2xl: calc(var(--tt-unit) * 8);
+  --tt-radius: var(--tt-radius-md);
+
+  --tt-shadow-sm:
+    0 1px 3px 0 rgb(0 0 0 / 0.04),
+    0 2px 8px -2px rgb(0 0 0 / 0.05);
+  --tt-shadow-md:
+    0 4px 12px -2px rgb(0 0 0 / 0.06),
+    0 2px 4px -2px rgb(0 0 0 / 0.04);
+  --tt-shadow-lg:
+    0 12px 28px -6px rgb(0 0 0 / 0.1),
+    0 4px 10px -4px rgb(0 0 0 / 0.05);
+  --tt-shadow-overlay:
+    0 24px 48px -12px rgb(0 0 0 / 0.22),
+    0 8px 16px -8px rgb(0 0 0 / 0.08);
+  --tt-shadow-pinned: 4px 0 8px -4px rgb(0 0 0 / 0.08);
+  --tt-elevation-1: var(--tt-shadow-sm);
+  --tt-elevation-2: var(--tt-shadow-lg);
+  --tt-elevation-3: var(--tt-shadow-overlay);
+
+  --tt-weight-semibold: 560;
+  --tt-weight-bold: 600;
+}
+
+.dark [data-theme="soft"],
+.dark[data-theme="soft"] {
+  --tt-shadow-sm:
+    0 1px 3px 0 rgb(0 0 0 / 0.3),
+    0 2px 8px -2px rgb(0 0 0 / 0.3);
+  --tt-shadow-md:
+    0 4px 12px -2px rgb(0 0 0 / 0.35),
+    0 2px 4px -2px rgb(0 0 0 / 0.3);
+  --tt-shadow-lg:
+    0 12px 28px -6px rgb(0 0 0 / 0.45),
+    0 4px 10px -4px rgb(0 0 0 / 0.3);
+  --tt-shadow-overlay:
+    0 24px 48px -12px rgb(0 0 0 / 0.55),
+    0 8px 16px -8px rgb(0 0 0 / 0.3);
+  --tt-shadow-pinned: 4px 0 8px -4px rgb(0 0 0 / 0.4);
+}
+
+/* ---- Sharp: square corners, crisp borders, flat ----
+   0px, not 0: components subtract padding from these inside calc(),
+   and a unitless 0 there is a number, which makes the whole calc
+   invalid. Capsules (--tt-radius-full) stay round: an avatar is still
+   a circle. Cards lose their shadow and lean on a darker border; the
+   field border reaches 3:1, so an input's edge is visible on its own.
+   Floating things keep a tight shadow, or a menu would merge with the
+   page under it. */
+
+[data-theme="sharp"] {
+  --tt-radius-sm: 0px;
+  --tt-radius-md: 0px;
+  --tt-radius-lg: 0px;
+  --tt-radius-xl: 0px;
+  --tt-radius-2xl: 0px;
+  --tt-radius: var(--tt-radius-md);
+
+  --tt-shadow-sm: none;
+  --tt-shadow-md: 0 1px 2px 0 rgb(0 0 0 / 0.08);
+  --tt-shadow-lg: 0 2px 6px -1px rgb(0 0 0 / 0.12);
+  --tt-shadow-overlay: 0 8px 24px -4px rgb(0 0 0 / 0.24);
+  --tt-shadow-pinned: 1px 0 0 0 rgb(0 0 0 / 0.1);
+  --tt-elevation-1: var(--tt-shadow-sm);
+  --tt-elevation-2: var(--tt-shadow-lg);
+  --tt-elevation-3: var(--tt-shadow-overlay);
+
+  --tt-border: oklch(0.86 0 0);
+  --tt-input: oklch(0.64 0 0);
+  --tt-border-strong: oklch(0.45 0 0);
+  --tt-sidebar-border: oklch(0.86 0 0);
+}
+
+.dark [data-theme="sharp"],
+.dark[data-theme="sharp"] {
+  --tt-shadow-sm: none;
+  --tt-shadow-md: 0 1px 2px 0 rgb(0 0 0 / 0.4);
+  --tt-shadow-lg: 0 2px 6px -1px rgb(0 0 0 / 0.5);
+  --tt-shadow-overlay: 0 8px 24px -4px rgb(0 0 0 / 0.6);
+  --tt-shadow-pinned: 1px 0 0 0 rgb(0 0 0 / 0.4);
+
+  --tt-border: oklch(1 0 0 / 18%);
+  --tt-input: oklch(1 0 0 / 34%);
+  --tt-border-strong: oklch(0.8 0 0);
+  --tt-sidebar-border: oklch(1 0 0 / 18%);
+}
+
+/* ---- Editorial: serif headings, more air, ink-blue accent ----
+   A system serif stack, so the theme costs no download: Iowan Old
+   Style and Charter on Apple, Sitka and Cambria on Windows, Charter or
+   Noto Serif on Linux. Body text stays sans, which is what keeps forms
+   and tables readable. More line height and larger top headings do
+   the airiness; spacing is left to density. Corners tighten towards
+   print. */
+
+[data-theme="editorial"] {
+  --tt-radius-sm: calc(var(--tt-unit) * 0.5);
+  --tt-radius-md: calc(var(--tt-unit) * 1);
+  --tt-radius-lg: calc(var(--tt-unit) * 1.5);
+  --tt-radius-xl: calc(var(--tt-unit) * 2);
+  --tt-radius-2xl: calc(var(--tt-unit) * 3);
+  --tt-radius: var(--tt-radius-md);
+
+  --tt-font-display:
+    "Iowan Old Style",
+    Charter,
+    "Bitstream Charter",
+    ui-serif,
+    "Sitka Text",
+    Cambria,
+    Georgia,
+    "Noto Serif",
+    serif;
+  --tt-leading-snug: 1.45;
+  --tt-leading-normal: 1.6;
+  --tt-leading-relaxed: 1.8;
+  --tt-text-2xl: 1.625rem;
+  --tt-text-3xl: 2.25rem;
+
+  --tt-brand: oklch(0.47 0.1 245);
+  --tt-brand-foreground: oklch(0.985 0 0);
+  --tt-brand-subtle: oklch(0.96 0.018 245);
+  --tt-ring: var(--tt-brand);
+  --tt-sidebar-ring: var(--tt-brand);
+}
+
+.dark [data-theme="editorial"],
+.dark[data-theme="editorial"] {
+  --tt-brand: oklch(0.76 0.09 245);
+  --tt-brand-foreground: oklch(0.145 0 0);
+  --tt-brand-subtle: oklch(0.3 0.045 245);
+}
+
+/* ---- Bold: a louder brand that fills the primary, heavier type ----
+   The one theme that spends the accent on every filled control: primary
+   buttons, checked boxes and switches take the brand. Aliases, so they
+   follow the brand into dark mode with no second copy. The display face
+   is the landing page's Space Grotesk when the app has loaded it, and
+   the sans otherwise. */
+
+[data-theme="bold"] {
+  --tt-font-display: "Space Grotesk Variable", "Space Grotesk", var(--tt-font-sans);
+  --tt-weight-medium: 550;
+  --tt-weight-semibold: 700;
+  --tt-weight-bold: 800;
+
+  --tt-brand: oklch(0.47 0.25 277);
+  --tt-brand-foreground: oklch(0.985 0 0);
+  --tt-ring: var(--tt-brand);
+  --tt-sidebar-ring: var(--tt-brand);
+  --tt-primary: var(--tt-brand);
+  --tt-primary-foreground: var(--tt-brand-foreground);
+  --tt-sidebar-primary: var(--tt-brand);
+  --tt-sidebar-primary-foreground: var(--tt-brand-foreground);
+}
+
+.dark [data-theme="bold"],
+.dark[data-theme="bold"] {
+  --tt-brand: oklch(0.69 0.15 277);
+  --tt-brand-foreground: oklch(0.145 0 0);
+}
+
+/* =========================================
+   Touch
+
+   A mouse pointer is precise; a fingertip is roughly 44px across, which
+   is the minimum target size both Apple and Google publish. Rather than
+   guessing at screen width, this keys off the actual input device, so a
+   touchscreen laptop gets the larger controls too.
+   ========================================= */
+
+@media (pointer: coarse) {
+  :root {
+    --tt-control-sm: 2.5rem;
+    --tt-control-md: 2.75rem;
+    --tt-control-lg: 3rem;
+  }
+}
+
+/* =========================================
+   Reduced motion
+
+   One block for the whole library. Every transition and every one-shot
+   entrance reads a duration token, so zeroing the tokens here stops all of
+   them at once. This replaced 31 separate @media blocks scattered through
+   the components, which was 31 chances to forget one and one more thing to
+   remember on every new component.
+
+   1ms rather than 0ms, deliberately. A zero-duration transition never fires
+   transitionend, so any code that waits on one hangs forever. Nothing in the
+   library does that today; this costs nothing and means it stays safe when
+   something eventually does.
+
+   Two things are not zeroed:
+
+   - --tt-duration-spin is slowed, not stopped. A spinner is feedback, not
+     decoration, and freezing it says "hung" rather than "working", which is
+     worse for everyone including the people this query is for.
+   - The skeleton shimmer cannot be handled from a token at all: an infinite
+     animation at 1ms strobes rather than stops. tt-skeleton keeps its own
+     block and switches the shimmer off properly.
+
+   The spring is swapped rather than shortened. Overshoot is precisely the
+   movement being asked about, so a 1ms spring is still the wrong shape.
+   ========================================= */
+
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --tt-duration-fast: 1ms;
+    --tt-duration-normal: 1ms;
+    --tt-duration-slow: 1ms;
+    --tt-duration-slower: 1ms;
+
+    --tt-ease-spring: var(--tt-ease-out);
+
+    --tt-duration-spin: 1.6s;
+  }
+}