/* ============================================================
   DESIGNSYSTEM — "Kiho"
   Editoriellt, minimalistiskt designsystem inspirerat av Karin Kihos
   portfölj (karinkiho.com): papper-och-bläck-palett, generös luft,
   grotesk + monospace, hårfina linjer i stället för tunga skuggor,
   nästan raka hörn och en enda dämpad accent (vermilion / 朱).

   Alla designtokens bor här. Komponenter byggs på dessa i styles.css.
   ============================================================ */

:root {
  /* ---- Färg: papper & bläck (monokrom bas) ---- */
  --paper: #f1efe9;        /* bakgrund, varmt papper */
  --paper-2: #e8e5dd;      /* dämpad alternativ yta */
  --surface: #faf9f5;      /* kort/paneler */
  --ink: #141414;          /* primär text / "bläck" */
  --ink-soft: #57534b;     /* sekundär text */
  --ink-faint: #9a968c;    /* etiketter, metatext */
  --line: #d9d5cc;         /* hårlinje */
  --line-strong: #c2bdb1;  /* tydligare linje */

  /* ---- Accent: vermilion (朱), används sparsamt ---- */
  --accent: #e8431f;       /* positivt / interaktivt / fokus */
  --accent-deep: #b8330f;
  --accent-tint: #f9e6df;  /* ljus accentvask */

  /* ---- Tillstånd ---- */
  --good: #2f6b4f;         /* rätt / behärskat = dämpad tallgrön (par till vermilion) */
  --good-deep: #1f5a3e;    /* mörkare grön för text på ljus botten */
  --good-tint: #e7efe1;    /* mjuk salviavask (rätt-svar-bakgrund) */
  --calm-tint: #ebe8e1;    /* fel svar = lugn, neutral — aldrig skrikig (inget rött) */

  /* ---- Typografi ---- */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Space Grotesk', var(--font-sans);
  --font-mono: 'Space Mono', 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;

  --tracking-label: 0.18em;  /* versala monoetiketter */
  --tracking-tight: -0.02em; /* stora rubriker */

  /* ---- Mellanrum (8-pt-aktig skala) ---- */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;
  --s9: 96px;

  /* ---- Hörn ---- */
  --radius: 3px;
  --radius-lg: 4px;

  /* ---- Rörelse ---- */
  --ease: cubic-bezier(0.2, 0.65, 0.2, 1);
  --dur: 0.25s;
  --dur-slow: 0.5s;

  /* ---- Layout ---- */
  --maxw: 880px;
  --gutter: clamp(16px, 4vw, 40px);
}