/* Attachment Migrator UI (public-next, served at /app2). Design tokens: light and dark themes.
   DS1 (owner pick 2026-10-21, direction 3 "Studio" with two changes): Manrope, warm off-white, pill buttons, a black primary action and
   soft borderless secondary buttons (no light-blue filled buttons in either theme), rounded cards on soft shadows, the sidebar as a quiet
   panel. Every text, badge, border and focus pair passes WCAG AA (test/app2-a11y.test.js). Proposal: docs/DESIGN-SYSTEM.md on work/design-system. */
@font-face { font-family: "Manrope"; src: url("fonts/Manrope-500-800.woff2") format("woff2"); font-weight: 500 800; font-style: normal; font-display: swap; }
:root {
  --font: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --bg: #f7f7f5; --side: #f7f7f5; --surface: #ffffff; --surface-2: #f2f2ef; --hover: #ecece8; --inset: #e9e9e4;
  --line: #e6e6e1; --line-2: #d4d4ce; --line-ctl: #95958e; --ink: #111111; --ink-2: #4d4d4a; --ink-3: #686863;
  --accent: #1f5ae8; --accent-hover: #1848ba; --accent-soft: #e7edfc; --accent-line: #b6c8f6; --accent-ink: #ffffff;
  --ok: #1c7c44; --ok-soft: #e1f4e8; --ok-ink: #ffffff; --warn: #9a5b00; --warn-soft: #faefd3; --warn-ink: #ffffff; --bad: #c62f25; --bad-soft: #fbe7e5; --bad-ink: #ffffff;
  --neutral: #5f5f5a; --neutral-soft: #e9e9e4;
  /* Status badges: a real tint with dark text of the same hue (never a pale wash with coloured text) */
  --ok-fill: #b9ecc8; --ok-on: #0c4a26; --warn-fill: #ffe3a8; --warn-on: #5a3d00; --bad-fill: #ffd4d6; --bad-on: #7a1b14; --neutral-fill: #e6e5e0; --neutral-on: #303030;
  /* Buttons: the primary is black (light theme) or white (dark); a secondary is a soft fill with no border */
  --primary-bg: #111111; --primary-hover: #2a2a2a; --primary-ink: #ffffff; --btn-fill: #ecece8; --btn-fill-hover: #e2e2dc;
  --focus: #1f5ae8; --focus-w: 2px; --toast-bg: #111111; --toast-ink: #f7f7f5;
  --shadow-1: 0 2px 10px rgba(17, 17, 17, .06);
  --shadow-2: 0 4px 14px rgba(17, 17, 17, .06), 0 24px 56px -16px rgba(17, 17, 17, .3);
  --scrim: rgba(17, 17, 17, .45);
  --r-card: 16px; --r-ctl: 10px; --r-dialog: 20px; --r-pill: 999px; --side-w: 232px; --top-h: 52px;
  --h-sm: 30px; --h-md: 38px; --h-lg: 44px; --h-nav: 38px; --row-pad-y: 10px;
  --fs-base: 14.5px; --fs-table: 13.5px; --fs-h1: 28px; --fs-h2: 17px; --fw-head: 700;
  /* Layout (docs/ux2/LAYOUT.md): the content width a page may use, and the narrowest a card may get before cards stack.
     Breakpoints by name (media queries cannot read custom properties, so the numbers repeat in ui.css):
     web only, 1024 and up: tablet 1024 to 1099 (icon rail), laptop 1100 to 1699, wide 1700 and up; short windows: 840 and 780 tall. */
  --content-max: 1116px; --card-min: 420px;
  /* Home grid: 12 columns, one gutter */
  --grid-gap: 16px;
  color-scheme: light;
}
/* Dark: near-black, warm-neutral surfaces; the primary button inverts to white, the accent lightens for links and focus only. */
:root[data-theme="dark"] {
  --bg: #0f0f10; --side: #0f0f10; --surface: #19191b; --surface-2: #202023; --hover: #26262a; --inset: #0a0a0b;
  --line: #2a2a2e; --line-2: #3a3a40; --line-ctl: #68686f; --ink: #f2f2f0; --ink-2: #c4c4c0; --ink-3: #94948f;
  --accent: #8fb0ff; --accent-hover: #a9c2ff; --accent-soft: rgba(143, 176, 255, .16); --accent-line: rgba(143, 176, 255, .45); --accent-ink: #061233;
  --ok: #6bcf97; --ok-soft: rgba(107, 207, 151, .16); --ok-ink: #06170d; --warn: #e7b957; --warn-soft: rgba(231, 185, 87, .16); --warn-ink: #1d1400; --bad: #f3968d; --bad-soft: rgba(243, 150, 141, .16); --bad-ink: #2a0e0b;
  --neutral: #adada7; --neutral-soft: rgba(173, 173, 167, .16);
  --ok-fill: #1d4a2e; --ok-on: #b9ecc8; --warn-fill: #4d3a0a; --warn-on: #ffe3a8; --bad-fill: #5a1f1b; --bad-on: #ffd4d6; --neutral-fill: #3a3a3a; --neutral-on: #e3e3e3;
  --primary-bg: #f2f2f0; --primary-hover: #ffffff; --primary-ink: #111111; --btn-fill: #2a2a2e; --btn-fill-hover: #333338;
  --focus: #8fb0ff; --toast-bg: #f2f2f0; --toast-ink: #0f0f10;
  --shadow-1: 0 0 0 1px rgba(255, 255, 255, .06); --shadow-2: 0 0 0 1px rgba(255, 255, 255, .07), 0 24px 56px -16px rgba(0, 0, 0, .7); --scrim: rgba(0, 0, 0, .6);
  color-scheme: dark;
}


/* wide: a page may use more of the window; cards still stop at --card-min */
@media (min-width: 1700px) { :root { --content-max: 1480px; } }