/* QRimb landing – shared light/dark theme (toggle + system preference) */

:root {
  color-scheme: light;
  --bg-body: #ffffff;
  --text-body: #000000;
  --bg-hero: linear-gradient(180deg, #f8fafc 0%, #ffffff 50%, #f1f5f9 100%);
  --text-hero: #000000;
  --text-hero-lead: #374151;
  --text-hero-sub: #6b7280;
  --border-hero: #e5e7eb;
  --bg-surface: #ffffff;
  --bg-surface-alt: #f9fafb;
  --bg-surface-muted: #f8fafc;
  --border-default: #e5e7eb;
  --border-strong: #333333;
  --text-heading: #000000;
  --text-heading-brand: #0f172a;
  --text-secondary: #4b5563;
  --text-muted: #6b7280;
  --text-slate: #475569;
  --text-tertiary: #64748b;
  --text-on-dark: #f1f5f9;
  --text-muted-on-dark: #94a3b8;
  --text-link: #0f172a;
  --text-link-inverse: #f8fafc;
  --bg-card: #ffffff;
  --border-card: #e5e7eb;
  --border-card-hover: #000000;
  --bg-card-elevated: #111111;
  --bg-step: #ffffff;
  --bg-step-alt: #1a1a1a;
  --bg-accent: #000000;
  --text-on-accent: #ffffff;
  --bg-step-num: #000000;
  --text-step-num: #ffffff;
  --bg-section-inset: #111111;
  --bg-mission: #f8fafc;
  --bg-mission-card: #ffffff;
  --bg-kicker: #e2e8f0;
  --text-kicker: #0f172a;
  --shadow-card: 0 10px 30px rgba(15, 23, 42, 0.05);
  --toggle-bg: #ffffff;
  --toggle-border: #e5e7eb;
  --toggle-text: #374151;
  --toggle-hover-bg: #f9fafb;
  --toggle-hover-border: #d1d5db;
  --btn-primary-bg: #0f172a;
  --btn-primary-text: #ffffff;
  --btn-primary-border: #0f172a;
  --btn-primary-hover-bg: #1e293b;
  --btn-primary-hover-border: #1e293b;
  --btn-secondary-bg: #ffffff;
  --btn-secondary-text: #0f172a;
  --btn-secondary-border: #d1d5db;
  --btn-secondary-hover-bg: #f8fafc;
  --btn-secondary-hover-border: #94a3b8;
  --bg-page-card: #ffffff;
  --shadow-page-card: 0 12px 32px rgba(15, 23, 42, 0.04);
  --warning-bg: #fef2f2;
  --warning-border: #dc2626;
  --warning-text: #991b1b;
  --info-bg: #f0f9ff;
  --info-border: #0284c7;
  --info-text: #0c4a6e;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg-body: #000000;
  --text-body: #ffffff;
  --bg-hero: linear-gradient(180deg, #0f0f0f 0%, #000000 50%, #0a0a0a 100%);
  --text-hero: #ffffff;
  --text-hero-lead: #d1d5db;
  --text-hero-sub: #9ca3af;
  --border-hero: #333333;
  --bg-surface: #000000;
  --bg-surface-alt: #0a0a0a;
  --bg-surface-muted: #0f0f0f;
  --border-default: #333333;
  --border-strong: #404040;
  --text-heading: #ffffff;
  --text-heading-brand: #f1f5f9;
  --text-secondary: #d1d5db;
  --text-muted: #9ca3af;
  --text-slate: #94a3b8;
  --text-tertiary: #94a3b8;
  --text-on-dark: #f1f5f9;
  --text-muted-on-dark: #94a3b8;
  --text-link: #f8fafc;
  --text-link-inverse: #0f172a;
  --bg-card: #111111;
  --border-card: #333333;
  --border-card-hover: #ffffff;
  --bg-card-elevated: #161616;
  --bg-step: #1a1a1a;
  --bg-step-alt: #1a1a1a;
  --bg-accent: #ffffff;
  --text-on-accent: #000000;
  --bg-step-num: #ffffff;
  --text-step-num: #000000;
  --bg-section-inset: #111111;
  --bg-mission: #0f0f0f;
  --bg-mission-card: #161616;
  --bg-kicker: #1f2937;
  --text-kicker: #f8fafc;
  --shadow-card: none;
  --toggle-bg: #1f1f1f;
  --toggle-border: #404040;
  --toggle-text: #e5e7eb;
  --toggle-hover-bg: #2a2a2a;
  --toggle-hover-border: #404040;
  --btn-primary-bg: #f8fafc;
  --btn-primary-text: #0f172a;
  --btn-primary-border: #f8fafc;
  --btn-primary-hover-bg: #e2e8f0;
  --btn-primary-hover-border: #e2e8f0;
  --btn-secondary-bg: transparent;
  --btn-secondary-text: #f1f5f9;
  --btn-secondary-border: #334155;
  --btn-secondary-hover-bg: #111827;
  --btn-secondary-hover-border: #475569;
  --bg-page-card: #141414;
  --shadow-page-card: none;
  --warning-bg: #7f1d1d;
  --warning-border: #dc2626;
  --warning-text: #fca5a5;
  --info-bg: #0c4a6e;
  --info-border: #0284c7;
  --info-text: #bae6fd;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg-body: #000000;
    --text-body: #ffffff;
    --bg-hero: linear-gradient(180deg, #0f0f0f 0%, #000000 50%, #0a0a0a 100%);
    --text-hero: #ffffff;
    --text-hero-lead: #d1d5db;
    --text-hero-sub: #9ca3af;
    --border-hero: #333333;
    --bg-surface: #000000;
    --bg-surface-alt: #0a0a0a;
    --bg-surface-muted: #0f0f0f;
    --border-default: #333333;
    --border-strong: #404040;
    --text-heading: #ffffff;
    --text-heading-brand: #f1f5f9;
    --text-secondary: #d1d5db;
    --text-muted: #9ca3af;
    --text-slate: #94a3b8;
    --text-tertiary: #94a3b8;
    --text-on-dark: #f1f5f9;
    --text-muted-on-dark: #94a3b8;
    --text-link: #f8fafc;
    --text-link-inverse: #0f172a;
    --bg-card: #111111;
    --border-card: #333333;
    --border-card-hover: #ffffff;
    --bg-card-elevated: #161616;
    --bg-step: #1a1a1a;
    --bg-step-alt: #1a1a1a;
    --bg-accent: #ffffff;
    --text-on-accent: #000000;
    --bg-step-num: #ffffff;
    --text-step-num: #000000;
    --bg-section-inset: #111111;
    --bg-mission: #0f0f0f;
    --bg-mission-card: #161616;
    --bg-kicker: #1f2937;
    --text-kicker: #f8fafc;
    --shadow-card: none;
    --toggle-bg: #1f1f1f;
    --toggle-border: #404040;
    --toggle-text: #e5e7eb;
    --toggle-hover-bg: #2a2a2a;
    --toggle-hover-border: #404040;
    --btn-primary-bg: #f8fafc;
    --btn-primary-text: #0f172a;
    --btn-primary-border: #f8fafc;
    --btn-primary-hover-bg: #e2e8f0;
    --btn-primary-hover-border: #e2e8f0;
    --btn-secondary-bg: transparent;
    --btn-secondary-text: #f1f5f9;
    --btn-secondary-border: #334155;
    --btn-secondary-hover-bg: #111827;
    --btn-secondary-hover-border: #475569;
    --bg-page-card: #141414;
    --shadow-page-card: none;
    --warning-bg: #7f1d1d;
    --warning-border: #dc2626;
    --warning-text: #fca5a5;
    --info-bg: #0c4a6e;
    --info-border: #0284c7;
    --info-text: #bae6fd;
  }
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg-body: #ffffff;
  --text-body: #000000;
  --bg-hero: linear-gradient(180deg, #f8fafc 0%, #ffffff 50%, #f1f5f9 100%);
  --text-hero: #000000;
  --text-hero-lead: #374151;
  --text-hero-sub: #6b7280;
  --border-hero: #e5e7eb;
  --bg-surface: #ffffff;
  --bg-surface-alt: #f9fafb;
  --bg-surface-muted: #f8fafc;
  --border-default: #e5e7eb;
  --border-strong: #333333;
  --text-heading: #000000;
  --text-heading-brand: #0f172a;
  --text-secondary: #4b5563;
  --text-muted: #6b7280;
  --text-slate: #475569;
  --text-tertiary: #64748b;
  --text-on-dark: #f1f5f9;
  --text-muted-on-dark: #94a3b8;
  --text-link: #0f172a;
  --text-link-inverse: #f8fafc;
  --bg-card: #ffffff;
  --border-card: #e5e7eb;
  --border-card-hover: #000000;
  --bg-card-elevated: #111111;
  --bg-step: #ffffff;
  --bg-step-alt: #1a1a1a;
  --bg-accent: #000000;
  --text-on-accent: #ffffff;
  --bg-step-num: #000000;
  --text-step-num: #ffffff;
  --bg-section-inset: #111111;
  --bg-mission: #f8fafc;
  --bg-mission-card: #ffffff;
  --bg-kicker: #e2e8f0;
  --text-kicker: #0f172a;
  --shadow-card: 0 10px 30px rgba(15, 23, 42, 0.05);
  --toggle-bg: #ffffff;
  --toggle-border: #e5e7eb;
  --toggle-text: #374151;
  --toggle-hover-bg: #f9fafb;
  --toggle-hover-border: #d1d5db;
  --btn-primary-bg: #0f172a;
  --btn-primary-text: #ffffff;
  --btn-primary-border: #0f172a;
  --btn-primary-hover-bg: #1e293b;
  --btn-primary-hover-border: #1e293b;
  --btn-secondary-bg: #ffffff;
  --btn-secondary-text: #0f172a;
  --btn-secondary-border: #d1d5db;
  --btn-secondary-hover-bg: #f8fafc;
  --btn-secondary-hover-border: #94a3b8;
  --bg-page-card: #ffffff;
  --shadow-page-card: 0 12px 32px rgba(15, 23, 42, 0.04);
  --warning-bg: #fef2f2;
  --warning-border: #dc2626;
  --warning-text: #991b1b;
  --info-bg: #f0f9ff;
  --info-border: #0284c7;
  --info-text: #0c4a6e;
}

/* Logo swap */
.hero-logo-light,
.logo-light { display: block; }
.hero-logo-dark,
.logo-dark { display: none; }

:root[data-theme="dark"] .hero-logo-light,
:root[data-theme="dark"] .logo-light {
  display: none !important;
}

:root[data-theme="dark"] .hero-logo-dark,
:root[data-theme="dark"] .logo-dark {
  display: block !important;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero-logo-light,
  :root:not([data-theme="light"]) .logo-light {
    display: none !important;
  }

  :root:not([data-theme="light"]) .hero-logo-dark,
  :root:not([data-theme="light"]) .logo-dark {
    display: block !important;
  }
}

:root[data-theme="light"] .hero-logo-light,
:root[data-theme="light"] .logo-light {
  display: block !important;
}

:root[data-theme="light"] .hero-logo-dark,
:root[data-theme="light"] .logo-dark {
  display: none !important;
}

/* Theme toggle button */
.theme-toggle {
  position: fixed;
  top: max(16px, env(safe-area-inset-top));
  right: 20px;
  z-index: 100;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--toggle-border);
  background: var(--toggle-bg);
  color: var(--toggle-text);
  font-size: 1.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: background 0.2s, border-color 0.2s;
}

.theme-toggle:hover {
  background: var(--toggle-hover-bg);
  border-color: var(--toggle-hover-border);
}