/*
 * Generated by site/tools/sync.mjs from web/src/styles/globals.css: the app's
 * own tokens, so the homepage and the app are one brand. Do not edit; change
 * the app's tokens and run `npm --prefix site run sync`.
 *
 * Theme: the class on <html> wins (.light or .dark, set before first paint
 * from the "romulus-theme" choice the app also reads); without one, the
 * system preference decides, with or without JavaScript.
 */
:root {
  color-scheme: light;

  /* Surfaces: the canvas holds the shell; panels (card) sit on it. */
  --background: #fbfaf7;
  --foreground: #1c1917;
  --card: #ffffff;
  --card-foreground: #1c1917;
  --popover: #ffffff;
  --popover-foreground: #1c1917;
  --muted: #f3f1ec;
  --muted-foreground: #57534e; /* secondary text, 7:1 on the canvas */
  --faint-foreground: #78716c; /* placeholders, disabled, meta: 4.6:1 */
  --accent: #efece6; /* hover / selected fill on neutral surfaces */
  --accent-foreground: #1c1917;
  --highlight: #e5e0d6; /* the current item of a menu, select or list */
  --border: #e4e1da;
  --border-strong: #d6d2c9;
  --input: #dcd8cf;
  --overlay: rgb(28 25 23 / 0.32);

  /* One accent, used for primary actions, focus and selection only. */
  --primary: #c2410c;
  --primary-hover: #ad3a0b;
  --primary-foreground: #ffffff;
  --ring: #c2410c;
  --selection: rgb(194 65 12 / 0.16);

  /* Secondary actions. */
  --secondary: #f3f1ec;
  --secondary-hover: #ebe8e1;
  --secondary-foreground: #1c1917;

  /* Status: always paired with text or an icon, never color alone. */
  --destructive: #b91c1c;
  --destructive-hover: #a11818;
  --destructive-foreground: #ffffff;
  --success: #15803d;
  --success-foreground: #ffffff;
  --warning: #a16207;
  --warning-foreground: #ffffff;
  --info: #1d4ed8;
  --info-foreground: #ffffff;

  /* Shell. */
  --sidebar: #fbfaf7;
  --sidebar-foreground: #44403c;
  --sidebar-accent: #efece6;
  --sidebar-accent-foreground: #1c1917;

  /* Collaborators: avatars and live cursors. White text passes AA on each. */
  --presence-1: #2563eb;
  --presence-2: #7c3aed;
  --presence-3: #db2777;
  --presence-4: #0f766e;
  --presence-5: #15803d;
  --presence-6: #b45309;
  --presence-7: #dc2626;
  --presence-8: #0369a1;
  --presence-foreground: #ffffff;

  /* Groups on the schema graph (a draft's `groups` map stores the name). */
  --group-stone: #78716c;
  --group-red: #dc2626;
  --group-amber: #b45309;
  --group-green: #15803d;
  --group-teal: #0f766e;
  --group-blue: #2563eb;
  --group-violet: #7c3aed;
  --group-pink: #db2777;

  /* Code panes (SQL, JSON, DBML, Mermaid). Each passes AA on the card. */
  --syntax-keyword: #c2410c;
  --syntax-type: #0f766e;
  --syntax-string: #15803d;
  --syntax-number: #a16207;
  --syntax-function: #7c3aed;
  --syntax-property: #1d4ed8;
  --syntax-comment: #78716c;
  --syntax-punctuation: #57534e;

  /* Elevation: hairline + soft layered drops. Only floating surfaces lift. */
  --elevation-control: 0 0.0625rem 0.0625rem rgb(28 25 23 / 0.04);
  --elevation-1: 0 0 0 0.0625rem rgb(28 25 23 / 0.06), 0 0.0625rem 0.125rem rgb(28 25 23 / 0.05);
  --elevation-2:
  0 0 0 0.0625rem rgb(28 25 23 / 0.06), 0 0.0625rem 0.125rem rgb(28 25 23 / 0.05),
  0 0.125rem 0.375rem -0.0625rem rgb(28 25 23 / 0.06);
  --elevation-3:
  0 0 0 0.0625rem rgb(28 25 23 / 0.07), 0 0.125rem 0.25rem -0.0625rem rgb(28 25 23 / 0.06),
  0 0.5rem 1.25rem -0.25rem rgb(28 25 23 / 0.12);
  --elevation-4:
  0 0 0 0.0625rem rgb(28 25 23 / 0.07), 0 0.25rem 0.5rem -0.125rem rgb(28 25 23 / 0.06),
  0 1.5rem 3rem -0.75rem rgb(28 25 23 / 0.22);

  --font-sans: "Inter Variable", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono Variable", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --radius-xs: 0.1875rem;
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 120ms;
  --duration-base: 180ms;
  --duration-slow: 260ms;
}

