@spree/dashboard-ui 0.13.1 → 1.0.0-beta.1

package/src/styles.css

@@ -29,78 +29,387 @@
    Adapted from spree/admin Tailwind design system to match look & feel.
    ============================================================================ */
 
+/* Brand palette.
+ *
+ * The two themes take different neutral families, for the reason each one's
+ * large areas need.
+ *
+ * Light mode is Tailwind's `stone` ramp — the same lightness ladder as
+ * `neutral`, carrying a trace of warm chroma (0.001–0.013) rather than none.
+ * Far too little to read as a colour: it stops large white and grey areas
+ * looking blue-cold, and leaves the blue accent still the only thing in the
+ * palette that reads as interaction.
+ *
+ * Dark mode is a true zero-chroma grey (Geist's own neutral, and shadcn's
+ * default). The warm tint that flatters a white sheet works against a
+ * near-black one: at these lightnesses the same chroma stops reading as
+ * warmth and starts reading as a brown cast over the whole screen. Keep dark
+ * neutrals at chroma 0 — the hue channel there is noise, not decoration.
+ *
+ * In both themes the lightness decisions below are load-bearing for contrast,
+ * and none of them move. Light mode's values are stone's chroma and hue
+ * interpolated onto those lightnesses rather than snapped to the nearest ramp
+ * step; dark mode's are the same lightnesses with the chroma dropped.
+ *
+ * Primary CTAs stay near-black rather than adopting the site's blue button:
+ * in a dense admin UI the blue has to stay meaningful as a selection and
+ * focus signal, which it stops being once every page renders a saturated
+ * blue button. */
 :root {
-  /* Vercel/Geist-style neutral palette — pure greyscale. */
-  --background: oklch(0.985 0 0); /* #fafafa — gray-50 */
-  --foreground: oklch(0.145 0 0); /* near-black */
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0 0 0); /* pure black for primary CTAs */
-  --primary-foreground: oklch(1 0 0);
-  --secondary: oklch(0.97 0 0); /* #f5f5f5 — gray-100 */
-  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.985 0 0); /* #fafafa — gray-50 */
-  --muted-foreground: oklch(0.4685 0 0); /* #737373 — Vercel #666 */
-  --accent: oklch(0.97 0 0); /* #f5f5f5 */
-  --accent-foreground: oklch(0.205 0 0);
+  /* Light-mode neutrals are Tailwind's **stone** scale — a warm grey. Every
+     neutral here is either an exact stone step (labelled with it) or, where a
+     step could not meet a contrast requirement, a value on stone's own hue so
+     it belongs to the same family. Never mix another warm-neutral ramp (zinc,
+     slate, neutral) into THIS block: two families read as a colour cast on
+     whichever surface is the odd one out. Dark mode deliberately uses a
+     different family — see the note on `.dark`.
+
+     Tokens that must equal another token point at it with var() rather than
+     repeating its value, so the two cannot drift. */
+  --brand-blue: oklch(0.5967 0.2212 258); /* #0077ff — site accent */
+  --brand-blue-strong: oklch(0.5106 0.1868 257.7); /* #0060ce — site link hover */
+  /* Links in body copy. The plain accent measures 4.13:1 on white and 4.21:1
+     on the dark card — under 4.5 in BOTH themes — so a link takes its own
+     step rather than the accent. */
+  --link: oklch(0.5106 0.1868 257.7);
+  --link-hover: oklch(0.44 0.16 257.7);
+
+  --background: oklch(98.5% 0.001 106.423); /* stone-50 — chrome one step below white */
+  --foreground: oklch(14.7% 0.004 49.25); /* stone-950 */
+  --card: oklch(1 0 0); /* #ffffff — cards and inputs read as raised */
+  --card-foreground: var(--foreground);
+  --popover: var(--card);
+  --popover-foreground: var(--foreground);
+  --primary: var(--foreground); /* stone-950 — near-black primary CTAs */
+  --primary-foreground: var(--card);
+  /* Filled surfaces (table headers, badges, secondary buttons) read as a
+     whisper against the white card rather than a distinct band. */
+  --secondary: oklch(97% 0.001 106.424); /* stone-100 */
+  --secondary-foreground: var(--foreground);
+  --muted: var(--background);
+  /* Between stone-500 and -600, on stone's hue. Clears 4.5:1 against every
+     surface this text lands on — white card 5.19:1, page 4.97:1, secondary and
+     accent 4.75:1 — where the stone-500 step itself measures 4.41:1 on
+     secondary and fails. Dark mode takes stone-400 for the same reason. */
+  --muted-foreground: oklch(0.535 0.0127 58.071);
+  /* Hover/highlight for menu items and table rows, and the same stone-100 as
+     --secondary: a hover and a filled surface are the same weight of "one step
+     off the card", so they are one value rather than two that drift apart.
+     stone-200 was tried and reads as a pressed state on a white surface.
+
+     It is also the lightest step that keeps --muted-foreground legible on it:
+     the previous bespoke grey measured 4.47:1, just under the 4.5 this file
+     claims everywhere else. The sidebar shares it via --sidebar-accent. */
+  --accent: var(--secondary);
+  --accent-foreground: var(--foreground);
+  /* The *selected* state, and any control that must read as raised while
+     sitting on an already-accented surface: the sidebar's active nav item, a
+     ghost button hovered inside a hovered table row.
+
+     --accent cannot do this job. It is the hover/fill surface, so it has to
+     stay light enough for --muted-foreground to clear 4.5:1 on it — which
+     leaves it at 1.04:1 against the page, invisible as a selection. Two
+     different jobs, two tokens. Nothing but near-black text lands on this
+     one, so it is free to be darker.
+
+     Interpolated on stone's hue rather than snapped to a step (like
+     --accent-hover and --border-control): stone-200 read heavier than a
+     selection needs to, and stone-100 is --accent itself, which would collapse
+     the two tokens into one and leave a hovered item darker than a selected
+     one. This sits between them. */
+  --accent-strong: oklch(94.7% 0.002 56);
+  /* Hover, between --accent and --accent-strong so a nav item has somewhere to
+     go on hover *and* somewhere further to go when it is the active one.
+     Interpolated on stone's hue rather than snapped — deliberate, like
+     --border-control.
+
+     --accent is too light to be a hover here: on the sidebar's ground (the
+     page colour, not a card) it measures 1.04:1, which is invisible. */
+  --accent-hover: oklch(95.9% 0.002 56);
+  /* The active item hovered. It darkens rather than lightening: a selected
+     row that goes paler under the pointer reads as being deselected. Stays one
+     step under --accent-strong, or the two land on the same value and a
+     selected item stops responding to the pointer. */
+  --accent-strong-hover: oklch(92.3% 0.003 48.717); /* stone-200 */
   --destructive: oklch(0.58 0.22 27); /* red-600 */
