/* Vorrat design tokens: Menu. Components use only the semantic layer (--surface, --text ...),
   never the palette directly. See docs/DESIGN.md. */
@font-face {
  font-family: "Newsreader";
  src: url("/fonts/newsreader.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("/fonts/newsreader-italic.woff2") format("woff2");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("/fonts/hanken-grotesk.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* Palette */
  --ivory-100: #f7f3ea;
  --ivory-50: #fbf8f2;
  --bone-300: #ded8c9;
  --bone-200: #ebe5d8;
  --stone-600: #66634f;
  --charcoal-900: #24241e;
  --charcoal-800: #2e2e27;
  --charcoal-700: #3a3a32;
  --charcoal-950: #1a1a16;
  --oat-200: #e9e4d8;
  --oat-400: #b5b09f;
  --olive-700: #3f4f38;
  --olive-300: #a9bb9a;
  --brick-700: #8c3b2a;
  --brick-300: #dfa08f;
  --ochre-700: #7c5f19;
  --ochre-300: #d6bb7a;

  /* Semantic colour */
  --surface: var(--ivory-100);
  --surface-raised: var(--ivory-50);
  --surface-sunken: var(--bone-200);
  --text: var(--charcoal-900);
  --text-soft: var(--stone-600);
  --border: var(--bone-300);
  --border-strong: var(--charcoal-900);
  --action: var(--charcoal-900);
  --on-action: var(--ivory-50);
  --accent: var(--olive-700);
  --attention: var(--brick-700);
  --caution: var(--ochre-700);
  --good: var(--olive-700);
  --scrim: rgb(36 36 30 / 0.45);

  /* Series colours, one per cook in a plan */
  --series-0: var(--olive-700);
  --series-1: var(--brick-700);
  --series-2: var(--ochre-700);
  --series-3: var(--stone-600);

  /* Type: serif sets the mood, sans does the work */
  --font-serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --font-ui: "Hanken Grotesk", -apple-system, "SF Pro Text", system-ui, sans-serif;
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-md: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: 1.75rem;
  --text-2xl: 2.5rem;
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 600;
  --leading-tight: 1.08;
  --leading-body: 1.45;

  /* Space: 4 px base, generous by default */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2.25rem;
  --space-7: 3.5rem;

  /* Shape: square by default, round only for tick circles */
  --radius-none: 0;
  --radius-full: 999px;
  --rule: 1px;

  /* Touch */
  --tap-min: 48px;
  --tap-check: 32px;
  --tabbar-height: 58px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --fast: 120ms;
  --medium: 240ms;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface: var(--charcoal-950);
    --surface-raised: var(--charcoal-900);
    --surface-sunken: var(--charcoal-700);
    --text: var(--oat-200);
    --text-soft: var(--oat-400);
    --border: var(--charcoal-700);
    --border-strong: var(--oat-200);
    --action: var(--oat-200);
    --on-action: var(--charcoal-950);
    --accent: var(--olive-300);
    --attention: var(--brick-300);
    --caution: var(--ochre-300);
    --good: var(--olive-300);
    --scrim: rgb(0 0 0 / 0.6);
    --series-0: var(--olive-300);
    --series-1: var(--brick-300);
    --series-2: var(--ochre-300);
    --series-3: var(--oat-400);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --surface: var(--charcoal-950);
  --surface-raised: var(--charcoal-900);
  --surface-sunken: var(--charcoal-700);
  --text: var(--oat-200);
  --text-soft: var(--oat-400);
  --border: var(--charcoal-700);
  --border-strong: var(--oat-200);
  --action: var(--oat-200);
  --on-action: var(--charcoal-950);
  --accent: var(--olive-300);
  --attention: var(--brick-300);
  --caution: var(--ochre-300);
  --good: var(--olive-300);
  --scrim: rgb(0 0 0 / 0.6);
  --series-0: var(--olive-300);
  --series-1: var(--brick-300);
  --series-2: var(--ochre-300);
  --series-3: var(--oat-400);
  color-scheme: dark;
}