/* COPIED from Anvil (fowlers_v2/packages/ui/src/styles/tokens.ts) — Assay imports nothing from Anvil.
   Refresh by hand when Anvil's look changes: app/scripts/copy-tokens.sh */
:root {
  /* Native controls (date/time pickers, scrollbars, autofill) render in the theme's scheme — dark-first, so a
     date input's popup calendar isn't a white box on the dark UI. [data-theme="light"] flips it below. */
  color-scheme: dark;
  /* foreground / background / border (dark) */
  --color-fg-default:#e4e7eb; --color-fg-muted:#9da5b0; --color-fg-subtle:#6c7680; --color-fg-on-emphasis:#ffffff;
  /* --color-bg-canvas: the PAGE itself (body, the app's outer frame), never a component. Dark: the same as bg-default. */
  --color-bg-canvas:#111217;
  /* --color-bg-chrome: the app frame around the page (top bar, sidebar). Dark: the same as bg-subtle. */
  --color-bg-chrome:#181b1f;
  --color-bg-default:#111217; --color-bg-subtle:#181b1f; --color-bg-muted:#22252a; --color-bg-emphasis:#2c3038; --color-bg-inset:#0b0c0e; --color-bg-overlay:#1e2127;
  --color-border-default:#2c3038; --color-border-muted:#23262b; --color-border-subtle:#1a1d21; --color-border-emphasis:#3d444d;
  /* accents / status (dark) */
  --color-accent-fg:#6e9fff; --color-accent-emphasis:#3871dc; --color-accent-muted:rgba(56,113,220,.4); --color-accent-subtle:rgba(56,113,220,.15);
  --color-success-fg:#73bf69; --color-success-emphasis:#56a64b; --color-success-subtle:rgba(115,191,105,.15);
  --color-warning-fg:#ff9830; --color-warning-emphasis:#e5722e; --color-warning-subtle:rgba(255,152,48,.15);
  --color-danger-fg:#f2495c; --color-danger-emphasis:#e02f44; --color-danger-subtle:rgba(242,73,92,.18);
  --color-info-fg:#b877d9; --color-info-emphasis:#9b51cc;
  /* Decorative hues — used ONLY where colour carries no meaning (tags, roles). They exist so a decorative
     pill never has to borrow green/amber/red and fake a status. */
  --color-teal-emphasis:#1a8b82; --color-pink-emphasis:#b8457e;
  /* spacing */
  --spacing-xs:4px; --spacing-sm:8px; --spacing-md:16px; --spacing-lg:24px; --spacing-xl:32px; --spacing-2xl:48px;
  /* radius / border width */
  --radius-sm:2px; --radius-md:4px; --radius-lg:6px; --radius-xl:8px; --radius-full:9999px; --border-width:1px;
  /* typography */
  --font-family-default:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font-family-mono:'Roboto Mono',ui-monospace,SFMono-Regular,monospace;
  --font-size-xs:11px; --font-size-sm:12px; --font-size-md:14px; --font-size-lg:16px; --font-size-xl:20px; --font-size-2xl:24px; --font-size-3xl:32px;
  --font-weight-normal:400; --font-weight-medium:500; --font-weight-semibold:600; --font-weight-bold:700;
  --line-height-tight:1.25; --line-height-normal:1.5;
  /* shadows */
  --shadow-sm:0 1px 2px rgba(0,0,0,.2); --shadow-md:0 4px 8px rgba(0,0,0,.3); --shadow-lg:0 8px 16px rgba(0,0,0,.4);
  /* layout */
  --sidebar-width:220px; --topbar-height:52px;
  /* The centred page column's cap. One value so every surface lines up; override it on a single surface
     (a wide expert tool) rather than removing the cap. */
  --content-max-width:1100px;
  /* z-index layers — the ONE layering scale. Every overlay uses a token, never a magic number, so
     dialogs + toasts are the highest BY CONSTRUCTION (a panel can't out-stack a confirm or a toast). */
  --z-content:1; --z-nav:20; --z-menu:100; --z-panel:300; --z-overlay:500; --z-dialog:9000; --z-toast:9100;
  /* panel / dialog — the matte "framed" surface (v1): outer frame + recessed inner.
     These alias the color tokens above, so they swap with the theme automatically. */
  --panel-bg:var(--color-bg-muted); --panel-inner-bg:var(--color-bg-inset);
  --panel-border:var(--color-border-default); --panel-radius:var(--radius-lg);
  --panel-inner-radius:var(--radius-md); --panel-frame:5px; --panel-shadow:var(--shadow-md);
  --dialog-shadow:var(--shadow-lg);
}

/* Document reset — kill the default body margin (the white gutter) and set the page bg. */
html, body { margin:0; padding:0; }
body { background:var(--color-bg-canvas, var(--color-bg-default)); color:var(--color-fg-default); font-family:var(--font-family-default); }
[data-theme="light"] {
  color-scheme: light;
  --color-fg-default:#1f2328; --color-fg-muted:#656d76; --color-fg-subtle:#8b949e; --color-fg-on-emphasis:#ffffff;
  --color-bg-default:#ffffff; --color-bg-subtle:#f6f8fa; --color-bg-muted:#f0f1f3; --color-bg-emphasis:#e5e7eb; --color-bg-inset:#f6f8fa; --color-bg-overlay:#ffffff;
  --color-border-default:#d1d5db; --color-border-muted:#e5e7eb; --color-border-subtle:#f0f1f3; --color-border-emphasis:#9ca3af;
  --color-accent-fg:#2563eb; --color-accent-emphasis:#1d4ed8; --color-accent-muted:rgba(37,99,235,.3); --color-accent-subtle:rgba(37,99,235,.1);
  --color-success-fg:#16a34a; --color-success-emphasis:#15803d; --color-success-subtle:rgba(22,163,74,.12);
  --color-warning-fg:#d97706; --color-warning-emphasis:#b45309; --color-warning-subtle:rgba(217,119,6,.12);
  --color-danger-fg:#cf222e; --color-danger-emphasis:#a40e26; --color-danger-subtle:rgba(207,34,46,.12);
  --color-info-fg:#8250df; --color-info-emphasis:#6639ba;
  --color-teal-emphasis:#0f766e; --color-pink-emphasis:#be185d;
  --shadow-sm:0 1px 2px rgba(140,149,159,.15); --shadow-md:0 3px 6px rgba(140,149,159,.2); --shadow-lg:0 8px 24px rgba(140,149,159,.2);
  /* LIGHT MODE: the page is a soft off-white and panels' insides are WHITE, so content lifts UP off the page
     (as in Stripe, GitHub, Linear). It used to be a pure-white page with GREYER panel insides: the dark-first
     "recessed inner" copied into light mode, which read as pale grey boxes on white, low contrast and washed out
     (Ken, 2026-10-18). Components keep bg-default (white): inputs, menus, dialogs. */
  /* DECIDED 2026-10-18 (Ken, after two trials on deploytest-05): a mid-range off-white, for less glare. Don't go much past #e2e5e9: it turns grey
     and dull, and coloured badges go muddy. The panel frame must stay darker than the page or panels lose
     their edges. */
  --color-bg-canvas:#e9ebee; --color-bg-chrome:#e9ebee;
  --panel-bg:#dcdfe4; --panel-inner-bg:#ffffff;
}