/* PanQuiz — color tokens
   Extracted from panquiz.com (Divi site), play.panquiz.com CSS, and brand assets.
   Two surfaces share one brand: the marketing WEBSITE (playful, Divi) and the
   APP (Material Design, UIkit + sc- components). */

:root {
  /* ---- Brand wordmark palette (sampled from the logo, exact) ---- */
  --pq-red: #cf0012;
  --pq-orange: #ff6b21;
  --pq-amber: #ffa600;
  --pq-blue: #005fea;
  --pq-cyan: #00a6cc;
  --pq-green: #3dd100;
  --pq-magenta: #c233c4;
  --pq-outline: #cccccc;

  /* ---- Quiz answer shapes (from the app icon) ---- */
  --answer-red: #e21b3c;      /* triangle */
  --answer-blue: #1368ce;     /* diamond  */
  --answer-gold: #d09f36;     /* circle   */
  --answer-green: #26890c;    /* square   */

  /* ---- Website (marketing) ---- */
  --site-primary: #005aef;          /* pill CTA buttons */
  --site-primary-deep: #1664c3;     /* header CTA */
  --site-accent-yellow: #f3bc34;    /* menu underline + fancy underline */
  --site-accent-tomato: #ff6347;    /* red fancy underline */
  --site-navy: #0e1552;
  --site-illustration-orange: #e8871f; /* line-art illustration icons */
  --site-grad-hero: linear-gradient(45deg, #8089ff 0%, #54ceff 100%); /* @kind other */
  --site-grad-soft-blue: linear-gradient(180deg, #ffffff 0%, rgba(64, 101, 232, 0.8) 100%); /* @kind other */
  --site-grad-soft-pink: linear-gradient(180deg, #ffffff 0%, rgba(229, 151, 232, 0.8) 100%); /* @kind other */
  --site-grad-soft-orange: linear-gradient(45deg, #ffffff 0%, rgba(224, 115, 0, 0.25) 100%); /* @kind other */

  /* ---- App (Material) — user theme "md" ---- */
  --app-primary: #1565c0;
  --app-accent: #1e88e5;
  --app-complementary: #2962ff;
  --app-primary-surface: #e3f2fd;   /* light bg for active/flat-hover */
  --app-selection: #bbdefb;
  --app-selection-hover: #90caf9;
  --app-primary-pressed: #1259a9;
  --app-teal: #00838f;              /* default (player) theme + play header */

  /* ---- App semantic ---- */
  --success: #7cb342;
  --success-pressed: #628e34;
  --danger: #e53935;
  --danger-pressed: #cd1e1a;
  --warning: #ffb300;

  /* ---- App neutrals (Material ink system) ---- */
  --app-bg: #f5f5f5;
  --surface-card: #ffffff;
  --ink-primary: rgba(0, 0, 0, 0.87);
  --ink-secondary: rgba(0, 0, 0, 0.54);
  --ink-disabled: rgba(0, 0, 0, 0.38);
  --ink-divider: rgba(0, 0, 0, 0.12);
  --progress-track: #bdbdbd;

  /* ---- Semantic aliases ---- */
  --text-body: var(--ink-primary);
  --text-muted: var(--ink-secondary);
  --text-on-color: #ffffff;
  --surface-page: var(--app-bg);
  --link: var(--app-primary);
  --link-hover: var(--app-accent);
}