/* ══════════════════════════════════════════════════════════════════════════
   Modernist — design-system tokens (ported from the claude.ai/design handoff
   bundle's ds.css). This is the source of truth for the LoadedBakedPotato
   dashboard's look. Flat / architectural: accent #ec3013 on a #f3f2f2 ground,
   zero corner radius, 2px rules, Archivo type.

   SELF-HOSTED, CSP-CLEAN: Archivo ships as one local variable woff2 (wght
   100–900) served from origin under `default-src 'self'`. The handoff's
   Google-Fonts @import is intentionally NOT used — `style-src 'self'` blocks it
   and self-hosting keeps the external-asset surface closed (PR #17 discipline).
   ══════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;            /* variable wght axis, one file for 400/600/800 */
  font-display: swap;
  src: url("assets/fonts/archivo-var.woff2") format("woff2");
}

:root {
  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-text: #201e1d;
  --color-accent: #ec3013;
  --color-accent-2: #e15b47;
  --color-divider: color-mix(in srgb, #201e1d 40%, transparent);

  /* Tonal ramps — generated in OKLCH on one shared lightness scale, so the same
     step of any role matches the others in visual value. These are also the
     source palette for charts (dataviz skill): assign categorical hues from the
     accent/neutral ramps in fixed order; never sum views into interactions. */
  --color-neutral-100: #f8f4f4;
  --color-neutral-200: #eae7e7;
  --color-neutral-300: #d7d3d3;
  --color-neutral-400: #bab6b6;
  --color-neutral-500: #9b9797;
  --color-neutral-600: #7d7979;
  --color-neutral-700: #605d5d;
  --color-neutral-800: #444141;
  --color-neutral-900: #2d2b2b;

  --color-accent-100: #fff2ef;
  --color-accent-200: #ffe0d9;
  --color-accent-300: #ffc4b8;
  --color-accent-400: #ff9783;
  --color-accent-500: #ff563c;
  --color-accent-600: #dd2b0f;
  --color-accent-700: #ae1800;
  --color-accent-800: #7c1405;
  --color-accent-900: #4d170e;

  --color-accent-2-100: #fff2ef;
  --color-accent-2-200: #ffe0da;
  --color-accent-2-300: #ffc4b9;
  --color-accent-2-400: #ff9784;
  --color-accent-2-500: #ef6853;
  --color-accent-2-600: #c94b39;
  --color-accent-2-700: #9e3526;
  --color-accent-2-800: #71261b;
  --color-accent-2-900: #471d16;

  --font-heading: "Archivo", system-ui, sans-serif;
  --font-heading-weight: 800;
  --font-body: "Archivo", system-ui, sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;

  /* Elevation — soft ink-tinted shadows on the light ground. */
  --shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);
}