/* Design tokens sampled directly from assets/ameno-basic-concept.jpeg and
   assets/ameno-screens.png (hue/saturation clustering, not eyeballed).
   These are the source of truth for the Flutter ThemeData later. */

:root {
  /* Brand — coral is the primary action / active colour, gold the secondary. */
  --coral: #f86d56;
  --coral-deep: #e8624c; /* pressed / darker gradient stop */
  --coral-soft: #f88e6e; /* header gradient mid */
  --coral-tint: #fbdcd2; /* selected chips, soft fills */

  --gold: #edca73;
  --gold-deep: #d79a4c; /* gold button gradient bottom */
  --gold-soft: #f8c57c; /* header gradient right */
  --gold-tint: #f6e6c4; /* game-master card fill */

  /* Neutrals — warm, never pure grey. */
  --ink: #2c2320; /* headings, question text */
  --ink-soft: #6b5f59; /* secondary copy */
  --ink-mute: #b6bbc1; /* inactive nav icons */
  --paper: #fdf8f2; /* page background (warm cream) */
  --card: #ffffff;
  --hairline: #f0efef;

  /* Semantic */
  --correct: #3fae6a;
  --incorrect: #e8624c;

  /* Gradients lifted from the mockups */
  --grad-header: linear-gradient(100deg, var(--coral) 0%, var(--coral-soft) 45%, var(--gold-soft) 100%);
  --grad-coral-btn: linear-gradient(180deg, var(--coral) 0%, var(--coral-deep) 100%);
  --grad-gold-btn: linear-gradient(180deg, var(--gold) 0%, var(--gold-deep) 100%);

  /* Shape — the mockups are uniformly very round. */
  --r-pill: 999px;
  --r-card: 22px;
  --r-tile: 18px;
  --r-row: 14px;

  /* The buttons sit on a soft coloured shadow, not a grey one. */
  --shadow-coral: 0 6px 0 #d1543f, 0 10px 18px rgba(248, 109, 86, 0.35);
  --shadow-gold: 0 6px 0 #c08b3d, 0 10px 18px rgba(237, 202, 115, 0.35);
  --shadow-card: 0 4px 14px rgba(44, 35, 32, 0.08);

  /* Type — rounded display face throughout; see docs note on self-hosting. */
  --font-display: "Fredoka", "Baloo 2", system-ui, sans-serif;
  --font-body: "Nunito", system-ui, -apple-system, sans-serif;

  /* Legibility floor — timer, captions, nav (see play UX spec). */
  --text-body: 1.25rem;
  --text-timer: 0.9375rem; /* 15px */
  --text-round: 0.9375rem; /* 15px — coral/ink, not gold-on-cream */
  --text-caption: 0.8125rem; /* 13px */
  --text-nav: 0.8125rem; /* 13px */

  --ink-tagline: #3d342f;
}