-  --destructive-foreground: oklch(1 0 0); /* #ffffff */
-  --border: oklch(0.928 0 0); /* #eaeaea — Vercel border */
-  --input: oklch(0.928 0 0);
-  --ring: oklch(0.546 0.245 262.881); /* blue-500 focus ring (UNCHANGED) */
-  --chart-1: oklch(0.809 0.105 251.813);
-  --chart-2: oklch(0.623 0.214 259.815);
-  --chart-3: oklch(0.546 0.245 262.881);
-  --chart-4: oklch(0.488 0.243 264.376);
-  --chart-5: oklch(0.424 0.199 265.638);
+  --destructive-foreground: var(--card);
+  /* The full-strength rule colour. Nothing styles with it directly — the two
+     tokens below are both a share of it, so neither compounds the other's
+     reduction.
+
+     stone-200. This is the floor for a hairline: anything lighter stops
+     holding a container's edge on a white sheet, and the row rules of a long
+     table start to disappear before the frame around them does. */
+  --border-base: oklch(92.3% 0.003 48.717); /* stone-200 */
+  /* A structural edge — the content sheet, a dialog, a dropdown, a popover, a
+     table's frame. These are surfaces that float above the page or divide it,
+     and their edge is what says where one ends and the next begins, so it
+     carries the base at full strength. Cards take --border-card instead.
+
+     Carries its strength in the token, so call sites never restate it — an
+     `/80` utility would compound on top of this. */
+  --border: var(--border-base);
+  /* A card's own edge. Softer than a structural one: a card is a region OF the
+     sheet rather than a surface floating above it, so its edge only has to
+     suggest where the region ends. Used by `CardContent`'s frame; a dialog or
+     the sheet itself must keep --border, or the shell loses its outline. */
+  --border-card: color-mix(in srgb, var(--border-base) 50%, transparent);
+  /* Dividers *inside* a container — card header/footer splits, dialog and
+     sheet separators, table row rules.
+
+     Half of the BASE, not of --border, so it is a true 50% rather than one
+     token compounding the other. The same value as --border-card, so a card's
+     edge and the rules dividing its contents are one hairline weight.
+
+     Resolved to a real colour rather than an opacity utility so it also works
+     inside arbitrary values such as the sticky table header's inset shadow,
+     where `/50` has no effect. */
+  --border-subtle: color-mix(in srgb, var(--border-base) 50%, transparent);
+  /* A mark that has to hold its own against the surface with nothing else
+     drawing it — the bar of a scrollbar, the focus ring the skip link draws.
+     WCAG 1.4.11 asks 3:1 of exactly that case: 3.25:1 on the white card,
+     3.11:1 on the page ground, the lightest step that clears the minimum on
+     both.
+
+     No form control uses this. Fields, selects, comboboxes, checkboxes and
+     radios all take `--border` with `--shadow-xs`, the same pair the outline
+     button wears, so every bordered control on a card reads as one family.
+
+     A tinted fill on fields was tried and reverted. Disabled fields are
+     `--muted`, so any resting tint either collides with that meaning or (as
+     happened) lands darker than it and inverts the signal outright. On this
+     palette the enabled state has to stay on the card colour. */
+  --border-control: oklch(86.9% 0.005 56.366);
+  /* A card that *holds* other records — an order's fulfillments, its returns,
+     its claims — rather than holding content directly.
+
+     It takes the page's own colour, so the card contributes a border and a
+     title strip and nothing else: the white records inside are the only thing
+     with a surface, and they carry all the weight. Points at --background
+     rather than repeating its value, so the two cannot drift apart.
+
+     Giving the container a fill of its own was tried and reads worse — it
+     tints a large area to say something the border already says, and the
+     records lose contrast against it. Sitting at the page colour is safe
+     because the card still draws its 1px border at 1.21:1; the fill was never
+     carrying that boundary.
+
+     Records inside stay on `--card`, so what a merchant reads is the raised,
+     white thing. Pushing them into a grey well instead reads as content that
+     has been demoted, which is backwards — the fulfillment is the point of
+     the card, not its chrome. */
+  --card-container: var(--background);
+  /* Light mode's raised record is simply the card surface. */
+  --nested-raised: var(--card);
+  /* The recessed well a raised thing sits in — a tab strip's track, a
+     segmented control. Paired with --nested-raised: the track always sits one
+     step under it, which is why the two themes name different tokens rather
+     than sharing one. Light steps down from white to stone-100. */
+  --track-recessed: var(--accent);
+  --input: color-mix(in srgb, var(--border-base) 80%, transparent);
+  --ring: var(--brand-blue);
+  --chart-1: oklch(0.7663 0.1067 254.4);
+  --chart-2: oklch(0.5967 0.2212 258); /* brand blue */
+  --chart-3: oklch(0.5106 0.1868 257.7);
+  --chart-4: oklch(0.4232 0.1524 257.4);
+  --chart-5: oklch(0.3358 0.118 257.1);
   --radius: 0.75rem;
 
