/*
 * The design tokens, copied VERBATIM from the app (never imported, so the site can never break the app):
 *   web/src/styles/globals.css lines 14-54 (:root, light) and 56-94 (.dark), at base commit 5b5b641.
 * Re-copy both blocks whenever the app's tokens change. Below them: the radius and type scale, as plain CSS variables
 * (the app's @theme inline values, lines 135-155, without Tailwind).
 */
:root {
  --radius: 0.375rem;

  --background: #f6f5f1;
  --foreground: #1a1d1e;
  --card: #fcfbf8;
  --card-foreground: #1a1d1e;
  --popover: #fcfbf8;
  --popover-foreground: #1a1d1e;
  --primary: #0d5c58;
  --primary-foreground: #ffffff;
  --secondary: #eae8e1;
  --secondary-foreground: #1a1d1e;
  --muted: #edebe5;
  --muted-foreground: #585d5b;
  --accent: #e8e6df;
  --accent-foreground: #1a1d1e;
  --destructive: #b3261e;
  --border: #dedbd3;
  --input: #8c8983;
  --ring: #0d5c58;
  --rule: #1a1d1e;

  --success: #1d6b38;
  --success-soft: #e2eee5;
  --warning: #855000;
  --warning-soft: #f5ead5;
  --danger: #b3261e;
  --danger-soft: #f7e4e1;
  --info: #1d5793;
  --info-soft: #e1e9f3;

  --sidebar: #efede7;
  --sidebar-foreground: #1a1d1e;
  --sidebar-primary: #0d5c58;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #e3e0d8;
  --sidebar-accent-foreground: #1a1d1e;
  --sidebar-border: #dad6cd;
  --sidebar-ring: #0d5c58;
}

.dark {
  --background: #151817;
  --foreground: #e8e6e0;
  --card: #1b1f1e;
  --card-foreground: #e8e6e0;
  --popover: #1e2221;
  --popover-foreground: #e8e6e0;
  --primary: #5fb3ac;
  --primary-foreground: #0a201e;
  --secondary: #262b2a;
  --secondary-foreground: #e8e6e0;
  --muted: #222726;
  --muted-foreground: #a3a8a3;
  --accent: #2a302e;
  --accent-foreground: #e8e6e0;
  --destructive: #e8655b;
  --border: #2d3331;
  --input: #6d7471;
  --ring: #5fb3ac;
  --rule: #e8e6e0;

  --success: #6cc38a;
  --success-soft: #1c2e23;
  --warning: #e0a646;
  --warning-soft: #32291a;
  --danger: #f08a80;
  --danger-soft: #3a2220;
  --info: #7fb0e8;
  --info-soft: #1d2836;

  --sidebar: #181b1a;
  --sidebar-foreground: #e8e6e0;
  --sidebar-primary: #5fb3ac;
  --sidebar-primary-foreground: #0a201e;
  --sidebar-accent: #252a29;
  --sidebar-accent-foreground: #e8e6e0;
  --sidebar-border: #2a2f2e;
  --sidebar-ring: #5fb3ac;
}

:root {
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);

  --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* The app's scale: Tailwind's xs, sm (the body size) and base, plus dense, title and display. */
  --text-xs: 0.75rem;
  --text-xs--line-height: 1rem;
  --text-dense: 0.8125rem;
  --text-dense--line-height: 1.25rem;
  --text-sm: 0.875rem;
  --text-sm--line-height: 1.25rem;
  --text-base: 1rem;
  --text-base--line-height: 1.5rem;
  --text-title: 1.5rem;
  --text-title--line-height: 2rem;
  --text-title--letter-spacing: -0.015em;
  --text-display: 2rem;
  --text-display--line-height: 2.5rem;
  --text-display--letter-spacing: -0.025em;
}

/* Generated by scripts/build.mjs from the .dark block above: dark mode with no JavaScript, unless html.light. */
@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    --background: #151817;
    --foreground: #e8e6e0;
    --card: #1b1f1e;
    --card-foreground: #e8e6e0;
    --popover: #1e2221;
    --popover-foreground: #e8e6e0;
    --primary: #5fb3ac;
    --primary-foreground: #0a201e;
    --secondary: #262b2a;
    --secondary-foreground: #e8e6e0;
    --muted: #222726;
    --muted-foreground: #a3a8a3;
    --accent: #2a302e;
    --accent-foreground: #e8e6e0;
    --destructive: #e8655b;
    --border: #2d3331;
    --input: #6d7471;
    --ring: #5fb3ac;
    --rule: #e8e6e0;
  
    --success: #6cc38a;
    --success-soft: #1c2e23;
    --warning: #e0a646;
    --warning-soft: #32291a;
    --danger: #f08a80;
    --danger-soft: #3a2220;
    --info: #7fb0e8;
    --info-soft: #1d2836;
  
    --sidebar: #181b1a;
    --sidebar-foreground: #e8e6e0;
    --sidebar-primary: #5fb3ac;
    --sidebar-primary-foreground: #0a201e;
    --sidebar-accent: #252a29;
    --sidebar-accent-foreground: #e8e6e0;
    --sidebar-border: #2a2f2e;
    --sidebar-ring: #5fb3ac;
  }
}