/* ── Project Design Tokens ────────────────────────────────────────────
   Generated by Nodge — edit freely or regenerate from project settings
   ──────────────────────────────────────────────────────────────────── */

/* Pubquiz palette */
:root {
  --color-text:             #30261f;
  --color-text-muted:       #786b5e;
  --color-bg:               #f4eadb;
  --color-surface:          #fffaf1;
  --color-border:           #decfbc;
  --color-primary:          #c94d36;
  --color-primary-hover:    #a93b29;
  --color-primary-20:       rgba(201, 77, 54, 0.15);
  --color-secondary:        #1e6b62;
  --color-accent:           #e8a93a;
  --color-hover:            rgba(48, 38, 31, 0.06);
  --color-active:           #fffaf1;
  --color-error:            #b03d35;
  --color-error-bg:         rgba(176, 61, 53, 0.1);

  --font-ui:   Georgia, 'Times New Roman', serif;
  --font-body: 'Trebuchet MS', Arial, sans-serif;
  --font-code: 'JetBrains Mono', 'Fira Code', monospace;

  --radius:    10px;
  --radius-sm: 6px;
}

/* Light mode (browser preference) */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --color-text:             #1e293b;
    --color-text-muted:       #535558;
    --color-bg:               #f8fafc;
    --color-surface:          #eaf0f6;
    --color-border:           #e1eaf2;
    --color-primary:          #2563eb;
    --color-primary-hover:    #1350d4;
    --color-primary-20:       rgba(37, 99, 235, 0.2);
    --color-secondary-20:     rgba(8, 145, 178, 0.2);
    --color-secondary:        #0891b2;
    --color-accent:           #0e7490;
    --color-accent-20:        rgba(14, 116, 144, 0.2);
    --color-muted-20:         rgba(83, 85, 88, 0.2);
    --color-overlay:          rgba(0, 0, 0, 0.5);
    --color-on-primary:       #ffffff;
    --color-hover:            rgba(0, 0, 0, 0.04);
    --color-active:           #f8fafc;
    --color-error:            #c0392b;
    --color-error-bg:         rgba(192, 57, 43, 0.08);
  }
}

/* Light mode (forced via user preference) */
:root[data-theme="light"] {
  --color-text:             #1e293b;
  --color-text-muted:       #535558;
  --color-bg:               #f8fafc;
  --color-surface:          #eaf0f6;
  --color-border:           #e1eaf2;
  --color-primary:          #2563eb;
  --color-primary-hover:    #1350d4;
  --color-primary-20:       rgba(37, 99, 235, 0.2);
  --color-secondary-20:     rgba(8, 145, 178, 0.2);
  --color-secondary:        #0891b2;
  --color-accent:           #0e7490;
  --color-accent-20:        rgba(14, 116, 144, 0.2);
  --color-muted-20:         rgba(83, 85, 88, 0.2);
  --color-overlay:          rgba(0, 0, 0, 0.5);
  --color-on-primary:       #ffffff;
  --color-hover:            rgba(0, 0, 0, 0.04);
  --color-active:           #f8fafc;
  --color-error:            #c0392b;
  --color-error-bg:         rgba(192, 57, 43, 0.08);
}

/* Keep the quiz palette consistent with the user's browser theme. */
:root,
:root[data-theme="light"],
:root[data-theme="dark"] {
  --color-text: #30261f;
  --color-text-muted: #786b5e;
  --color-bg: #f4eadb;
  --color-surface: #fffaf1;
  --color-border: #decfbc;
  --color-primary: #c94d36;
  --color-primary-hover: #a93b29;
  --color-secondary: #1e6b62;
  --color-accent: #e8a93a;
  --color-hover: rgba(48, 38, 31, 0.06);
  --color-error: #b03d35;
  --color-error-bg: rgba(176, 61, 53, 0.1);
  --font-ui: Georgia, 'Times New Roman', serif;
  --font-body: 'Trebuchet MS', Arial, sans-serif;
}