/* ════════════════════════════════════════════════
   Board86 — Design tokens
   The single source of truth for palette, type,
   spacing, radius, and elevation. Load FIRST,
   before components.css.
════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Roboto+Slab:wght@400;500;600;700&display=swap');

:root {
  /* ── Ink / neutral ── */
  --ink:        #14110D;
  --ink-60:     #5C564B;
  --ink-40:     #8A8478;
  --rule:       #D9D3C4;

  /* ── Paper / surface ── */
  --paper:      #F4EFE2;  /* page background */
  --paper-2:    #FAF7EC;  /* alt surface, hover */
  --paper-3:    #FFFDF6;  /* primary card surface */

  /* ── Brand ── */
  --signal:     #FF4A1C;
  --signal-ink: #B83207;
  --steel:      #2E3338;

  /* ── Semantic ── */
  --good:       #2F6B3B;
  --warn:       #B3771A;
  --bad:        #A4331B;

  /* Category accents (food / labour / beverage) */
  --cat-food:     #6B4F2A;
  --cat-labour:   #2E5A6B;
  --cat-beverage: #8A4A6B;

  /* ── Type families ── */
  --slab: 'Roboto Slab', Georgia, serif;
  --sans: 'Inter', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;

  /* ── Type scale ── */
  --fs-xs:  11px;   /* eyebrows, mono labels */
  --fs-sm:  12px;   /* captions, metadata */
  --fs-md:  14px;   /* body default, inputs */
  --fs-lg:  16px;   /* emphasised body */
  --fs-xl:  20px;   /* card titles, section heads */
  --fs-2xl: 28px;   /* page titles, modal hero */

  --lh-tight: 1.2;
  --lh-snug:  1.35;
  --lh-base:  1.5;
  --lh-loose: 1.6;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ── Spacing (4px base) ── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* ── Radius — locked to 0 ── */
  --radius: 0;

  /* ── Elevation — tuned for warm paper, no blue cast ── */
  --shadow-sm: 0 1px 0 rgba(20,17,13,0.06), 0 1px 2px rgba(20,17,13,0.08);
  --shadow-md: 0 1px 0 rgba(20,17,13,0.05), 0 4px 12px rgba(20,17,13,0.10);
  --shadow-lg: 0 2px 0 rgba(20,17,13,0.05), 0 12px 28px rgba(20,17,13,0.14);

  /* ── Focus ring — ink with low-alpha halo ── */
  --focus-ring: 0 0 0 3px rgba(20,17,13,0.12);
  --focus-ring-bad: 0 0 0 3px rgba(164,51,27,0.10);

  /* ── Motion ── */
  --dur-fast: 0.12s;
  --dur-base: 0.15s;
  --dur-slow: 0.18s;
}

/* ── Reset & base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-md);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
}