/**
 * Quizzman Homepage — semantic design tokens (theme-token-first)
 * Load after QMF tokens.css. Components use --qm-*; legacy --color-* bridged here.
 */

:root {
  --qm-bg: #f7f9ff;
  --qm-bg-soft: #eef4ff;
  --qm-surface: rgba(255, 255, 255, 0.82);
  --qm-surface-solid: #ffffff;
  --qm-surface-elevated: rgba(255, 255, 255, 0.94);

  --qm-text: #182033;
  --qm-text-muted: #647086;
  --qm-text-soft: #8a95aa;

  --qm-border: rgba(35, 50, 85, 0.10);
  --qm-border-strong: rgba(35, 50, 85, 0.16);

  --qm-brand: #5865f2;
  --qm-brand-2: #2f9bff;
  --qm-brand-soft: rgba(88, 101, 242, 0.10);
  --qm-brand-ring: rgba(88, 101, 242, 0.28);
  --qm-brand-glow: rgba(88, 101, 242, 0.16);

  --qm-shadow-sm: 0 8px 20px rgba(30, 42, 80, 0.08);
  --qm-shadow-md: 0 18px 48px rgba(30, 42, 80, 0.12);
  --qm-shadow-glow: 0 0 40px rgba(88, 101, 242, 0.16);
  --qm-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.65);

  --qm-header-bg: rgba(255, 255, 255, 0.78);
  --qm-header-border: rgba(35, 50, 85, 0.11);
  --qm-header-shadow:
    0 1px 0 rgba(255, 255, 255, 0.92),
    0 4px 18px rgba(30, 42, 80, 0.05),
    0 1px 2px rgba(30, 42, 80, 0.04);

  --qm-page-glow-1: rgba(88, 101, 242, 0.12);
  --qm-page-glow-2: rgba(47, 155, 255, 0.10);
  --qm-bg-canvas: var(--qm-bg);

  --qm-scrollbar: rgba(0, 0, 0, 0.18);
  --qm-scrollbar-hover: rgba(0, 0, 0, 0.28);
  --qm-marquee-fade-0: rgba(247, 249, 255, 0);
  --qm-marquee-fade-38: rgba(247, 249, 255, 0.38);
  --qm-marquee-fade-72: rgba(247, 249, 255, 0.72);
  --qm-marquee-fade-92: rgba(247, 249, 255, 0.92);
  --qm-transition: 180ms ease;
  --qm-icon-frame-bg: var(--qm-surface-solid);

  /* QMF unified-header bridge — single source via --qm-* */
  --qmf-header-bg: var(--qm-header-bg);
  --qmf-header-border: var(--qm-header-border);
  --qmf-header-shadow: var(--qm-header-shadow);

  /* Legacy bridges */
  --hub-page-bg: var(--qm-bg);
  --color-bg-page: var(--qm-bg);
  --color-bg-surface: var(--qm-surface-solid);
  --color-bg-subtle: var(--qm-bg-soft);
  --color-border-default: rgba(35, 50, 85, 0.12);
  --color-text-primary: var(--qm-text);
  --color-text-secondary: var(--qm-text-muted);
  --color-text-muted: var(--qm-text-soft);
  --color-brand-primary: var(--qm-brand);
  --color-brand-secondary: var(--qm-brand);
  --color-brand-accent: var(--qm-brand-2);
  --shadow-sm: var(--qm-shadow-sm);
  --shadow-md: var(--qm-shadow-md);
  --shadow-lg: var(--qm-shadow-md);

  --bg-dark: var(--qm-bg);
  --bg-darker: var(--qm-bg-soft);
  --bg-card: var(--qm-surface);
  --bg-glass: var(--qm-surface);
  --bg-glass-hover: var(--qm-bg-soft);
  --text-primary: var(--qm-text);
  --text-secondary: var(--qm-text-muted);
  --text-muted: var(--qm-text-soft);
  --border-subtle: var(--qm-border);
  --border-hover: var(--qm-border-strong);
  --accent-cyan: var(--qm-brand-2);
}

[data-theme="dark"] {
  --qm-bg: #090b18;
  --qm-bg-soft: #101326;
  --qm-surface: rgba(22, 25, 43, 0.76);
  --qm-surface-solid: #121527;
  --qm-surface-elevated: rgba(27, 31, 52, 0.94);

  --qm-text: #f4f7ff;
  --qm-text-muted: #a8b1c7;
  --qm-text-soft: #7d879d;

  --qm-border: rgba(255, 255, 255, 0.09);
  --qm-border-strong: rgba(255, 255, 255, 0.15);

  --qm-brand: #7c8cff;
  --qm-brand-2: #37c5ff;
  --qm-brand-soft: rgba(124, 140, 255, 0.14);
  --qm-brand-ring: rgba(124, 140, 255, 0.32);
  --qm-brand-glow: rgba(124, 140, 255, 0.20);

  --qm-shadow-sm: 0 8px 22px rgba(0, 0, 0, 0.26);
  --qm-shadow-md: 0 22px 60px rgba(0, 0, 0, 0.36);
  --qm-shadow-glow: 0 0 44px rgba(124, 140, 255, 0.20);
  --qm-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.06);

  --qm-header-bg: rgba(9, 11, 24, 0.88);
  --qm-header-border: rgba(255, 255, 255, 0.09);
  --qm-header-shadow: 0 1px 0 rgba(255, 255, 255, 0.04), 0 8px 32px rgba(0, 0, 0, 0.22);

  --qm-page-glow-1: rgba(124, 140, 255, 0.14);
  --qm-page-glow-2: rgba(55, 197, 255, 0.08);
  --qm-bg-canvas: var(--qm-bg);

  --qm-scrollbar: rgba(255, 255, 255, 0.22);
  --qm-scrollbar-hover: rgba(255, 255, 255, 0.34);
  --qm-marquee-fade-0: rgba(9, 11, 24, 0);
  --qm-marquee-fade-38: rgba(6, 10, 24, 0.38);
  --qm-marquee-fade-72: rgba(3, 7, 18, 0.72);
  --qm-marquee-fade-92: rgba(2, 6, 23, 0.92);
  --qm-icon-frame-bg: rgba(255, 255, 255, 0.04);

  --qmf-header-bg: var(--qm-header-bg);
  --qmf-header-border: var(--qm-header-border);
  --qmf-header-shadow: var(--qm-header-shadow);

  --color-border-default: rgba(255, 255, 255, 0.10);
}