/*
 * What every layout needs: the design tokens, the fonts they name, the page
 * base and the one screen-reader utility. It is linked by all four layouts,
 * which is why nothing page-specific belongs here — a rule added to this file
 * reaches the kitchen screen as well as the dashboard.
 *
 * MailStylesheet reads the token block from this file and resolves mailer.css
 * against it, so the declarations stay plain rgb() with no nesting.
 */

/*
 * Dashboard. The design system's tokens, from docs/design/43/palett.html,
 * written as rgb() with the specimen's exact values. They are scoped to the
 * dashboard body, the kitchen screen and the public product pages, so the
 * auth pages keep their own palette. The kitchen sets its own ground and face
 * in kitchen.css and borrows only the accent and danger ramps.
 */
.kitchen,
.dashboard,
.nl-public {
  --color-bg: rgb(243 242 242);
  --color-surface: rgb(234 233 233);
  --color-text: rgb(32 31 29);
  --color-accent: rgb(182 130 53);
  --color-ink: rgb(23 21 18);
  --color-on-accent: var(--color-ink);
  --color-accent-100: rgb(255 243 228);
  --color-accent-200: rgb(255 227 191);
  --color-accent-300: rgb(250 203 141);
  --color-accent-400: rgb(225 173 102);
  --color-accent-500: rgb(194 141 65);
  --color-accent-600: rgb(160 111 36);
  --color-accent-700: rgb(125 84 17);
  --color-accent-800: rgb(90 59 10);
  --color-accent-900: rgb(58 39 13);
  --color-neutral-100: rgb(248 244 244);
  --color-neutral-200: rgb(234 231 231);
  --color-neutral-300: rgb(215 211 211);
  --color-neutral-400: rgb(186 182 182);
  --color-neutral-500: rgb(155 151 151);
  --color-neutral-600: rgb(125 121 121);
  --color-neutral-700: rgb(96 93 93);
  --color-neutral-800: rgb(68 65 65);
  --color-neutral-900: rgb(45 43 43);
  --color-divider: var(--color-neutral-300);
  --nl-danger-100: rgb(253 234 227);
  --nl-danger-200: rgb(248 210 196);
  --nl-danger-500: rgb(176 74 42);
  --nl-danger-700: rgb(138 50 20);
  --nl-danger-900: rgb(90 29 7);
  /* Five tones of the accent hue: Live is the only filled accent, Superseded
     is outline only, Rejected the only foreign hue. */
  --state-validating-bg: var(--color-accent-100);
  --state-validating-fg: var(--color-accent-700);
  --state-previous-bg: var(--color-accent-200);
  --state-previous-fg: var(--color-accent-800);
  --state-staged-bg: var(--color-accent-300);
  --state-staged-fg: var(--color-accent-900);
  --state-live-bg: var(--color-accent);
  --state-live-fg: var(--color-ink);
  --state-superseded-fg: var(--color-accent-600);
  --state-rejected-bg: var(--nl-danger-100);
  --state-rejected-fg: var(--nl-danger-700);
  --font-heading: "Cormorant Garamond", Garamond, Georgia, serif;
  --font-body: "Lora", Georgia, serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}

/*
 * Dashboard fonts, self-hosted because the content security policy only
 * allows fonts from self and data. Latin subsets from Google Fonts; OFL
 * licenses sit next to the files. Lora is variable, so one file covers 400
 * and 600.
 */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/cormorant-garamond-latin-1cc13254.woff2") format("woff2");
}

@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/lora-latin-fce3b577.woff2") format("woff2");
}

body {
  font-family: system-ui, -apple-system, sans-serif;
  color: var(--color-text);
  background: var(--color-surface);
}

/* Read by screen readers, not shown. Every layout links this file, so the
   dashboard, the kitchen and the public pages share the one utility. */
.nl-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;