/* ============================================================
   FOUNDATION · Design System Core
   Refined / Apple-like · vanilla CSS · framework-agnostic
   Drops into vanilla HTML, Tabler single-file, or React.
   Layers: 1) primitives  2) semantic  3) base/reset
   Skin = override --accent-* via a skin-*.css file.
   ============================================================ */

/* ---- Font ---------------------------------------------------
   Atkinson Hyperlegible (low-vision optimised) + Arial fallback.
   Self-degrades gracefully if the webfont fails to load.       */
@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400&display=swap');

/* ============================================================
   1 · PRIMITIVES  (raw values — never used directly in markup)
   ============================================================ */
:root {
  /* Neutral ramp — cool slate, calm + high-contrast text */
  --c-neutral-0:  #ffffff;
  --c-neutral-25: #fbfcfd;
  --c-neutral-50: #f6f8fa;
  --c-neutral-100:#eef1f5;
  --c-neutral-200:#e1e6ec;
  --c-neutral-300:#cbd3dd;
  --c-neutral-400:#9aa6b4;
  --c-neutral-500:#6b7787;
  --c-neutral-600:#4b5563;
  --c-neutral-700:#374151;
  --c-neutral-800:#222b38;
  --c-neutral-900:#141a22;

  /* Status ramps */
  --c-green-50:#e9f8ef;  --c-green-500:#1f9d57;  --c-green-700:#147a41;
  --c-amber-50:#fdf3e3;  --c-amber-500:#cc8a1a;  --c-amber-700:#9a6406;
  --c-red-50:#fdecec;    --c-red-500:#d8443c;    --c-red-700:#a82f28;
  --c-blue-50:#eaf1fe;   --c-blue-500:#2f6bd8;   --c-blue-700:#1e4ea8;

  /* Default accent ramp (work skin overrides these) */
  --c-accent-50:#eaf0fe;
  --c-accent-100:#d6e2fd;
  --c-accent-500:#2f5fd8;
  --c-accent-600:#244dc0;
  --c-accent-700:#1c3d9c;
  --c-accent-contrast:#ffffff;

  /* Spacing — strict 8px grid (4px half-step for fine work) */
  --space-0:0;
  --space-1:0.25rem;  /*  4 */
  --space-2:0.5rem;   /*  8 */
  --space-3:0.75rem;  /* 12 */
  --space-4:1rem;     /* 16 */
  --space-5:1.5rem;   /* 24 */
  --space-6:2rem;     /* 32 */
  --space-7:3rem;     /* 48 */
  --space-8:4rem;     /* 64 */

  /* Radius */
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:18px;
  --radius-xl:24px;
  --radius-pill:999px;

  /* Layered soft shadows (depth without noise) */
  --shadow-xs:0 1px 2px rgba(20,26,34,.05);
  --shadow-sm:0 1px 2px rgba(20,26,34,.05), 0 2px 6px rgba(20,26,34,.05);
  --shadow-md:0 2px 4px rgba(20,26,34,.04), 0 8px 20px rgba(20,26,34,.08);
  --shadow-lg:0 6px 12px rgba(20,26,34,.06), 0 20px 40px rgba(20,26,34,.12);
  --shadow-inset:inset 0 1px 0 rgba(255,255,255,.6);

  /* Type — fluid scale, body never below 18px */
  --font-sans:'Atkinson Hyperlegible', Arial, system-ui, sans-serif;
  --text-xs:0.875rem;   /* 15.75 — meta/labels only */
  --text-sm:1rem;       /* 18 */
  --text-base:1.125rem; /* 20 — body default */
  --text-md:1.25rem;    /* 22 */
  --text-lg:1.5rem;     /* 27 */
  --text-xl:1.875rem;   /* 33 */
  --text-2xl:2.375rem;  /* 42 */
  --text-3xl:3rem;      /* 54 */
  --leading-tight:1.25;
  --leading-snug:1.45;
  --leading-relaxed:1.75;
  --tracking:0.01em;
  --tracking-wide:0.06em;

  /* Motion */
  --ease:cubic-bezier(.2,.6,.2,1);
  --dur-fast:120ms;
  --dur:200ms;
  --dur-slow:320ms;

  /* Layout */
  --container:1180px;
  --reading:680px;   /* max width for prose blocks */
  --tap:44px;        /* min interactive target */
}

