/* Morpho brand tokens — values from the "Morpho Brand" design system (tokens.json).
   The morpho-* colours are fixed; the semantic tokens switch in the dark theme. */
:root {
  --morpho-navy: #384064;
  --morpho-blue: #2e60a8;
  --morpho-azure: #4d8ec1;
  --morpho-sky: #acdbfc;
  --morpho-white: #ffffff;
  --morpho-navy-deep: #2c3352;
  --morpho-slate: #5b6485;
  --morpho-mist: #c9d4ea;
  --morpho-mist-100: #f3f8fd;
  --morpho-line: #d6e2f0;

  --surface: var(--morpho-white);
  --surface-raised: var(--morpho-mist-100);
  --ink: var(--morpho-navy);
  --ink-muted: var(--morpho-slate);
  --accent: var(--morpho-blue);
  --on-accent: var(--morpho-white);
  --hairline: var(--morpho-line);
  --petal-deep: var(--morpho-navy);
  --code-ground: #f7fafe;

  /* type: one family, Latin and Arabic */
  --font-sans: "Readex Pro", "Segoe UI", Tahoma, Arial, sans-serif;
  --font-code: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* a fourth-based scale (×1.333), rounded to whole pixels */
  --t-13: 0.8125rem;
  --t-14: 0.875rem;
  --t-16: 1rem;
  --t-18: 1.125rem;
  --t-24: 1.5rem;
  --t-32: 2rem;
  --t-42: 2.625rem;
  --t-56: 3.5rem;
  --t-76: 4.75rem;

  /* 8px spacing base */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-6: 48px;
  --space-8: 64px;
  --space-12: 96px;
  --space-16: 128px;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 24px;
  --radius-petal: 160px;
  --radius-pill: 9999px;
  /* the small petal: what the AI writes (answers, captions, drafts) */
  --radius-ai: 22px;

  --gutter: 16px;
  --measure: 66ch;
  --ease-out: cubic-bezier(.2, .7, .2, 1);
}

@media (min-width: 720px) { :root { --gutter: 32px; } }
@media (min-width: 1100px) { :root { --gutter: 48px; } }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface: var(--morpho-navy-deep);
    --surface-raised: var(--morpho-navy);
    --ink: var(--morpho-white);
    --ink-muted: var(--morpho-mist);
    --accent: var(--morpho-sky);
    --on-accent: var(--morpho-navy-deep);
    --hairline: #4a5480;
    --petal-deep: var(--morpho-slate);
    --code-ground: #262c47;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --surface: var(--morpho-navy-deep);
  --surface-raised: var(--morpho-navy);
  --ink: var(--morpho-white);
  --ink-muted: var(--morpho-mist);
  --accent: var(--morpho-sky);
  --on-accent: var(--morpho-navy-deep);
  --hairline: #4a5480;
  --petal-deep: var(--morpho-slate);
  --code-ground: #262c47;
  color-scheme: dark;
}