-  /* Sidebar — slightly muted off-white surface. */
-  --sidebar: oklch(0.985 0 0); /* #fafafa */
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0 0 0);
-  --sidebar-primary-foreground: oklch(1 0 0);
-  --sidebar-accent: oklch(0.945 0 0); /* slightly darker than sidebar bg for hover */
-  --sidebar-accent-foreground: oklch(0.145 0 0);
-  --sidebar-border: oklch(0.928 0 0);
-  --sidebar-ring: oklch(0.546 0.245 262.881); /* blue-500 focus ring (UNCHANGED) */
+  /* Sidebar — the ground the content sheet is inset into, so it sits one step
+     back from the page rather than level with it. That difference is what
+     makes the sheet's rounded edge and shadow read at all: when the two were
+     the same colour the inset was invisible. Everything else still points at
+     the page token it matches, so the rest cannot drift. */
+  --sidebar: oklch(97% 0.001 106.424); /* stone-100 */
+  --sidebar-foreground: oklch(26.8% 0.007 34.298);
+  --sidebar-primary: var(--primary);
+  --sidebar-primary-foreground: var(--primary-foreground);
+  --sidebar-accent: var(--accent);
+  --sidebar-accent-foreground: var(--accent-foreground);
+  --sidebar-accent-strong: var(--accent-strong);
+  --sidebar-accent-hover: var(--accent-strong);
+  --sidebar-accent-strong-hover: var(--accent-strong-hover);
+  /* Matches the rule the top bar draws, so every edge framing the shell —
+     the sidebar's, the top bar's, the settings header's — is one weight. */
+  --sidebar-border: color-mix(in srgb, var(--border) 75%, transparent);
+  --sidebar-ring: var(--ring);
+
+  /* Status ramps, following Vercel's Geist colour system.
+   *
+   * Geist gives each step of a ramp a fixed job: low steps are component
+   * backgrounds, mid steps borders, high steps text and icons. Its badges pair
+   * a light tint with a dark reading colour from the same hue, which is what
+   * these trios reproduce — a fill light enough to sit on a white card, under
+   * text that is a true text colour rather than the fill darkened.
+   *
+   * The values come from Tailwind's own palette rather than Geist's raw
+   * numbers: each step below is the closest match in oklch to its Geist
+   * counterpart, so the result reads the same while staying on the palette the
+   * rest of the dashboard is built from.
+   *
+   * Text lands on step 700 in every ramp, over a step-100 fill. Green is the
+   * one exception: Tailwind's green-700 is lighter than its siblings and lands
+   * at 4.497:1 on green-100, a hair under the 4.5:1 that 12px badge text
+   * needs, so green's fill drops one step to clear it. The difference is
+   * invisible beside the other three but keeps the whole set measurably legible
+   * rather than passing only by eye. */
+  --status-green-bg: var(--color-green-100);
+  --status-green-border: var(--color-green-200);
+  --status-green-fg: var(--color-green-700);
+
+  --status-amber-bg: var(--color-amber-100);
+  --status-amber-border: var(--color-amber-200);
+  --status-amber-fg: var(--color-amber-700);
+
+  --status-red-bg: var(--color-red-100);
+  --status-red-border: var(--color-red-200);
+  --status-red-fg: var(--color-red-700);
+
+  /* Blue reads off the sky ramp rather than Tailwind's blue: `--color-blue-500`
+     and `-600` are remapped to the brand accent further down, so a badge built
+     on those steps would read as a brand mark rather than a neutral status. */
+  --status-blue-bg: var(--color-sky-100);
+  --status-blue-border: var(--color-sky-200);
+  --status-blue-fg: var(--color-sky-700);
 }
 
 .dark {
-  /* Vercel-style "true black" base, with surfaces stepping up in lightness. */
-  --background: oklch(0 0 0); /* #000000 */
-  --foreground: oklch(0.95 0 0); /* #ededed */
-  --card: oklch(0.145 0 0); /* #0a0a0a — surface */
-  --card-foreground: oklch(0.95 0 0);
-  --popover: oklch(0.145 0 0);
-  --popover-foreground: oklch(0.95 0 0);
-  --primary: oklch(0.95 0 0); /* light-on-dark primary */
-  --primary-foreground: oklch(0 0 0);
-  --secondary: oklch(0.205 0 0); /* #1a1a1a */
-  --secondary-foreground: oklch(0.95 0 0);
-  --muted: oklch(0.18 0 0); /* #161616 */
-  --muted-foreground: oklch(0.62 0 0); /* #888 */
-  --accent: oklch(0.27 0 0); /* hover surface */
-  --accent-foreground: oklch(0.95 0 0);
+  /* Vercel-style "true black" base, with surfaces stepping up in lightness.
+   *
+   * Every neutral below is zero-chroma — a true grey, not light mode's warm
+   * stone. See the palette note at the top of this file for why the two
+   * themes split. The lightness ladder is unchanged from the warm version;
+   * only the tint was removed.
+   *
+   * Dark surfaces step in roughly 4-5 points of OKLCH lightness, not the 1-2
+   * light mode uses. Near-black compresses perceived difference, so a step
+   * that reads clearly on white disappears down here: an earlier version of
+   * this ramp had sidebar, muted, background and card inside a 3.5-point band
+   * and the whole middle of the screen read as one flat surface, which in turn
+   * made the one boundary that was visible — the sidebar's — look like the
+   * sheet had been lit. Reference dark dashboards space adjacent surfaces
+   * 5-6 points apart for the same reason.
+   *
+   * The ladder, ground upward: sidebar 14 / muted + background 17 / card 21.6
+   * / secondary + nested-raised 25 / accent 29.5 / accent-hover 33 /
+   * accent-strong 38. --card is the anchor, since the inset sheet is the
+   * surface a merchant actually reads; keep the gaps if you move anything. */
+  --background: oklch(17% 0 0);
+  --foreground: oklch(95% 0 0);
+  --card: oklch(21.6% 0 0);
+  --card-foreground: var(--foreground);
+  --popover: var(--card);
+  --popover-foreground: var(--foreground);
+  /* Mirrors the light theme's primary: there a navy fill carries white text,
+     so here the two swap rather than the button taking on its own colour. */
+  --primary: var(--foreground);
+  --primary-foreground: oklch(14.7% 0 0); /* light theme's primary */
+  /* Above --card, but only just. These fill elements that sit *on* a card
+     (combobox chips, badges, secondary buttons, table header rows), so a value
+     at or under the card's lightness erases them — while too big a step reads
+     as a bright band across a full-width table header. Dark mode raises where
+     light mode lowers, since a surface reads as raised by getting lighter. */
+  --secondary: oklch(25% 0 0);
+  --secondary-foreground: var(--foreground);
+  --muted: oklch(17% 0 0);
+  /* At stone-400's lightness. The old value failed 4.5:1 on --accent
+     (4.20:1); this clears every dark ground, the accent included. */
+  --muted-foreground: oklch(70.9% 0 0);
+  --accent: oklch(29.5% 0 0);
+  --accent-foreground: var(--foreground);
+  --accent-strong: oklch(38% 0 0);
+  --accent-hover: oklch(33% 0 0);
+  --accent-strong-hover: oklch(44.4% 0 0);
   --destructive: oklch(0.704 0.191 22.216);
-  --border: oklch(1 0 0 / 12%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.552 0.016 285); /* same blue ring as light, for focus parity */
+  /* A white veil over whatever surface it crosses, so one value works on the
+     page ground and the raised sheet alike. Both shares below are half of it,
+     as in light mode, so a container's edge and the rules inside it are one
+     hairline weight. */
+  --border-base: oklch(1 0 0 / 16%);
+  --border: var(--border-base);
+  --border-card: color-mix(in srgb, var(--border-base) 50%, transparent);
+  --border-subtle: color-mix(in srgb, var(--border-base) 50%, transparent);
+  /* Light mode darkens the control edge away from the card; dark mode lightens
+     it. Not the light value inverted — measured on this theme's own surfaces:
+     3.22:1 on the card, 3.34:1 on the page ground. */
+  --border-control: oklch(52% 0 0);
+  /* Same arrangement as light — container at the page colour, records raised
+     above it. 1.20:1 between them here. Records take `--nested-raised` rather
+     than `--card`: the card token is a step above the page, which is where the
+     container would sit if it had a fill of its own. */
+  --card-container: var(--background);
+  --nested-raised: oklch(25% 0 0);
+  /* Not --accent here: dark mode's accent is lighter than every raised
+     surface, so a shared token would put the selected tab below its own
+     track. --muted is the step under --nested-raised. */
+  --track-recessed: var(--muted);
+  --input: color-mix(in srgb, var(--border-base) 80%, transparent);
+  /* The same blue as light mode, lifted for a dark ground. The previous value
+     was a near-grey (chroma 0.016) despite claiming parity, so a focused field
+     in dark mode drew a grey halo and lost the one signal that says "this is
+     where typing goes". */
+  --ring: oklch(0.68 0.19 258);
+  --link: oklch(0.7 0.16 258);
+  --link-hover: oklch(0.78 0.14 258);
   --chart-1: oklch(0.809 0.105 251.813);
   --chart-2: oklch(0.623 0.214 259.815);
   --chart-3: oklch(0.546 0.245 262.881);
   --chart-4: oklch(0.488 0.243 264.376);
   --chart-5: oklch(0.424 0.199 265.638);
-  --sidebar: oklch(0.145 0 0); /* #0a0a0a — slightly elevated from background */
-  --sidebar-foreground: oklch(0.95 0 0);
-  --sidebar-primary: oklch(0.95 0 0);
-  --sidebar-primary-foreground: oklch(0 0 0);
-  --sidebar-accent: oklch(0.27 0 0);
-  --sidebar-accent-foreground: oklch(0.95 0 0);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.708 0 0);
+  /* One step back from the page, as in light mode — see the note there. Darker
+     rather than lighter: the sheet is the raised surface, so the ground behind
+     it recedes.
+
+     Measured against --card, not --background: the shell renders the sidebar's
+     `inset` variant, so the sheet beside it is the card surface and that
+     pairing is what a merchant actually sees.
+
+     The sheet looking "too bright" was never this token being too dark — it
+     was the four surfaces above it sitting within half a point of each other,
+     so the sidebar edge was the only visible boundary on the screen and it
+     carried the whole contrast budget alone. Widening those steps (see the
+     ramp note on --background) fixes it; this stays low so the ground still
+     recedes. */
+  --sidebar: oklch(14% 0 0);
+  --sidebar-foreground: var(--foreground);
+  --sidebar-primary: var(--primary);
+  --sidebar-primary-foreground: var(--primary-foreground);
+  --sidebar-accent: var(--accent);
+  --sidebar-accent-foreground: var(--accent-foreground);
+  --sidebar-accent-strong: var(--accent-strong);
+  --sidebar-accent-hover: var(--accent-hover);
+  --sidebar-accent-strong-hover: var(--accent-strong-hover);
+  /* Matches the rule the top bar draws, so every edge framing the shell —
+     the sidebar's, the top bar's, the settings header's — is one weight. */
+  --sidebar-border: color-mix(in srgb, var(--border) 75%, transparent);
+  --sidebar-ring: var(--ring);
+
+  /* Geist's dark ramps are not the light ones dimmed — the fill becomes a deep
+     shade of the hue and the text becomes brighter than its light-mode
+     counterpart. That inversion is why a tint expressed as an opacity over
+     black goes muddy: these are separate colours, not one hue at lower alpha.
+     Border and fill share a step here, since a deep fill already separates
+     from a black card and a lighter rule around it would draw more attention
+     than the badge itself.
+
+     Text sits on step 300 across all four ramps — the brightest of the steps
+     Geist treats as text, and the only one that clears 4.5:1 on a 900 fill for
+     every hue (red and sky fall under it by step 400). */
+  --status-green-bg: var(--color-green-900);
+  --status-green-border: var(--color-green-900);
+  --status-green-fg: var(--color-green-300);
+
+  --status-amber-bg: var(--color-amber-900);
+  --status-amber-border: var(--color-amber-900);
+  --status-amber-fg: var(--color-amber-300);
+
+  --status-red-bg: var(--color-red-900);
+  --status-red-border: var(--color-red-900);
+  --status-red-fg: var(--color-red-300);
+
+  --status-blue-bg: var(--color-sky-900);
+  --status-blue-border: var(--color-sky-900);
+  --status-blue-fg: var(--color-sky-300);
 }
 
 @theme inline {
@@ -117,19 +426,67 @@
   --text-3xl: 1.75rem;
   --text-4xl: 2rem;
 
-  /* Shadows — subtle like Rails admin */
-  --shadow-xs: rgba(43, 34, 51, 0.05) 0px 1px 1px;
-  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  /* The resting lift on a control that sits ON a surface — a field, a button,
+     a card. Measured off a reference: the ground under a field's bottom edge
+     recovers over about 2px and nothing spreads above it or to the sides, so
+     this is purely directional, with no ambient layer. */
+  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  /* The same lift, under its Tailwind-conventional name. Points at the token
+     above rather than repeating the value, so the two cannot drift. */
+  --shadow-sm: var(--shadow-xs);
   --shadow-nav: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.04) 0px 0px 0px 1px, rgba(0, 0, 0, 0.04) 0px 1px 2px -1px, rgba(0, 0, 0, 0.02) 0px 2px 4px 0px;
 