/* ============================================================
   2 · SEMANTIC  (what markup actually references)
   ============================================================ */
:root {
  --bg:var(--c-neutral-50);
  --surface:var(--c-neutral-0);
  --surface-2:var(--c-neutral-25);
  --surface-sunken:var(--c-neutral-100);

  --text:var(--c-neutral-900);
  --text-secondary:var(--c-neutral-700);
  --text-muted:var(--c-neutral-500);
  --text-on-accent:var(--c-accent-contrast);

  --border:var(--c-neutral-200);
  --border-strong:var(--c-neutral-300);
  --ring:color-mix(in srgb, var(--c-accent-500) 40%, transparent);

  --accent:var(--c-accent-500);
  --accent-hover:var(--c-accent-600);
  --accent-active:var(--c-accent-700);
  --accent-weak:var(--c-accent-50);
  --accent-weak-border:var(--c-accent-100);

  --success:var(--c-green-500); --success-weak:var(--c-green-50); --success-strong:var(--c-green-700);
  --warn:var(--c-amber-500);    --warn-weak:var(--c-amber-50);    --warn-strong:var(--c-amber-700);
  --danger:var(--c-red-500);    --danger-weak:var(--c-red-50);    --danger-strong:var(--c-red-700);
  --info:var(--c-blue-500);     --info-weak:var(--c-blue-50);     --info-strong:var(--c-blue-700);
}

/* ============================================================
   3 · BASE / RESET
   ============================================================ */
*, *::before, *::after { box-sizing:border-box; }
* { margin:0; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body {
  font-family:var(--font-sans);
  font-size:var(--text-base);
  line-height:var(--leading-relaxed);
  letter-spacing:var(--tracking);
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4 { line-height:var(--leading-tight); font-weight:700; color:var(--text); letter-spacing:-0.01em; }
h1 { font-size:var(--text-2xl); }
h2 { font-size:var(--text-xl); }
h3 { font-size:var(--text-lg); }
h4 { font-size:var(--text-md); }

p { line-height:var(--leading-relaxed); }
a { color:var(--accent); text-underline-offset:3px; }
a:hover { color:var(--accent-hover); }

img,svg { display:block; max-width:100%; }
ul,ol { padding-left:var(--space-5); }
li { margin-bottom:var(--space-1); }

/* Focus — always visible, never removed */
:focus-visible { outline:3px solid var(--ring); outline-offset:2px; border-radius:6px; }

::selection { background:var(--accent-weak); color:var(--accent-active); }

/* Honour reduced-motion */
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.001ms!important; transition-duration:.001ms!important; scroll-behavior:auto!important; }
}

/* ============================================================
   LAYOUT HELPERS  (the bento bones)
   ============================================================ */
.container { width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--space-5); }
.prose { max-width:var(--reading); }
.stack > * + * { margin-top:var(--space-4); }
.stack-sm > * + * { margin-top:var(--space-2); }
.stack-lg > * + * { margin-top:var(--space-6); }
.row { display:flex; gap:var(--space-3); align-items:center; }
.row-between { display:flex; gap:var(--space-3); align-items:center; justify-content:space-between; }
.wrap { flex-wrap:wrap; }
.grid { display:grid; gap:var(--space-4); }
/* Auto-fit bento grid — content blocks span naturally, mobile-first */
.grid-auto { grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); }
.grid-2 { grid-template-columns:1fr; }
.grid-3 { grid-template-columns:1fr; }
.grid-4 { grid-template-columns:1fr; }
@media (min-width:680px){ .grid-2{grid-template-columns:repeat(2,1fr);} .grid-4{grid-template-columns:repeat(2,1fr);} }
@media (min-width:960px){ .grid-3{grid-template-columns:repeat(3,1fr);} .grid-4{grid-template-columns:repeat(4,1fr);} }
.span-2 { grid-column:span 2; }
@media (max-width:679px){ .span-2{grid-column:span 1;} }

/* Utility text */
.muted { color:var(--text-muted); }
.secondary { color:var(--text-secondary); }
.eyebrow { font-size:var(--text-xs); text-transform:uppercase; letter-spacing:var(--tracking-wide); color:var(--text-muted); font-weight:700; }
.center { text-align:center; }
.nowrap { white-space:nowrap; }