/* Generated by dev/sync-design-system.mjs from recomaze-custom-platform app/app.css.
   The design tokens (@theme, :root, .dark), the glass utilities and the base rules,
   the latter scoped to #recomaze / .recomaze-ui and unlayered. Do not edit here. */

@theme {
  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif,
    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}
@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  /* The boundary and the fill are two different jobs. `--input` has to clear
     1.4.11's 3:1 as the edge of a text field; `--input-fill` is what
     `bg-input` paints - the Switch's unchecked track and the disabled field
     wash - and at 3:1 that track reads as ON. */
  --color-input-fill: var(--input-fill);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);

  /* The brand ramp is the same pink in both themes today. It sits here rather
     than in the static block anyway: that is visually a no-op now and turns
     the known dark-mode weakness (#b7007c is 3.13:1 as text on #09090b) into
     a one-line change later instead of a rebuild across 144 call sites. */
  --color-brand: var(--brand);
  --color-brand-ink: var(--brand-ink);
  --color-brand-hover: var(--brand-hover);
  --color-brand-dark: var(--brand-dark);
  --color-brand-darkest: var(--brand-darkest);
  --color-brand-light: var(--brand-light);
  --color-brand-tint: var(--brand-tint);
  --color-brand-glow: var(--brand-glow);
  --color-brand-ring: var(--brand-ring);

  /* Carried by 154 `text-success` / `text-warning` / `text-danger` /
     `text-info` sites. They were static, so they physically could not flip
     and shipped at 3.13:1 and 3.25:1 on a white page. */
  --color-success: var(--success);
  --color-warning: var(--warning);
  --color-danger: var(--danger);
  --color-info: var(--info);

  --color-surface: var(--surface);
  --color-surface-muted: var(--surface-muted);
  --color-surface-raised: var(--surface-raised);
  --color-surface-sunken: var(--surface-sunken);
  --color-surface-hover: var(--surface-hover);
  --color-surface-active: var(--surface-active);
  --color-page-bg: var(--page-bg);
  --color-track: var(--track);
  --color-dot-idle: var(--dot-idle);

  --color-text-primary: var(--text-primary);
  --color-text-secondary: var(--text-secondary);
  --color-text-reply: var(--text-reply);
  --color-text-muted: var(--text-muted);
  --color-text-light: var(--text-light);

  --color-border-default: var(--border-default);
  --color-border-light: var(--border-light);
  --color-border-strong: var(--border-strong);
  --color-border-solid: var(--border-solid);
  --color-border-pink: var(--border-pink);

  --color-nav-surface: var(--nav-surface);
  --color-nav-line: var(--nav-line);
  --color-nav-rule: var(--nav-rule);
  --color-nav-hover: var(--nav-hover);
  --color-nav-hover-strong: var(--nav-hover-strong);
  --color-nav-chip: var(--nav-chip);
  --color-nav-accent: var(--nav-accent);
  --color-nav-idle: var(--nav-idle);
  --color-nav-hint: var(--nav-hint);
  --color-nav-placeholder: var(--nav-placeholder);
  --color-nav-foreground: var(--nav-foreground);
  --color-nav-title: var(--nav-title);
  --color-nav-emphasis-border: var(--nav-emphasis-border);
  --color-nav-emphasis-fg: var(--nav-emphasis-fg);
  --color-nav-emphasis-icon: var(--nav-emphasis-icon);
  --color-nav-danger: var(--nav-danger);
  --color-nav-tag-aeo: var(--nav-tag-aeo);
  --color-nav-tag-geo: var(--nav-tag-geo);
  --color-nav-tag-neutral: var(--nav-tag-neutral);
  --color-nav-badge-beta: var(--nav-badge-beta);

  /* One definition for every "-400 ink on a -500/15 tint" pair in the app.
     The tints are built from the SATURATED hue rather than from the ink, or
     the wash goes muddy grey-green instead of staying a clean pastel. */
  --color-status-success-fg: var(--status-success-fg);
  --color-status-success-surface: var(--status-success-surface);
  --color-status-success-line: var(--status-success-line);
  --color-status-warning-fg: var(--status-warning-fg);
  --color-status-warning-surface: var(--status-warning-surface);
  --color-status-warning-line: var(--status-warning-line);
  --color-status-danger-fg: var(--status-danger-fg);
  --color-status-danger-surface: var(--status-danger-surface);
  --color-status-danger-line: var(--status-danger-line);
  --color-status-info-fg: var(--status-info-fg);
  --color-status-info-surface: var(--status-info-surface);
  --color-status-info-line: var(--status-info-line);
  --color-status-accent-fg: var(--status-accent-fg);
  --color-status-neutral-fg: var(--status-neutral-fg);

  --color-chart-tick: var(--chart-tick);
  --color-chart-grid: var(--chart-grid);
  --color-chart-cat-1: var(--chart-cat-1);
  --color-chart-cat-2: var(--chart-cat-2);
  --color-chart-cat-3: var(--chart-cat-3);
  --color-chart-cat-4: var(--chart-cat-4);
  --color-chart-cat-5: var(--chart-cat-5);
  --color-chart-cat-6: var(--chart-cat-6);
  --color-chart-cat-7: var(--chart-cat-7);
  --color-chart-cat-8: var(--chart-cat-8);
  --color-chart-cat-9: var(--chart-cat-9);
  --color-chart-cat-10: var(--chart-cat-10);

  --color-mark-ink: var(--mark-ink);
  --color-segment-empty: var(--segment-empty);

  --radius-sm: calc(var(--radius) * 0.6);
  --radius-md: calc(var(--radius) * 0.8);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) * 1.4);
  --radius-2xl: calc(var(--radius) * 1.8);
  --radius-3xl: calc(var(--radius) * 2.2);
  --radius-4xl: calc(var(--radius) * 2.6);
}

