/**
 * @file theme.css
 * Design-tokens van Snackservice Rotterdam ("retro snackbar").
 *
 * Bron: assets/design-handoff/design-system/tokens.json (Claude Design).
 * Bovenaan staan de tokens onder hun eigen naam (--surface-page, --mustard,
 * --space-6, ...), zodat component-CSS ze één-op-één kan gebruiken zoals in
 * het ontwerp. Daaronder worden de shadcn/ui-variabelen van Mercury
 * (--background, --primary, ...) op die tokens gemapt, zodat de overgenomen
 * Mercury-componenten automatisch de merkkleuren erven.
 *
 * De Tailwind-mapping (bg-mustard, text-ink, font-display, ...) staat in
 * src/main.css (@theme inline).
 *
 * Dit bestand wordt niet door Tailwind gecompileerd; wijzigingen zijn na een
 * `drush cr` direct zichtbaar.
 */

:root {
  /* ── Kleur ─────────────────────────────────────────────── */
  --surface-page: #fbf5e6; /* paginagrond: warme crème, nooit puur wit */
  --surface-card: #ffffff; /* kaarten, formulierpanelen, velden */
  --surface-sunken: #f4ecd6; /* kop van paneel, broodkruimelbalk */
  --surface-tint: #e6efdf; /* lichtgroen: vandaag, info, actieve regel */
  --line: #e3d6b4; /* decoratieve haarlijnen */
  --line-strong: #9c8a5e; /* rand van invoervelden (3,4:1) */
  --ink: #2a2416; /* broodtekst en koppen */
  --ink-muted: #6a5f48; /* bijschriften, toelichting (nooit op mustard) */
  --mustard: #eccb40; /* merkgeel: primaire actie, accent — nooit als tekstkleur */
  --mustard-deep: #d9b528;
  --bottle-green: #375e37; /* merkgroen: navigatie, links, secundaire knop */
  --bottle-green-deep: #284628;
  --leaf-green: #58934f; /* alleen decoratief */
  --on-green: #ffffff;
  --on-mustard: var(--ink);
  --ketchup: #b8322a; /* alleen status, altijd met een woord */
  --focus-ring: var(--bottle-green);

  /* ── Typografie ────────────────────────────────────────── */
  --font-script: Yellowtail, "Brush Script MT", cursive;
  --font-display: "Josefin Sans", "Century Gothic", Futura, sans-serif;
  --font-sans: "Work Sans", "Helvetica Neue", Arial, sans-serif;
  /* Mercury gebruikt --font-body voor lopende tekst: ook Work Sans. */
  --font-body: var(--font-sans);
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;

  /* ── Ruimte ────────────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;

  /* ── Vormen en diepte ──────────────────────────────────── */
  --radius-sm: 6px; /* velden, badges */
  --radius-md: 12px; /* kaarten, foto's */
  --radius-pill: 999px; /* knoppen */
  --shadow-button: 0 3px 0 #284628; /* harde groene onderrand */
  --shadow-card: 0 4px 0 #e3d6b4; /* harde crème onderrand */

  /* ── Mercury (shadcn/ui) → Snackservice-tokens ─────────── */
  --background: var(--surface-page);
  --foreground: var(--ink);
  --card: var(--surface-card);
  --card-foreground: var(--ink);
  --primary: var(--mustard);
  --primary-foreground: var(--on-mustard);
  --secondary: var(--bottle-green);
  --secondary-foreground: var(--on-green);
  --muted: var(--surface-sunken);
  --muted-foreground: var(--ink-muted);
  --accent: var(--bottle-green);
  --accent-foreground: var(--on-green);
  --destructive: var(--ketchup);
  --destructive-foreground: #ffffff;
  --border: var(--line);
  --input: var(--line-strong);
  --ring: var(--focus-ring);

  /* Mercury rekent radius-sm/md/lg/xl af van --radius. */
  --radius: 12px;

  /* Geen zachte blur-schaduwen: alle Mercury-schaduwen worden de harde
     kaart-onderrand. */
  --shadow-2xs: none;
  --shadow-xs: none;
  --shadow-sm: var(--shadow-card);
  --shadow: var(--shadow-card);
  --shadow-md: var(--shadow-card);
  --shadow-lg: var(--shadow-card);
  --shadow-xl: var(--shadow-card);
  --shadow-2xl: var(--shadow-card);
  --tracking-normal: 0em;
  --spacing: 0.25rem;

  /* Hoogte van de navigatiebalk (voor hero-overlays van Mercury). */
  --navbar-height: calc(var(--spacing) * 18);

  @media (min-width: 768px) {
    --navbar-height: calc(var(--spacing) * 22);
  }
}