+  /* Floating surfaces — menus, popovers, dialogs, sheets. Wide and faint
+     rather than tight and dark: the job is to say "this is above the page",
+     which a large soft spread does without drawing an edge of its own. A
+     hairline ring carries the actual boundary. */
+  --shadow-md: 0 4px 16px -4px rgb(0 0 0 / 0.08), 0 1px 4px -2px rgb(0 0 0 / 0.05);
+  --shadow-lg: 0 8px 32px -8px rgb(0 0 0 / 0.10), 0 2px 8px -4px rgb(0 0 0 / 0.06);
+
+  /* Radius scale, remapped one step rounder than Tailwind's defaults.
+     Corner radius is most of what reads as "soft", and remapping the scale
+     reaches every `rounded-lg`/`rounded-xl` already written in the components
+     — including the `calc(var(--radius-2xl) - 1px)` a card header derives its
+     own corner from, which would drift out of alignment if the components
+     were each edited by hand instead. */
+  --radius-sm: 0.4rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.625rem;
+  --radius-xl: 0.875rem;
+  --radius-2xl: 1.125rem;
+
   /* Sidebar + header tokens */
-  --spacing-sidebar-width: 220px;
-  --spacing-header-height: 58px;
+  --spacing-sidebar-width: 240px;
+  /* The offset pinned bands (a table's column row, the bulk-action bar) sit
+     below. There is no top bar, so the only chrome above the scrolling content
+     is a page's own `PageHeader` — which measures itself and overwrites this
+     at runtime. `0px` is therefore the honest default: it is what a page with
+     no header should use, and a non-zero constant here would strand the column
+     row that far down on every one of them. */
+  --spacing-header-height: 0px;
+  /* The height of a rail header row — the store/seller switcher, the settings
+     rail's title. A fixed constant, deliberately NOT the sticky offset above:
+     that one is measured and can legitimately be zero, which would collapse
+     these rows to nothing. */
+  --spacing-rail-header-height: 42px;
+
+  /* Easing. Overrides Tailwind's built-in `ease-out`, so every `ease-out`
+     utility in the app picks this up: the stock curve is too weak to read as
+     deliberate on anything larger than a colour change. `ease-out` is the
+     right default for UI — it starts fast, so the moment the user is watching
+     happens immediately. Movement across the screen wants `ease-in-out`
+     instead; `ease-in` is wrong for UI at any size, since it delays that
+     same moment. */
+  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
+  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
 
   /* Color mappings */
   --color-sidebar-ring: var(--sidebar-ring);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent-strong: var(--sidebar-accent-strong);