:root {
  /* Native chrome - scrollbar gutters, form controls, date pickers, autofill
     and the canvas painted before CSS lands - follows this, not our tokens.
     Nothing declared it before, which is why dark mode still renders bright
     native scrollbars and a white autofill wash. */
  color-scheme: light;
  --radius: 0.5rem;

  /* The ink ladder was fixed before the surfaces, and every rung is measured
     on the WORST ground it can legally land on (`--muted` #f1f1f4), not on
     white: 15.72 / 10.01 / 9.26 / 6.86 / 4.67. `--foreground` is #18181b and
     not #09090b because 19.9:1 pure black halates on a dense table at 13px
     while 17.72:1 does not - and it leaves #09090b free as `--vis-ink-strong`
     so tiptap bold still has somewhere above body to go. */
  --foreground: #18181b;
  --text-primary: #18181b;
  --text-reply: #3a3a41;
  --text-secondary: #3f3f46;
  --muted-foreground: #52525b;
  --text-muted: #52525b;
  /* NOT zinc-500 #71717a, which measures 4.29:1 on `--muted` and fails. */
  --text-light: #6b6b76;

  /* Elevation in light comes from a real fill step first, a hairline second
     and shadow only as reinforcement. That is why the canvas is not white: a
     white card on a white page has no step left to spend, and #ffffff on
     #f7f7f9 (1.07:1) already beats the dark theme's own card-on-page step
     (#0c0c0e on #09090b, 1.02:1) before a single pixel of shadow is drawn. */
  --background: #f7f7f9;
  --page-bg: #f7f7f9;
  --card: #ffffff;
  --surface: #ffffff;
  --card-foreground: #18181b;
  --popover: #ffffff;
  --popover-foreground: #18181b;
  --secondary: #f1f1f4;
  --secondary-foreground: #18181b;
  --muted: #f1f1f4;
  --accent: #f1f1f4;
  --accent-foreground: #18181b;
  --surface-muted: #f4f4f6;
  /* Alpha, not an opaque hex. The 283 `bg-white/[…]` and `border-white/[…]`
     sites these replace composite over tinted fills (`bg-card/40`,
     `bg-muted/60`); an opaque token cannot stand in for them mechanically, an
     alpha one can. On a white ground "raised" honestly inverts to a recessed
     tint, so anywhere the lift carried real hierarchy needs a border or
     `--glass-shadow` added, not just a token swap. */
  --surface-raised: rgba(9, 9, 11, 0.04);
  --surface-sunken: rgba(9, 9, 11, 0.025);
  --surface-hover: rgba(9, 9, 11, 0.045);
  --surface-active: rgba(9, 9, 11, 0.08);
  --track: rgba(9, 9, 11, 0.1);
  --dot-idle: rgba(9, 9, 11, 0.22);

  /* #b7007c is 6.35:1 on the card and 5.94:1 on the canvas - AA as text and
     as a button fill carrying white. */
  --brand: #b7007c;
  /* Brand pink as TEXT. On white the fill colour already reads at 6.35:1,
     so light needs no separate ink; dark does. */
  --brand-ink: #b7007c;
  --brand-hover: #a5006f;
  --brand-dark: #92005e;
  --brand-darkest: #800052;
  --brand-light: #d4006a;
  /* #fdf2f8 is 1.09:1 on a white card and simply vanishes as a chip. #fce8f3
     is 1.17:1 and still holds `--text-muted` at 6.62:1. */
  --brand-tint: #fce8f3;
  --brand-glow: rgba(183, 0, 124, 0.1);
  --brand-ring: rgba(183, 0, 124, 0.2);
  --primary: #b7007c;
  --primary-foreground: #ffffff;
  /* #ba2355 shares dark #e8537a's OKLCH hue (7.8 vs 8.0), so "error" is the
     same colour in both themes rather than a stock red, and it measures
     6.07:1 on the card against #dc2626's 4.83:1. */
  --destructive: #ba2355;
  --destructive-foreground: #ffffff;

  /* The ring stays brand pink. `focus-visible:border-ring` draws it at FULL
     opacity on button/badge/checkbox/switch/tabs/searchable-select, and a
     darkened token would render a near-black plum edge on every focused
     field. The halo is what needed fixing, not the colour: at /50 it
     composites to #db80be = 2.69:1 and fails 1.4.11, at /70 to #cd4da3 =
     4.07:1 on the card and 3.91:1 on the canvas. */
  --ring: #b7007c;

  /* Alphas chosen to reproduce the dark theme's own hairline ratios rather
     than its alphas: light .07/.10/.14/.20 gives 1.16/1.24/1.36/1.58,
     dark .07/.09/.12/.16 gives 1.16/1.23/1.35/1.55. */
  --border: rgba(9, 9, 11, 0.1);
  --border-light: rgba(9, 9, 11, 0.07);
  --border-default: rgba(9, 9, 11, 0.14);
  --border-strong: rgba(9, 9, 11, 0.2);
  --border-solid: #e4e4e9;
  --border-pink: rgba(183, 0, 124, 0.28);
  /* The one boundary that has to clear 1.4.11's 3:1 - this is a data-entry
     product - and it has to clear it on BOTH grounds a field can sit on:
     3.52:1 on the card, 3.29:1 on the canvas, 3.12:1 on `--muted`. */
  --input: #88888f;
  /* Kept far lighter than the boundary on purpose: `bg-input` is a FILL, and
     a 3:1 grey behind an unchecked Switch reads as ON. */
  --input-fill: rgba(9, 9, 11, 0.16);

  /* The rail and the section panel sit one step ABOVE the canvas here, the
     same relationship dark gets from #0d0d10 over #09090b, and the hairline
     stays SOLID in both themes: at the sidebar's scale an alpha edge reads as
     a smudge. `--nav-accent` exists because #C8175D cannot carry a 14px label
     on near-black; in light the reason inverts - the lifted #ec5c92 is 3.22:1
     on white, under AA for that same label - so light gets the true brand
     pink instead. */
  --nav-surface: #ffffff;
  --nav-line: #e4e4e9;
  --nav-rule: #e9e9ee;
  --nav-hover: #f2f2f5;
  --nav-hover-strong: #eaeaef;
  --nav-chip: #ececf0;
  --nav-accent: #b7007c;
  --nav-idle: #52525b;
  /* Measured on the darkest nav ground it lands on rather than on the rail's
     white: the search trigger's `kbd` chip is `--nav-chip` #ececf0, where
     #6b6b76 was 4.47:1. */
  --nav-hint: #5f5f68;
  /* The search trigger's placeholder tier, one rung under `--nav-hint` - the
     rung the sidebar used to write as the bare literal #5b5b63, which is what
     the dark value still is. */
  --nav-placeholder: #66666f;
  --nav-foreground: #1b1b1f;
  --nav-title: #2b2b31;
  --nav-emphasis-bg: linear-gradient(
    95deg,
    rgba(183, 0, 124, 0.1),
    rgba(109, 47, 208, 0.07)
  );
  --nav-emphasis-border: rgba(183, 0, 124, 0.28);
  /* Mirrors dark's pairing rather than its hues: the label is the nav's own
     strongest ink, the icon is the brand pink. */
  --nav-emphasis-fg: #1f1b21;
  --nav-emphasis-icon: #b7007c;
  --nav-danger: #ba2355;
  --nav-tag-aeo: #00774c;
  --nav-tag-geo: #1f53c4;
  --nav-tag-neutral: #18181b;
  --nav-badge-beta: #835a00;
  --nav-overlay: rgba(255, 255, 255, 0.82);

  /* Used as TEXT at ~150 sites, and almost never on a bare surface: the
     shipped recipe is `bg-success/N text-success`, so the ground each ink has
     to survive is its OWN wash - a 15% tint is the deepest the app paints, and
     the canvas is worse than the card. Held to 4.5:1 there: success 4.92/4.62,
     danger 4.90/4.60, warning at its deepest `/10` 5.12/4.80, info 5.97/5.60.
     Each is its dark value darkened along its own OKLCH hue rather than
     swapped for a stock Tailwind shade - #835e00 is darkgoldenrod's own hue
     (81.7 vs #b8860b's 81.6), not a brown amber-700. */
  --success: #00712f;
  --warning: #b45309;
  --danger: #be0d26;
  --info: #1250c8;

  /* Inks validated on the washes the components actually paint, not on bare
     white: the worst case is the wash sitting on the canvas rather than in a
     card, and every one clears 4.5:1 there too. */
  --status-success-fg: #007651;
  --status-success-surface: rgba(16, 185, 129, 0.12);
  --status-success-line: rgba(0, 118, 81, 0.32);
  --status-warning-fg: #b45309;
  --status-warning-surface: rgba(245, 158, 11, 0.15);
  --status-warning-line: rgba(127, 93, 0, 0.32);
  --status-danger-fg: #b7162c;
  --status-danger-surface: rgba(239, 68, 68, 0.12);
  --status-danger-line: rgba(183, 22, 44, 0.3);
  --status-info-fg: #006c95;
  --status-info-surface: rgba(14, 165, 233, 0.12);
  --status-info-line: rgba(0, 108, 149, 0.3);
  --status-accent-fg: #b7007c;
  --status-neutral-fg: #52525b;

  /* A series has to clear 3:1 as a 2px stroke on the plot ground. Dark's
     chart-4 and chart-5 were tuned for near-black (2.11:1 on white for the
     mint), so both get a lower-L twin; chart-2 and chart-3 already read on
     both grounds and stay identical. */
  --chart-1: #b7007c;
  --chart-2: oklch(0.45 0.18 338);
  --chart-3: oklch(0.55 0.24 10);
  --chart-4: oklch(0.55 0.17 260);
  --chart-5: oklch(0.56 0.12 160);
  --chart-tick: rgba(24, 24, 27, 0.62);
  --chart-grid: rgba(9, 9, 11, 0.1);
  --chart-tooltip-bg: #ffffff;
  --chart-tooltip-edge: rgba(9, 9, 11, 0.14);
  --chart-tooltip-title: #18181b;
  --chart-tooltip-body: #52525b;
  /* The categorical palette is re-derived for light rather than darkened:
     dark's ten are five magentas plus four accents, which separate on
     near-black by lightness, and four of them (#f0abdb 1.82, #ff6b9d 2.68,
     #14b8a6 2.49, #f59e0b 2.15) are invisible on white. These ten are spread
     around the wheel instead, brand first, every one at or above 3.24:1 on
     the canvas, with a worst pairwise OKLab separation of 0.121 and a worst
     ADJACENT separation of 0.253 so neighbouring slices never merge. */
  --chart-cat-1: #b7007c;
  --chart-cat-2: #0098a9;
  --chart-cat-3: #813000;
  --chart-cat-4: #5935be;
  --chart-cat-5: #c93029;
  --chart-cat-6: #00654f;
  --chart-cat-7: #b657cc;
  --chart-cat-8: #987500;
  --chart-cat-9: #0063ba;
  --chart-cat-10: #228e40;

  --sidebar: #ffffff;
  --sidebar-foreground: #18181b;
  --sidebar-primary: #b7007c;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #f1f1f4;
  --sidebar-accent-foreground: #18181b;
  --sidebar-border: rgba(9, 9, 11, 0.07);
  --sidebar-ring: #b7007c;

  /* `--glass-shadow` holds the WHOLE shadow, not a colour, because the two
     themes need different geometry: dark's single 40px 60%-black glow reads
     as soot under a white card, so light uses a 1px contact shadow that seats
     the card plus a short ambient drop. The sheen goes away entirely - a
     white top-light on a white card is a no-op and a dark one reads as a
     dirty edge - which is why the fill step does the work here.
     Dark separates an overlay by fill - #111113 popover on a #0c0c0e card -
     and light has nothing left to spend there (#ffffff on #ffffff is 1.00:1),
     so the whole step moves into `--popover-edge` and `--elevation-popover`,
     which the `glass-popover` utility paints. The edge alone is 1.43:1 against
     white where the card's own hairline is 1.24:1, and the drop is roughly
     double the card's at every stop. */
  --glass-sheen: transparent;
  --glass-inset: rgba(255, 255, 255, 0.9);
  --glass-shadow: 0 1px 2px rgba(9, 9, 11, 0.05),
    0 8px 24px -12px rgba(9, 9, 11, 0.12);
  --popover-edge: rgba(9, 9, 11, 0.16);
  --elevation-popover: 0 4px 10px -2px rgba(9, 9, 11, 0.1),
    0 18px 44px -16px rgba(9, 9, 11, 0.26);
  --shadow-card-hover: 0 10px 15px -3px rgba(9, 9, 11, 0.1);
  --overlay-scrim: rgba(9, 9, 11, 0.4);

  /* The bars used to reuse `--border`; a 9%-alpha hairline is invisible as an
     8px bar on either ground, so they get their own tokens. */
  --scrollbar-thumb: rgba(9, 9, 11, 0.32);
  --scrollbar-thumb-hover: rgba(9, 9, 11, 0.48);

  /* The dashboard shell's atmosphere is additive light tuned to LIFT
     near-black; the same alphas over white are a visible haze, so light runs
     at roughly half. */
  --shell-dot: rgba(9, 9, 11, 0.055);
  /* The sign-in canvas floats two panels over its own radial art, so they are
     translucent rather than a flat fill - an opaque strip cuts the glow in half. */
  --auth-pill: rgba(255, 255, 255, 0.78);
  --auth-strip: rgba(255, 255, 255, 0.72);
  --auth-card-hover: #f4f4f6;
  --shell-glow-brand: rgba(183, 0, 124, 0.06);
  --shell-glow-violet: rgba(109, 47, 208, 0.05);

  /* Monochrome third-party marks (X, TikTok) ship as pure black-or-white
     artwork, so they want a truer ink than the UI `--foreground`. */
  --mark-ink: #0b0b0d;
  /* An UNFILLED Company ID ring segment. #232328 is the faintest thing on
     near-black and the darkest thing on white, so without this the rings
     invert and empty segments read as complete. */
  --segment-empty: #e4e4e7;

  /* The onboarding-chain loop tiles and their brand-gradient lead tile. */
  --rcm-tile-surface: #ffffff;
  --rcm-tile-line: rgba(9, 9, 11, 0.12);
  --rcm-lead-gradient: linear-gradient(135deg, #b7007c, #6d2fd0);
  --rcm-glow-primary: rgba(183, 0, 124, 0.06);
  --rcm-glow-secondary: rgba(109, 47, 208, 0.05);
  /* The scan sweep is a specular band: on near-black its core is white, on
     white it has to be ink or there is nothing to see. */
  --scan-sweep-highlight: rgba(9, 9, 11, 0.05);
  --scan-sweep-tint: rgba(183, 0, 124, 0.1);
  /* A 90%-alpha emerald halo is how a glow registers on near-black; on white
     the same value is a green smear. */
  --badge-new-glow: rgba(16, 185, 129, 0.28);
  --badge-new-glow-bright: rgba(16, 185, 129, 0.45);
  --brand-attention-glow: rgba(183, 0, 124, 0.34);
  --brand-attention-glow-static: rgba(183, 0, 124, 0.3);
}
.dark {
  color-scheme: dark;

  --foreground: #fafafa;
  --text-primary: #fafafa;
  /* The copilot's own prose. Deliberately NOT white: bold renders white, so a
     body set at #e8e8ec left it nowhere to go and every bolded phrase in the
     conversation stopped being visible. */
  --text-reply: #d8d8df;
  --text-secondary: #d4d4d8;
  /* ~10.9:1 on the near-black ground: secondary text reads close to white
     while staying clearly below the #fafafa foreground. `--text-muted`
     mirrors this value - 640 `text-text-muted` sites depend on that. */
  --muted-foreground: #c2c2ca;
  --text-muted: #c2c2ca;
  --text-light: #9d9da7;

  --background: #09090b;
  --page-bg: #09090b;
  /* "Glass" recipe borrowed from the sidebar panel: near-black card fill with
     a translucent white hairline instead of a flat grey one. */
  --card: #0c0c0e;
  --surface: #0c0c0e;
  --card-foreground: #fafafa;
  --popover: #111113;
  --popover-foreground: #fafafa;
  --secondary: #1a1a1f;
  --secondary-foreground: #fafafa;
  --muted: #18181c;
  --accent: #1c1c22;
  --accent-foreground: #fafafa;
  --surface-muted: #131318;
  --surface-raised: rgba(255, 255, 255, 0.04);
  --surface-sunken: rgba(255, 255, 255, 0.02);
  --surface-hover: rgba(255, 255, 255, 0.06);
  --surface-active: rgba(255, 255, 255, 0.12);
  --track: rgba(255, 255, 255, 0.1);
  --dot-idle: rgba(255, 255, 255, 0.25);

  --brand: #b7007c;
  --brand-ink: #ec5c92;
  --brand-hover: #a5006f;
  --brand-dark: #92005e;
  --brand-darkest: #800052;
  --brand-light: #d4006a;
  /* A near-white chip on near-black is a real bug, but fixing it would
     redesign a shipping theme; the plumbing is here now and the value
     (rgba(200, 23, 93, 0.14)) is its own decision. */
  /* Was #fdf2f8, a near-white lifted from the light palette: on a dark card
     the chip read as a white pastille and the muted icon on it measured
     1.62:1. A wash of the brand keeps the chip a chip. */
  --brand-tint: rgba(200, 23, 93, 0.14);
  --brand-glow: rgba(183, 0, 124, 0.1);
  --brand-ring: rgba(183, 0, 124, 0.2);
  --primary: #c8175d;
  --primary-foreground: #fafafa;
  --destructive: #e8537a;
  --destructive-foreground: #fafafa;
  --ring: #c8175d;

  --border: rgba(255, 255, 255, 0.09);
  --border-light: rgba(255, 255, 255, 0.07);
  --border-default: rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.16);
  --border-solid: #232328;
  --border-pink: rgba(200, 23, 93, 0.3);
  /* Inputs keep a slightly stronger hairline than cards for affordance. */
  --input: rgba(255, 255, 255, 0.12);
  --input-fill: rgba(255, 255, 255, 0.12);

  --nav-surface: #0d0d10;
  --nav-line: #1c1c22;
  --nav-rule: #26262d;
  --nav-hover: #17171c;
  --nav-hover-strong: #1e1e25;
  --nav-chip: #232329;
  --nav-accent: #ec5c92;
  --nav-idle: #a7a7af;
  --nav-hint: #8b8b93;
  --nav-placeholder: #83838c;
  --nav-foreground: #f4f4f5;
  --nav-title: #e8e8ec;
  --nav-emphasis-bg: linear-gradient(
    95deg,
    rgba(200, 23, 93, 0.14),
    rgba(123, 63, 228, 0.08)
  );
  --nav-emphasis-border: rgba(200, 23, 93, 0.3);
  --nav-emphasis-fg: #f0eef2;
  --nav-emphasis-icon: #f06fb0;
  --nav-danger: #e8537a;
  --nav-tag-aeo: #4ade9d;
  --nav-tag-geo: #7aa7ff;
  --nav-tag-neutral: #ffffff;
  --nav-badge-beta: #f5b43c;
  --nav-overlay: rgba(16, 16, 20, 0.6);

  --success: #28a745;
  --warning: #b8860b;
  --danger: #dc3545;
  --info: #0d6efd;

  --status-success-fg: #34d399;
  --status-success-surface: rgba(16, 185, 129, 0.15);
  --status-success-line: rgba(16, 185, 129, 0.5);
  --status-warning-fg: #fbbf24;
  --status-warning-surface: rgba(245, 158, 11, 0.15);
  --status-warning-line: rgba(245, 158, 11, 0.3);
  --status-danger-fg: #f87171;
  --status-danger-surface: rgba(239, 68, 68, 0.15);
  --status-danger-line: rgba(239, 68, 68, 0.3);
  --status-info-fg: #38bdf8;
  --status-info-surface: rgba(56, 189, 248, 0.15);
  --status-info-line: rgba(56, 189, 248, 0.3);
  --status-accent-fg: #ec5c92;
  --status-neutral-fg: #c2c2ca;

  --chart-1: #c8175d;
  --chart-2: oklch(0.45 0.18 338);
  --chart-3: oklch(0.55 0.24 10);
  --chart-4: oklch(0.65 0.15 260);
  --chart-5: oklch(0.75 0.12 160);
  --chart-tick: rgba(255, 255, 255, 0.35);
  --chart-grid: rgba(255, 255, 255, 0.07);
  --chart-tooltip-bg: #111113;
  --chart-tooltip-edge: rgba(255, 255, 255, 0.1);
  --chart-tooltip-title: #ffffff;
  --chart-tooltip-body: #e8e8ee;
  --chart-cat-1: #b7007c;
  --chart-cat-2: #92005e;
  --chart-cat-3: #d946a8;
  --chart-cat-4: #f0abdb;
  --chart-cat-5: #ff6b9d;
  --chart-cat-6: #6366f1;
  --chart-cat-7: #8b5cf6;
  --chart-cat-8: #ec4899;
  --chart-cat-9: #14b8a6;
  --chart-cat-10: #f59e0b;

  --sidebar: #09090b;
  --sidebar-foreground: #fafafa;
  --sidebar-primary: #c8175d;
  --sidebar-primary-foreground: #fafafa;
  --sidebar-accent: #1c1c22;
  --sidebar-accent-foreground: #fafafa;
  --sidebar-border: rgba(255, 255, 255, 0.07);
  --sidebar-ring: #c8175d;

  --glass-sheen: rgba(255, 255, 255, 0.025);
  --glass-inset: rgba(255, 255, 255, 0.05);
  --glass-shadow: 0 16px 40px -16px rgba(0, 0, 0, 0.6);
  /* Both are byte-identical to what popover/dialog/select/sheet already paint
     through `glass` here - `var(--border)` and `var(--glass-shadow)` - so
     moving them onto `glass-popover` is a no-op on this theme. */
  --popover-edge: rgba(255, 255, 255, 0.09);
  --elevation-popover: 0 16px 40px -16px rgba(0, 0, 0, 0.6);
  --shadow-card-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
  --overlay-scrim: rgba(0, 0, 0, 0.7);

  /* Exactly what the bars resolve to today - `var(--border)` and
     `var(--muted-foreground)` - now named so light can differ without
     touching dark. */
  --scrollbar-thumb: rgba(255, 255, 255, 0.09);
  --scrollbar-thumb-hover: #c2c2ca;

  --shell-dot: rgba(255, 255, 255, 0.05);
  --auth-pill: rgba(17, 17, 19, 0.7);
  --auth-strip: rgba(9, 9, 11, 0.7);
  --auth-card-hover: #16161a;
  --shell-glow-brand: rgba(200, 23, 93, 0.14);
  --shell-glow-violet: rgba(123, 63, 228, 0.1);

  --mark-ink: #ffffff;
  --segment-empty: #232328;

  --rcm-tile-surface: #111113;
  --rcm-tile-line: #232328;
  --rcm-lead-gradient: linear-gradient(135deg, #c8175d, #7b3fe4);
  --rcm-glow-primary: rgba(200, 23, 93, 0.07);
  --rcm-glow-secondary: rgba(123, 63, 228, 0.05);
  --scan-sweep-highlight: rgba(255, 255, 255, 0.07);
  --scan-sweep-tint: rgba(200, 23, 93, 0.08);
  --badge-new-glow: rgba(16, 185, 129, 0.7);
  --badge-new-glow-bright: rgba(16, 185, 129, 1);
  --brand-attention-glow: rgba(200, 23, 93, 0.45);
  --brand-attention-glow-static: rgba(200, 23, 93, 0.4);
}
/* `outline-ring/50` composites to #db80be over the light card - 2.69:1, a
     WCAG 1.4.11 failure on every focus indicator. /70 composites to #cd4da3 =
     4.07:1 on the card and 3.91:1 on the canvas, and it keeps the ring brand
     pink instead of darkening the token, which `focus-visible:border-ring`
     would render at full opacity as a near-black plum edge. */
:where(#recomaze, .recomaze-ui) *,
#recomaze,
.recomaze-ui {
  @apply border-border outline-ring/70;
}
#recomaze,
.recomaze-ui {
  @apply bg-background text-foreground;
}
#recomaze,
.recomaze-ui {
  @apply font-sans;
}
:where(#recomaze, .recomaze-ui) button:not(:disabled),
:where(#recomaze, .recomaze-ui) [role='button']:not([aria-disabled='true']) {
  cursor: pointer;
}
:where(#recomaze, .recomaze-ui) button:disabled,
:where(#recomaze, .recomaze-ui) [role='button'][aria-disabled='true'] {
  cursor: not-allowed;
}
/* Slim scrollbar globally so native bars match the theme instead of showing
     the bright native bar. (Same look as the in-modal .themed-scroll.) */
:where(#recomaze, .recomaze-ui) *,
#recomaze,
.recomaze-ui {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}
:where(#recomaze, .recomaze-ui) *::-webkit-scrollbar,
#recomaze::-webkit-scrollbar,
.recomaze-ui::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
:where(#recomaze, .recomaze-ui) *::-webkit-scrollbar-track,
#recomaze::-webkit-scrollbar-track,
.recomaze-ui::-webkit-scrollbar-track {
  background: transparent;
}
:where(#recomaze, .recomaze-ui) *::-webkit-scrollbar-thumb,
#recomaze::-webkit-scrollbar-thumb,
.recomaze-ui::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
  border-radius: 9999px;
}
:where(#recomaze, .recomaze-ui) *::-webkit-scrollbar-thumb:hover,
#recomaze::-webkit-scrollbar-thumb:hover,
.recomaze-ui::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-thumb-hover);
}
@utility glass {
  border: 1px solid var(--border);
  background-image: linear-gradient(
    to bottom,
    var(--glass-sheen),
    transparent 64px
  );
  box-shadow:
    inset 0 1px 0 var(--glass-inset),
    var(--glass-shadow);
}
@utility glass-popover {
  border: 1px solid var(--popover-edge);
  background-image: linear-gradient(
    to bottom,
    var(--glass-sheen),
    transparent 64px
  );
  box-shadow:
    inset 0 1px 0 var(--glass-inset),
    var(--elevation-popover);
}

:root {
  /* Outer panel edge — the `#e1e1e1` border in the reference, kept as an
     alpha so it composites over the card and the canvas alike (1.30:1). */
  --vis-edge: rgba(9, 9, 11, 0.12);
  /* Inner hairline between rows and cells, and the gap fill in .vis-cellgrid
     where the 1px gap IS the divider. The reference's own #f0f0f1 disappears
     against a white card at 1px, so 9% ink instead (1.22:1). */
  --vis-hairline: rgba(9, 9, 11, 0.09);
  /* Column-header / zebra fill — the reference's `#fafafb`. */
  --vis-head: rgba(9, 9, 11, 0.03);
  /* Row hover and expanded-row fill. */
  --vis-row-hover: rgba(9, 9, 11, 0.045);
  /* Inset well used inside expanded rows. */
  --vis-well: rgba(9, 9, 11, 0.03);
  /* Unfilled portion of every inline meter — the reference's `#ececee`. */
  --vis-track: rgba(9, 9, 11, 0.11);
  /* Active pill in the segmented tray — the only signal of which tab is on. */
  --vis-seg-active: rgba(9, 9, 11, 0.07);
  --vis-skeleton: rgba(9, 9, 11, 0.065);
  --vis-hover: rgba(9, 9, 11, 0.055);
  --vis-hatch: rgba(9, 9, 11, 0.045);
  --vis-code-bg: rgba(9, 9, 11, 0.07);
  --vis-accent-wash: rgba(183, 0, 124, 0.12);

  /* Status accents, carried as TEXT throughout visibility/**, so each is held
     to 4.5:1 on the card AND on its own tint: 5.62 / 6.64 / 6.08 on the card,
     4.92 / 5.70 / 5.46 on the tints. Each is its dark value darkened along
     that value's own OKLCH hue rather than swapped for a stock shade.
     NOT the reference's #c98a10 for warn — that measures 2.95:1 and fails. */
  --vis-pos: #00774a;
  --vis-neg: #b6143f;
  --vis-warn: #7e5d00;
  --vis-idle: #6b6b76;
  /* The tints are built from the SATURATED hue (emerald-500 / red-500 /
     amber-500), not from the ink above: tinting with a dark ink lands at
     roughly half the chroma and the wash goes muddy grey-green. */
  --vis-pos-tint: rgba(16, 185, 129, 0.14);
  --vis-neg-tint: rgba(239, 68, 68, 0.12);
  --vis-warn-tint: rgba(245, 158, 11, 0.14);
  --vis-pos-edge: rgba(0, 119, 74, 0.32);
  --vis-neg-edge: rgba(182, 20, 63, 0.3);
  --vis-warn-edge: rgba(126, 93, 0, 0.32);

  /* Card-preview surface. An opaque value, not the translucent --vis-well:
     the thumbnail's fade-out has to end on a colour it can name, and
     --vis-preview-fade is always this colour at zero alpha. */
  --vis-preview: #f4f4f7;
  --vis-preview-fade: rgba(244, 244, 247, 0);
  /* Column-head text. The dark rationale — brighter than --muted-foreground,
     which drops out at micro-caps size — inverts cleanly: here it has to be
     dark enough for 12px/700 caps, 7.73:1 on the card. */
  --vis-head-text: #52525b;
  /* One rung ABOVE --foreground so tiptap headings and <strong> still
     separate from body copy (19.90:1 against 17.72:1). */
  --vis-ink-strong: #09090b;

  --vis-header-scrim: rgba(255, 255, 255, 0.55);
  --vis-header-panel: rgba(255, 255, 255, 0.9);
  --vis-chart-grid: rgba(9, 9, 11, 0.1);
  --vis-chart-tick: #52525b;
  /* Dark lifted the share-of-voice line to #5b96e8 because a 3px dashed
     #2c6ecb loses its edge on near-black; on white that lift reverses. */
  --vis-chart-sov: #2c6ecb;
  --vis-chart-tooltip-bg: #ffffff;
  --vis-chart-tooltip-fg: #18181b;
  --vis-chart-tooltip-body: #52525b;
  --vis-chart-tooltip-edge: rgba(9, 9, 11, 0.14);
  --vis-note-line: rgba(180, 83, 9, 0.55);
  --vis-note-bg: rgba(217, 119, 6, 0.1);
}

.dark {
  --vis-edge: rgba(255, 255, 255, 0.1);
  --vis-hairline: rgba(255, 255, 255, 0.06);
  --vis-head: rgba(255, 255, 255, 0.028);
  --vis-row-hover: rgba(255, 255, 255, 0.035);
  --vis-well: rgba(255, 255, 255, 0.022);
  --vis-track: rgba(255, 255, 255, 0.1);
  --vis-seg-active: rgba(255, 255, 255, 0.08);
  --vis-skeleton: rgba(255, 255, 255, 0.06);
  --vis-hover: rgba(255, 255, 255, 0.06);
  --vis-hatch: rgba(255, 255, 255, 0.03);
  --vis-code-bg: rgba(255, 255, 255, 0.08);
  --vis-accent-wash: rgba(200, 23, 93, 0.14);

  --vis-pos: #3ecf8e;
  --vis-neg: #f2707f;
  --vis-warn: #e3b341;
  --vis-idle: #a6a6b2;
  --vis-pos-tint: rgba(62, 207, 142, 0.14);
  --vis-neg-tint: rgba(242, 112, 127, 0.13);
  --vis-warn-tint: rgba(227, 179, 65, 0.14);
  --vis-pos-edge: rgba(62, 207, 142, 0.34);
  --vis-neg-edge: rgba(242, 112, 127, 0.34);
  --vis-warn-edge: rgba(227, 179, 65, 0.34);

  --vis-preview: #0f0f11;
  --vis-preview-fade: rgba(15, 15, 17, 0);
  --vis-head-text: #e2e2e8;
  --vis-ink-strong: #ffffff;

  --vis-header-scrim: rgba(11, 11, 14, 0.45);
  --vis-header-panel: rgba(16, 16, 20, 0.85);
  --vis-chart-grid: rgba(255, 255, 255, 0.06);
  --vis-chart-tick: #b4b4c0;
  --vis-chart-sov: #5b96e8;
  --vis-chart-tooltip-bg: #111113;
  --vis-chart-tooltip-fg: #ffffff;
  --vis-chart-tooltip-body: #e8e8ee;
  --vis-chart-tooltip-edge: rgba(255, 255, 255, 0.1);
  --vis-note-line: rgba(251, 191, 36, 0.5);
  --vis-note-bg: rgba(251, 191, 36, 0.07);
}