/* ============================================================
   pasiero.ai - design tokens
   colours, type stacks and spacing scale, light and dark
   ============================================================ */

:root {
  color-scheme: light;

  --paper: #f6f2f3;
  --board: #ece1e5;
  --card: #fffdfc;
  --ink: #16110f;
  --ink-2: #6c5e62;
  --rule: #d8cbcf;
  --vermilion: #d44d27;
  --orchid: #b55690;
  --cream: #fff7e6;

  --fg: var(--ink);
  --bg: var(--paper);

  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --shell: 74rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --band-y: clamp(4.5rem, 9vw, 8rem);
  --outline: 2px solid var(--ink);
  --radius: 18px;
  --radius-sm: 10px;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --paper: #16110f;
  --board: #201a19;
  --card: #251e1d;
  --ink: #f6f2f3;
  --ink-2: #a89a9e;
  --rule: #3c3230;
  --vermilion: #f2764f;
  --orchid: #d987b8;
  --cream: #fff7e6;
}