/* aea design tokens — ported from lathe (packages/tokens). Dark-first; light derived. Cascadia Code everywhere. */
@font-face { font-family: "Cascadia Code"; src: url("/fonts/CascadiaCode.woff2") format("woff2"); font-weight: 200 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Cascadia Code"; src: url("/fonts/CascadiaCodeItalic.woff2") format("woff2"); font-weight: 200 700; font-style: italic; font-display: swap; }

:root {
  color-scheme: dark;
  /* Tonal ladder: surfaces separate by tone, not borders. */
  --bg: #0a0a0a; --surface: #121212; --elevated: #1a1a1a; --hover: #232323; --pick: #2a2a2a; /* chosen row inside a list on the elevated fill */
  --border: #1e1e1e; --border-strong: #2a2a2a; /* hairlines only where structure needs them (tables) */
  --ring: color-mix(in srgb, #ff2d55 55%, transparent);
  --text: #e0e0e0; --text-2: #888888; --muted: #555555;
  --dot-grid: #1a1a1a; --dots: radial-gradient(circle, var(--dot-grid) 1px, transparent 1px); --dots-size: 24px 24px;
  --indigo: #5e5ce6; --mint: #21dba0; --rose: #ff2d55; --amber: #ffcf8d; --violet: #a78bfa; --sky: #38bdf8; --pink: #f472b6; --emerald: #34d399; --slate: #64748b;
  --brand-a: #ff2d55; --brand-b: #f472b6;
  /* The only gradient in the system: the landing hero title. Everything else uses --rose as the single accent. */
  --gradient-brand-3: linear-gradient(135deg, #ff2d55 0%, #f472b6 50%, #5e5ce6 100%);
  --on-brand: #ffffff;
  --font-mono: "Cascadia Code", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --radius: 10px; --radius-sm: 6px; --radius-lg: 14px;
  --topbar-h: 52px; --sidebar-w: 280px; /* control height + 8 px above and below */
  /* One height for every control (buttons, icon buttons, picker, fields) on every screen size. */
  --control-h: 36px; --control-icon: 18px;
  --shadow: 0 10px 30px rgba(0,0,0,.45);
  --code-bg: #0d0d0d;
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #fafafa; --surface: #ffffff; --elevated: #f1f1f1; --hover: #e7e7e7; --pick: #ffffff;
  --border: #e4e4e4; --border-strong: #d0d0d0;
  --ring: color-mix(in srgb, #e5254b 45%, transparent);
  --text: #161616; --text-2: #555555; --muted: #8a8a8a;
  --dot-grid: #e6e6e6;
  --indigo: #4f46e5; --mint: #0f9f74; --rose: #e5254b; --amber: #b45309; --violet: #6d4ae8; --sky: #0284c7; --pink: #db2777; --emerald: #059669; --slate: #475569;
  --shadow: 0 10px 30px rgba(0,0,0,.12);
  --code-bg: #f4f4f4;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not([data-theme="light"]) {
    color-scheme: light;
    --bg: #fafafa; --surface: #ffffff; --elevated: #f1f1f1; --hover: #e7e7e7; --pick: #ffffff;
    --border: #e4e4e4; --border-strong: #d0d0d0;
    --ring: color-mix(in srgb, #e5254b 45%, transparent);
    --text: #161616; --text-2: #555555; --muted: #8a8a8a;
    --dot-grid: #e6e6e6;
    --indigo: #4f46e5; --mint: #0f9f74; --rose: #e5254b; --amber: #b45309; --violet: #6d4ae8; --sky: #0284c7; --pink: #db2777; --emerald: #059669; --slate: #475569;
    --shadow: 0 10px 30px rgba(0,0,0,.12);
    --code-bg: #f4f4f4;
  }
}