.dark {
  color-scheme: dark;

  --background: #121110;
  --foreground: #e7e5e4;
  --card: #1a1918;
  --card-foreground: #e7e5e4;
  --popover: #1f1e1c;
  --popover-foreground: #e7e5e4;
  --muted: #1f1e1c;
  --muted-foreground: #a8a29e;
  --faint-foreground: #8a837d;
  --accent: #292725;
  --accent-foreground: #f5f5f4;
  --highlight: #3a3633;
  --border: #2a2826;
  --border-strong: #3a3734;
  --input: #34312e;
  --overlay: rgb(0 0 0 / 0.55);

  --primary: #fb923c;
  --primary-hover: #fda65e;
  --primary-foreground: #1c1917;
  --ring: #fb923c;
  --selection: rgb(251 146 60 / 0.24);

  --secondary: #262422;
  --secondary-hover: #2f2c2a;
  --secondary-foreground: #e7e5e4;

  --destructive: #f87171;
  --destructive-hover: #fa8a8a;
  --destructive-foreground: #1c1917;
  --success: #4ade80;
  --success-foreground: #1c1917;
  --warning: #fbbf24;
  --warning-foreground: #1c1917;
  --info: #60a5fa;
  --info-foreground: #1c1917;

  --sidebar: #121110;
  --sidebar-foreground: #c4bfba;
  --sidebar-accent: #23211f;
  --sidebar-accent-foreground: #f5f5f4;

  --presence-1: #60a5fa;
  --presence-2: #a78bfa;
  --presence-3: #f472b6;
  --presence-4: #2dd4bf;
  --presence-5: #4ade80;
  --presence-6: #fbbf24;
  --presence-7: #f87171;
  --presence-8: #38bdf8;
  --presence-foreground: #1c1917;

  --group-stone: #a8a29e;
  --group-red: #f87171;
  --group-amber: #fbbf24;
  --group-green: #4ade80;
  --group-teal: #2dd4bf;
  --group-blue: #60a5fa;
  --group-violet: #a78bfa;
  --group-pink: #f472b6;

  --syntax-keyword: #fb923c;
  --syntax-type: #5eead4;
  --syntax-string: #86efac;
  --syntax-number: #fcd34d;
  --syntax-function: #c4b5fd;
  --syntax-property: #93c5fd;
  --syntax-comment: #8a837d;
  --syntax-punctuation: #a8a29e;

  /* On dark, a drop shadow barely reads: a light rim draws the edge. */
  --elevation-control: inset 0 0.0625rem 0 rgb(255 255 255 / 0.04);
  --elevation-1: inset 0 0.0625rem 0 rgb(255 255 255 / 0.03), 0 0 0 0.0625rem rgb(0 0 0 / 0.3);
  --elevation-2:
  inset 0 0.0625rem 0 rgb(255 255 255 / 0.04), 0 0 0 0.0625rem rgb(0 0 0 / 0.35),
  0 0.125rem 0.375rem -0.0625rem rgb(0 0 0 / 0.35);
  --elevation-3:
  inset 0 0.0625rem 0 rgb(255 255 255 / 0.05), inset 0 0 0 0.0625rem rgb(255 255 255 / 0.04),
  0 0 0 0.0625rem rgb(0 0 0 / 0.4), 0 0.25rem 0.5rem -0.125rem rgb(0 0 0 / 0.35),
  0 0.75rem 1.5rem -0.375rem rgb(0 0 0 / 0.4);
  --elevation-4:
  inset 0 0.0625rem 0 rgb(255 255 255 / 0.06), inset 0 0 0 0.0625rem rgb(255 255 255 / 0.04),
  0 0 0 0.0625rem rgb(0 0 0 / 0.45), 0 0.5rem 1rem -0.25rem rgb(0 0 0 / 0.4),
  0 2rem 4rem -1rem rgb(0 0 0 / 0.6);
}

