/*
 * WTFact! Design System
 * Aesthetic: Playful / Vibrant — Curiosity Cabinet
 * Fonts: Fraunces (display) + DM Sans (body)
 */

/* ─── Google Fonts ─────────────────────────────────────────────────────────── */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,300..900&family=DM+Sans:ital,opsz,wght@0,9..40,300..700;1,9..40,300..700&display=swap");

/* ─── CSS Custom Properties ─────────────────────────────────────────────────── */
:root {
  /* Core palette */
  --amber: #f5a623;
  --amber-light: #fdebc8;
  --amber-dark: #c07d10;
  --ink: #1a1a2e;
  --ink-soft: #3d3d5c;
  --ink-muted: #6e6e8a;
  --cream: #fdfaf3;
  --cream-dark: #f3efe3;
  --white: #ffffff;
  --red: #e8453c;
  --green: #2ecc71;

  /* Category badge colors */
  --cat-animals: #4caf50;
  --cat-food: #ff7043;
  --cat-history: #8d6e63;
  --cat-science: #42a5f5;
  --cat-sports: #ec407a;
  --cat-technology: #7e57c2;
  --cat-geography: #26a69a;
  --cat-entertainment: #ffa726;
  --cat-health: #66bb6a;
  --cat-miscellaneous: #78909c;
  --cat-politics: #b71c1c;
  --cat-showbiz: #f9a825;

  /* Typography */
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "DM Sans", system-ui, sans-serif;
  --font-sans: "DM Sans", system-ui, sans-serif;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;
  --space-10: 4rem;
  --space-12: 6rem;

  /* Radii */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-sm:
    0 1px 3px rgba(26, 26, 46, 0.08), 0 1px 2px rgba(26, 26, 46, 0.06);
  --shadow-md:
    0 4px 12px rgba(26, 26, 46, 0.1), 0 2px 6px rgba(26, 26, 46, 0.06);
  --shadow-lg:
    0 12px 32px rgba(26, 26, 46, 0.14), 0 4px 12px rgba(26, 26, 46, 0.08);
  --shadow-amber: 0 4px 20px rgba(245, 166, 35, 0.35);

  /* Transitions */
  --transition: 0.2s ease;
  --transition-slow: 0.4s ease;

  /* Layout */
  --container: 1200px;
  --nav-height: 64px;
}