/* TriviaGreen design tokens — from design/handoff/README.md "Design Tokens". */
:root {
  /* Greens */
  --tg-forest: #1F6F4A;
  --tg-forest-dark: #174F35;
  --tg-forest-2: #2A7F57;
  --tg-leaf: #7BC67E;
  --tg-leaf-tint: #E3F3E2;
  --tg-fern-belly: #CDEBC4;

  /* Coral (primary CTA) */
  --tg-coral: #FF7A59;
  --tg-coral-hover: #FF8F72;
  --tg-coral-shadow: #D9573A;

  /* Sky / ocean */
  --tg-sky: #4BA3E3;
  --tg-sky-tint: #E2F0FB;
  --tg-sky-border: #9CC7EA;
  --tg-sky-skeleton: #CFE3F3;
  --tg-sky-skeleton-2: #D9EAF6;
  --tg-sky-progress: #C9DFF0;
  --tg-ocean-text: #1B5F94;

  /* Neutrals / surfaces */
  --tg-sand: #FAF6EE;
  --tg-sand-2: #F2ECDF;
  --tg-line: #E6DFD0;
  --tg-chip-border: #D9D1BF;
  --tg-moss: #1C2B22;
  --tg-text-2: #3E4D43;
  --tg-text-3: #5C6B60;
  --tg-white: #FFFFFF;

  /* Ads */
  --tg-ad-grey: #E8E4DB;
  --tg-ad-label: #7A857D;

  /* Answer states */
  --tg-correct: #2E9D5B;
  --tg-correct-tint: #E1F3E7;
  --tg-correct-label: #1E6B3D;
  --tg-wrong: #D64545;
  --tg-wrong-tint: #FBE3E3;
  --tg-wrong-label: #A12F2F;

  /* Category accents */
  --tg-amber: #E8A33D;
  --tg-amber-tint: #FBEBD3;
  --tg-amber-text: #8A5410;
  --tg-indigo: #3B3F8F;
  --tg-indigo-tint: #E6E6F5;
  --tg-teal: #2B6F6E;

  /* Footer */
  --tg-footer-text: #D7EBDD;
  --tg-footer-text-2: #BFDCCB;
  --tg-footer-border: #4E9474;
  --tg-footer-border-2: #3C8663;

  /* Typography */
  --tg-font-head: "Nunito", system-ui, -apple-system, Segoe UI, sans-serif;
  --tg-font-body: "Source Sans 3", system-ui, -apple-system, Segoe UI, sans-serif;

  /* Radii */
  --tg-r-tag: 6px;
  --tg-r-sm: 12px;
  --tg-r-btn: 14px;
  --tg-r-card: 16px;
  --tg-r-feature: 20px;
  --tg-r-band: 24px;
  --tg-r-pill: 999px;

  /* Shadows */
  --tg-shadow-card: 0 3px 12px rgba(28, 43, 34, .07);
  --tg-shadow-card-hover: 0 10px 24px rgba(28, 43, 34, .14);
  --tg-shadow-raised: 0 4px 16px rgba(28, 43, 34, .08);
  --tg-shadow-hero: 0 8px 24px rgba(28, 43, 34, .12);

  /* Layout */
  --tg-pad-mobile: 20px;
  --tg-pad-desktop: 80px;
  --tg-content: 1120px;
  --tg-body-max: 720px;

  /* Focus ring */
  --tg-focus: 3px solid var(--tg-sky);
}