@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    color-scheme: dark;

    --background: #121110;
    --foreground: #e7e5e4;
    --card: #1a1918;
    --card-foreground: #e7e5e4;
    --popover: #1f1e1c;
    --popover-foreground: #e7e5e4;
    --muted: #1f1e1c;
    --muted-foreground: #a8a29e;
    --faint-foreground: #8a837d;
    --accent: #292725;
    --accent-foreground: #f5f5f4;
    --highlight: #3a3633;
    --border: #2a2826;
    --border-strong: #3a3734;
    --input: #34312e;
    --overlay: rgb(0 0 0 / 0.55);

    --primary: #fb923c;
    --primary-hover: #fda65e;
    --primary-foreground: #1c1917;
    --ring: #fb923c;
    --selection: rgb(251 146 60 / 0.24);

    --secondary: #262422;
    --secondary-hover: #2f2c2a;
    --secondary-foreground: #e7e5e4;

    --destructive: #f87171;
    --destructive-hover: #fa8a8a;
    --destructive-foreground: #1c1917;
    --success: #4ade80;
    --success-foreground: #1c1917;
    --warning: #fbbf24;
    --warning-foreground: #1c1917;
    --info: #60a5fa;
    --info-foreground: #1c1917;

    --sidebar: #121110;
    --sidebar-foreground: #c4bfba;
    --sidebar-accent: #23211f;
    --sidebar-accent-foreground: #f5f5f4;

    --presence-1: #60a5fa;
    --presence-2: #a78bfa;
    --presence-3: #f472b6;
    --presence-4: #2dd4bf;
    --presence-5: #4ade80;
    --presence-6: #fbbf24;
    --presence-7: #f87171;
    --presence-8: #38bdf8;
    --presence-foreground: #1c1917;

    --group-stone: #a8a29e;
    --group-red: #f87171;
    --group-amber: #fbbf24;
    --group-green: #4ade80;
    --group-teal: #2dd4bf;
    --group-blue: #60a5fa;
    --group-violet: #a78bfa;
    --group-pink: #f472b6;

    --syntax-keyword: #fb923c;
    --syntax-type: #5eead4;
    --syntax-string: #86efac;
    --syntax-number: #fcd34d;
    --syntax-function: #c4b5fd;
    --syntax-property: #93c5fd;
    --syntax-comment: #8a837d;
    --syntax-punctuation: #a8a29e;

    /* On dark, a drop shadow barely reads: a light rim draws the edge. */
    --elevation-control: inset 0 0.0625rem 0 rgb(255 255 255 / 0.04);
    --elevation-1: inset 0 0.0625rem 0 rgb(255 255 255 / 0.03), 0 0 0 0.0625rem rgb(0 0 0 / 0.3);
    --elevation-2:
    inset 0 0.0625rem 0 rgb(255 255 255 / 0.04), 0 0 0 0.0625rem rgb(0 0 0 / 0.35),
    0 0.125rem 0.375rem -0.0625rem rgb(0 0 0 / 0.35);
    --elevation-3:
    inset 0 0.0625rem 0 rgb(255 255 255 / 0.05), inset 0 0 0 0.0625rem rgb(255 255 255 / 0.04),
    0 0 0 0.0625rem rgb(0 0 0 / 0.4), 0 0.25rem 0.5rem -0.125rem rgb(0 0 0 / 0.35),
    0 0.75rem 1.5rem -0.375rem rgb(0 0 0 / 0.4);
    --elevation-4:
    inset 0 0.0625rem 0 rgb(255 255 255 / 0.06), inset 0 0 0 0.0625rem rgb(255 255 255 / 0.04),
    0 0 0 0.0625rem rgb(0 0 0 / 0.45), 0 0.5rem 1rem -0.25rem rgb(0 0 0 / 0.4),
    0 2rem 4rem -1rem rgb(0 0 0 / 0.6);
  }
}