+  --color-sidebar-accent-hover: var(--sidebar-accent-hover);
+  --color-sidebar-accent-strong-hover: var(--sidebar-accent-strong-hover);
   --color-sidebar-accent: var(--sidebar-accent);
   --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
   --color-sidebar-primary: var(--sidebar-primary);
@@ -143,9 +500,18 @@
   --color-ring: var(--ring);
   --color-input: var(--input);
   --color-border: var(--border);
+  --color-border-card: var(--border-card);
+  --color-border-subtle: var(--border-subtle);
+  --color-border-control: var(--border-control);
+  --color-card-container: var(--card-container);
+  --color-nested-raised: var(--nested-raised);
+  --color-track-recessed: var(--track-recessed);
   --color-destructive: var(--destructive);
   --color-destructive-foreground: var(--destructive-foreground);
   --color-accent-foreground: var(--accent-foreground);
+  --color-accent-strong: var(--accent-strong);
+  --color-accent-hover: var(--accent-hover);
+  --color-accent-strong-hover: var(--accent-strong-hover);
   --color-accent: var(--accent);
   --color-muted-foreground: var(--muted-foreground);
   --color-muted: var(--muted);
@@ -160,18 +526,49 @@
   --color-foreground: var(--foreground);
   --color-background: var(--background);
 
