/* =============================================================
   01-tokens-and-base.css
   Design tokens, font import, global reset
   ============================================================= */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");

/* ── Design Tokens ──
   These back the var(--*) references used throughout every stylesheet.
   Values mirror the reference table below. */
:root {
  --grey-50: #f9fafb;
  --grey-100: #f3f4f6;
  --grey-200: #e5e7eb;
  --grey-300: #d2d6db;
  --grey-400: #9da4ae;
  --grey-500: #6c737f;
  --grey-600: #4d5761;
  --grey-700: #384250;
  --grey-800: #1f2a37;
  --grey-900: #111927;

  --green: #4ade80;
  --amber: #f59e0b;
  --indigo: #a5b4fc;

  --shadow-card: 0 4px 12px rgba(17, 25, 39, 0.04);
  --shadow-hover: 0 8px 18px rgba(17, 25, 39, 0.06);
}

/* ── Reset ── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  font-family: "Inter", sans-serif;
  background: #f9fafb;
}
a {
  text-decoration: none;
  color: inherit;
}

/* ── Design Token Reference (not CSS custom properties — used as hard values throughout)
   grey-50:  #f9fafb   grey-100: #f3f4f6   grey-200: #e5e7eb   grey-300: #d2d6db
   grey-400: #9da4ae   grey-500: #6c737f   grey-600: #4d5761   grey-700: #384250
   grey-800: #1f2a37   grey-900: #111927
   green: #4ade80   amber: #f59e0b   indigo: #a5b4fc
   card shadow:   0 4px 12px rgba(17,25,39,0.04)
   hover shadow:  0 8px 18px rgba(17,25,39,0.06)
   radius-card:   16px    radius-inner: 12px    radius-btn: 12px
── */