/* Design tokens: the shadcn/ui "neutral" theme (https://ui.shadcn.com/docs/theming).
   The colour values are copied from shadcn's registry (https://ui.shadcn.com/r/colors/neutral.json, read 2026-11-11).
   Two values are changed on purpose and marked "changed": a darker muted text, so that small grey text keeps a
   contrast of 4.5:1 on the muted surface (shadcn's own value gives about 4.4:1).
   The old names (--surface, --surface-muted, ...) stay as aliases, so older style rules keep working. */
@font-face { font-family: Geist; src: url("/editor/fonts/Geist-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
:root {
  --radius: 0.625rem;
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --radius-full: 9999px;

  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --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.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.5 0 0);              /* changed: shadcn uses 0.556 */
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --success: oklch(0.627 0.17 149);

  /* Tailwind's default shadows, which shadcn components use */
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  /* focus: a 3 px ring at half strength, as in every shadcn component */
  --focus-ring: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);

  --font-sans: Geist, ui-sans-serif, system-ui, sans-serif;

  /* old names */
  --surface: var(--card);
  --surface-muted: var(--muted);
  --foreground-strong: var(--foreground);
  --radius-base: var(--radius-md);
  --radius-card: var(--radius-xl);
  --shadow: var(--shadow-sm);
  --space-4: 4px; --space-8: 8px; --space-12: 12px; --space-16: 16px; --space-24: 24px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --background: oklch(0.145 0 0);
    --foreground: oklch(0.985 0 0);
    --card: oklch(0.205 0 0);
    --card-foreground: oklch(0.985 0 0);
    --popover: oklch(0.205 0 0);
    --popover-foreground: oklch(0.985 0 0);
    --primary: oklch(0.922 0 0);
    --primary-foreground: oklch(0.205 0 0);
    --secondary: oklch(0.269 0 0);
    --secondary-foreground: oklch(0.985 0 0);
    --muted: oklch(0.269 0 0);
    --muted-foreground: oklch(0.708 0 0);
    --accent: oklch(0.269 0 0);
    --accent-foreground: oklch(0.985 0 0);
    --destructive: oklch(0.704 0.191 22.216);
    --border: oklch(1 0 0 / 10%);
    --input: oklch(1 0 0 / 15%);
    --ring: oklch(0.556 0 0);
    --success: oklch(0.72 0.17 149);
    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.3);
    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.4);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.45), 0 4px 6px -4px rgb(0 0 0 / 0.45);
    color-scheme: dark;
  }
}