-  /* Spree status colors — for badges & alerts */
-  --color-success: var(--color-green-500);
-  --color-warning: var(--color-yellow-500);
-  --color-info: var(--color-blue-500);
-  --color-danger: var(--color-red-500);
+  /* Status colours — badges, alerts and any other success/warning/error mark.
+     Each is a background/border/foreground trio rather than a single hue, so a
+     component states which role it wants instead of picking an opacity and
+     hoping it lands. This replaces the older single-value `--color-success`
+     family, which had to be re-tinted at every call site and was bypassed by
+     most of them for exactly that reason. */
+  --color-success: var(--status-green-fg);
+  --color-success-bg: var(--status-green-bg);
+  --color-success-border: var(--status-green-border);
+
+  --color-warning: var(--status-amber-fg);
+  --color-warning-bg: var(--status-amber-bg);
+  --color-warning-border: var(--status-amber-border);
+
+  --color-danger: var(--status-red-fg);
+  --color-danger-bg: var(--status-red-bg);
+  --color-danger-border: var(--status-red-border);
+
+  --color-info: var(--status-blue-fg);
+  --color-info-bg: var(--status-blue-bg);
+  --color-info-border: var(--status-blue-border);
+
+  /* Re-point Tailwind's blue ramp at the brand accent. Interactive blue is
+     used throughout the component layer for focus borders, checked states and
+     selected calendar days (`border-blue-500`, `bg-blue-500/15`, …); mapping
+     the palette entry keeps every one of those on the site's accent without
+     each component having to know the token name. Only the interactive steps
+     are overridden — the rest of the ramp keeps Tailwind's values for
+     incidental use such as charts and illustrations. */
+  --color-blue-500: var(--brand-blue);
+  --color-blue-600: var(--brand-blue-strong);
+  --color-link: var(--link);
+  --color-link-hover: var(--link-hover);
 }
 
 @utility focus-ring {
   /* Unified focus treatment — matches the form-input focus (soft blue glow,
      no hard outline). Apply to buttons, links, menu triggers, and any other
      interactive control so every focusable element looks the same on
-     keyboard focus. Inputs/textarea/select keep their inline equivalent. */
+     keyboard focus. Text fields spell the same treatment out inline with a
+     `focus:` variant rather than `focus-visible:` — clicking into a field puts
+     the caret there, so it must show it owns the keyboard even when the focus
+     came from a pointer. */
   outline: none;
   &:focus-visible {
     border-color: var(--ring);
@@ -209,14 +606,78 @@
   }
 }
 
