/* ==========================================================================
   Course & Cloth — shared design tokens
   Source of truth: DESIGN.md (synced from the product app repo,
   MuckStack-Projects/Web-Android/Course-and-Cloth). Token names match the
   app's styles.css (--color-*, --space-*, --radius-*) so values can be
   diffed/synced between the two repos. Change values there first.
   ========================================================================== */

/* Self-hosted fonts (latin subsets from Google Fonts; Fraunces and Manrope
   are variable files covering their weight ranges). */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 650;
  font-display: swap;
  src: url("/fonts/fraunces-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("/fonts/manrope-latin.woff2") format("woff2");
}

@font-face {
  font-family: "DM Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/dmmono-400-latin.woff2") format("woff2");
}

@font-face {
  font-family: "DM Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/dmmono-500-latin.woff2") format("woff2");
}

:root {
  /* Colors */
  --color-ink: #1D271F;
  --color-ink-soft: #314035;
  --color-paper: #F4F0E8;
  --color-surface: #FFFDF8;
  --color-line: #D9D3C8;
  --color-muted: #667066;
  --color-moss: #355D46;
  --color-moss-hover: #294A37;
  --color-lime: #D2E663;
  --color-sale: #AE473A;
  --color-focus: #245E91;

  /* Typography (per DESIGN.md: Fraunces display, Manrope body, DM Mono labels) */
  --font-display: "Fraunces", Georgia, serif;
  --font-sans: "Manrope", -apple-system, "Segoe UI", sans-serif;
  --font-mono: "DM Mono", ui-monospace, "SF Mono", monospace;

  /* Spacing (4px scale) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Shape */
  --radius-sm: 6px;   /* inputs, buttons */
  --radius-md: 10px;  /* cards */
  --radius-lg: 16px;

  /* Controls */
  --control-height: 44px; /* minimum touch target */
}