+@utility quiet-scrollbar {
+  /* Like `themed-scrollbar`, but the thumb stays invisible until the element
+     is hovered. For navigation panels and other chrome, where a permanently
+     visible track draws a heavy stripe down an otherwise calm surface. The
+     gutter is reserved either way, so revealing the thumb never reflows the
+     content. */
+  /* `scrollbar-color` is not animatable, so the Firefox path snaps between
+     states; the webkit thumb below fades. Both are acceptable — the reveal is
+     incidental, not something the user is watching for. */
+  scrollbar-color: transparent transparent;
+  scrollbar-width: thin;
+
+  &:hover,
+  &:focus-within {
+    scrollbar-color: var(--scrollbar-thumb) transparent;
+  }
+
+  &::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  &::-webkit-scrollbar-thumb {
+    background-color: transparent;
+    border: 2px solid transparent;
+    border-radius: 9999px;
+    background-clip: padding-box;
+    transition: background-color 150ms ease-out;
+  }
+  &:hover::-webkit-scrollbar-thumb,
+  &:focus-within::-webkit-scrollbar-thumb {
+    background-color: var(--scrollbar-thumb);
+  }
+  &::-webkit-scrollbar-thumb:hover {
+    background-color: var(--scrollbar-thumb-hover);
+  }
+  &::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+}
+
+/* A bare `divide-y`/`divide-x` is a rule *inside* a container — a list's row
+   splits, a stacked set of fields — which is exactly what --border-subtle is
+   for.
+
+   Tailwind v4's divide utilities set only the border WIDTH on the children;
+   their colour comes from `border-color`, which the universal `*` rule in the
+   base layer sets to --border. This has to live in the `utilities` layer to
+   outrank that — layer order decides before specificity does — and has to
+   match the same children the utilities do.
+
+   The WHOLE selector goes inside `:where()`, not just the parent: `:not()`
+   carries the specificity of its argument, so leaving `:not(:last-child)`
+   outside gave this rule a pseudo-class's weight and let it beat an explicit
+   `divide-border` at the call site — the opposite of the intent. Inside
+   `:where()` the rule has zero specificity and any named colour wins. */
+@layer utilities {
+  :where(.divide-y > :not(:last-child), .divide-x > :not(:last-child)) {
+    border-color: var(--border-subtle);
+  }
+}
+
 @layer base {
   :root {
-    --scrollbar-thumb: oklch(0.7 0 0); /* gray-400-ish */
-    --scrollbar-thumb-hover: oklch(0.55 0 0);
+    --scrollbar-thumb: oklch(86.9% 0.005 56.366); /* stone-300 */
+    --scrollbar-thumb-hover: oklch(70.9% 0.01 56.259); /* stone-400 */
   }
   .dark {
-    --scrollbar-thumb: oklch(0.35 0 0); /* zinc-700-ish */
-    --scrollbar-thumb-hover: oklch(0.45 0 0);
+    --scrollbar-thumb: oklch(37.4% 0.01 67.558); /* stone-700 */
+    --scrollbar-thumb-hover: oklch(44.4% 0.011 73.639); /* stone-600 */
   }
 
   /* Themed scrollbar inside floating surfaces only — page scrollbar stays
@@ -270,10 +731,99 @@
     outline: none;
   }
 
+  /* iOS Safari zooms the viewport when a focused text field's font is under
+   * 16px, and this app's `text-base` is 14px — so tapping any input on an
+   * iPhone jumped the page and left it zoomed. Raise the rendered size on
+   * coarse pointers only; the desktop density is unchanged.
+   *
+   * `pointer: coarse` rather than a width breakpoint: this is about the input
+   * method, and a small window on a laptop should keep the compact type. */
+  /* Nav rows and menu labels read small on a phone at the desktop 14px.
+   * 16px is the size the platform uses for a primary list row. Sizing is left
+   * to the components themselves — buttons carry their own touch targets. */
+  @media (pointer: coarse) {
+    [data-slot='sidebar-menu-button'],
+    [data-slot='sidebar-menu-sub-button'],
+    [data-slot='dropdown-menu-item'],
+    [data-slot='select-item'],
+    [data-slot='command-item'],
+    [data-slot='filter-panel-item'] {
+      font-size: 1rem !important;
+    }
+  }
+
+  /* Menu and listbox rows are sized for a pointer — roughly 29px, against a
+   * 44pt touch minimum — so on a phone they are hard to hit and easy to hit
+   * wrongly. Raise them on coarse pointers only; the dense desktop menus are
+   * unchanged. Same `!important` reasoning as the font-size rule below: these
+   * rows carry utility classes that outrank any selector written here. */
+  @media (pointer: coarse) {
+    [data-slot='dropdown-menu-item'],
+    [data-slot='dropdown-menu-checkbox-item'],
+    [data-slot='dropdown-menu-radio-item'],
+    [data-slot='dropdown-menu-sub-trigger'],
+    [data-slot='select-item'],
+    [data-slot='command-item'],
+    [data-slot='combobox-item'],
+    /* The filter panel's own rows: fields, values and date presets. They are
+       hand-rolled buttons rather than menu items, so they carry this slot
+       deliberately to opt into the same touch sizing. */
+    [data-slot='filter-panel-item'] {
+      min-height: 2.75rem !important;
+    }
+
+    /* The rules above size what is *inside* an open menu; these size the
+     * control that opens it. A row's "⋮" is 24px, the sidebar toggle 28px and
+     * a table's sort/columns buttons 34px — each clears the 24px web minimum
+     * but sits well under what a finger wants, and the row action is both the
+     * smallest and the most repeated target on a list.
+     *
+     * Restricted to `button` because these slots wrap arbitrary children:
+     * `tooltip-trigger` in particular renders whatever it is given, including
+     * plain text, which must not be inflated to 44px. Width as well as height,
+     * since these are square icon buttons rather than full-width rows. */
+    button[data-slot='dropdown-menu-trigger'],
+    button[data-slot='sidebar-trigger'],
+    button[data-slot='popover-trigger'],
+    button[data-slot='tooltip-trigger'] {
+      min-height: 2.75rem !important;
+      min-width: 2.75rem !important;
+    }
+
+    /* The controls inside the filter panel's value step — the operator select,
+       its input and the buttons under them. They are sized for a pointer
+       (`size="sm"`, roughly 30px), which is below the touch minimum on the one
+       surface where a merchant is most likely to be on a phone. */
+    [data-slot='filter-panel-controls'] [data-slot='select-trigger'],
+    [data-slot='filter-panel-controls'] [data-slot='input'],
+    [data-slot='filter-panel-controls'] button {
+      min-height: 2.75rem !important;
+    }
+  }
+
+  @media (pointer: coarse) {
+    /* `!important` is load-bearing here, not laziness: these controls carry a
+     * `text-*` utility class, which outranks any element selector this rule
+     * could write. Without it the declaration loses to `.text-base` and the
+     * zoom still happens. The rule is deliberately narrow — one property, on
+     * text-entry controls, under a coarse pointer. */
+    input:not([type='checkbox']):not([type='radio']),
+    textarea,
+    select,
+    [contenteditable] {
+      font-size: max(1rem, var(--text-base)) !important;
+    }
+  }
+
   html {
     @apply font-sans antialiased;
     text-rendering: optimizeLegibility;
-    overflow-y: scroll;
+    /* No `overflow-y: scroll` here. It used to reserve the scrollbar gutter so
+     * the page would not jump sideways between a short route and a tall one,
+     * back when the document was what scrolled. The inset shell ended that:
+     * it is exactly viewport-height and scrolls inside itself, so the document
+     * can never overflow — and the reserved gutter became a permanently
+     * disabled second scrollbar sitting beside the sheet's real one. */
     /* Clip horizontal overflow at the document root so wide tables on mobile
      * can't widen the page. Must live on <html>, not <body>: `overflow-x:
      * hidden` on body makes `overflow-y` compute to `auto`, turning body into
@@ -335,4 +885,129 @@
       5px -5px,
       -5px 0;
   }
+
+  /* Tiptap editor surface. Tailwind preflight strips list markers, link
+     underlines and block margins, so lists, quotes and links would save
+     correctly but look like plain paragraphs until the storefront rendered
+     them. These rules restore that chrome only inside the editor. */
+  .tiptap {
+    min-height: 8rem;
+    outline: none;
+
+    & p.is-editor-empty:first-child::before {
+      color: var(--muted-foreground);
+      content: attr(data-placeholder);
+      float: left;
+      height: 0;
+      pointer-events: none;
+    }
+
+    & p {
+      margin-block: 0.5em;
+    }
+
+    & p:first-child {
+      margin-block-start: 0;
+    }
+
+    & p:last-child {
+      margin-block-end: 0;
+    }
+
+    & ul {
+      list-style-type: disc;
+      margin-block: 0.5em;
+      padding-inline-start: 1.5em;
+    }
+
+    & ol {
+      list-style-type: decimal;
+      margin-block: 0.5em;
+      padding-inline-start: 1.5em;
+    }
+
+    & ul ul,
+    & ol ul {
+      list-style-type: circle;
+      margin-block: 0.15em;
+    }
+
+    & ul ul ul,
+    & ol ul ul,
+    & ol ol ul,
+    & ul ol ul {
+      list-style-type: square;
+    }
+
+    & ol ol,
+    & ul ol {
+      list-style-type: lower-alpha;
+      margin-block: 0.15em;
+    }
+
+    & li {
+      margin-block: 0.15em;
+    }
+
+    & li > p {
+      margin-block: 0;
+    }
+
+    & blockquote {
+      border-inline-start: 3px solid var(--border);
+      color: var(--muted-foreground);
+      margin-block: 0.75em;
+      padding-inline-start: 1em;
+    }
+
+    & a {
+      color: var(--brand-blue);
+      text-decoration: underline;
+      text-underline-offset: 2px;
+    }
+
+    & img {
+      max-width: 100%;
+      border-radius: var(--radius-md);
+    }
+
+    & img.ProseMirror-selectednode {
+      outline: 2px solid var(--brand-blue);
+    }
+  }
+}
+
+/* Reduced motion. Deliberately NOT inside `@layer base`: unlayered CSS always
+   outranks layered CSS, so a base-layer rule loses to every `transition-*`
+   utility and the preference would be silently ignored. Unlayered and last in
+   the file, this wins on source order instead.
+
+   Movement is what the setting asks us to drop, so `transform`, `translate`
+   and `scale` are absent from the property list below — no element can animate
+   position or size however it is styled. Colour, shadow and opacity keep their
+   normal timing: they change appearance in place rather than moving anything,
+   and killing them too reads as broken rather than calm.
+
+   Components needing more than this — where suppressing a transition leaves a
+   jump rather than removing a movement — read the preference directly via
+   `usePrefersReducedMotion` and hold position, or opt out with a
+   `motion-reduce:` utility. */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    transition-property: color, background-color, border-color, box-shadow, opacity, fill, stroke;
+    transition-duration: 100ms;
+    /* Holds looping decorative animations at their first frame. */
+    animation-duration: 0.01ms;
+    animation-iteration-count: 1;
+    scroll-behavior: auto;
+  }
+
+  /* Spinners are the deliberate exception: they signal that work is ongoing
+     and have no static equivalent. */
+  .animate-spin {
+    animation-duration: 1s;
+    animation-iteration-count: infinite;
+  }
 }