/* ============================================================
   INVEX 2026 — Complete Theme System
   Bright Mode (default) + Dark Mode
   
   WCAG Targets:
     Text Primary   : ≥ 7:1  (AAA)
     Text Secondary : ≥ 4.5:1 (AA)
     Text Tertiary  : ≥ 3:1   (AA Large)
   ============================================================ */

/* ============================================================
   BRIGHT MODE — Semantic Color Tokens (default :root)
   ============================================================ */
:root {
  /* Legacy vars that main.min.css depends on (do not remove) */
  --black: #f8fafc;       /* page background — near-white  */
  --navy:  #ffffff;       /* surface — pure white           */
  --white: #0f172a;       /* primary text — near-black      */

  --text-rgb:   15, 23, 42;
  --panel-rgb:  255, 255, 255;
  --border-rgb: 0, 0, 0;
  --drawer-rgb: 248, 250, 252;

  /* ── Semantic tokens (BRIGHT) ── */
  --color-bg:             #f8fafc;
  --color-surface:        #ffffff;
  --color-surface-alt:    #f1f5f9;
  --color-surface-raised: #ffffff;

  --color-text-primary:   #0f172a;   /* Slate 900  — 16:1 on white */
  --color-text-secondary: #334155;   /* Slate 700  — 8.5:1         */
  --color-text-tertiary:  #4b5563;   /* Gray 600   — 5.9:1         */
  --color-text-muted:     #64748b;   /* Slate 500  — 4.6:1         */
  --color-text-faint:     #94a3b8;   /* Slate 400  — 3.0:1         */

  --color-border:         rgba(0, 0, 0, 0.08);
  --color-border-strong:  rgba(0, 0, 0, 0.16);
  --color-border-subtle:  rgba(0, 0, 0, 0.05);

  --color-nav-bg:         rgba(255, 255, 255, 0.92);
  --color-panel-bg:       rgba(255, 255, 255, 0.85);
  --color-card-bg:        rgba(255, 255, 255, 0.80);
  --color-section-bg:     rgba(255, 255, 255, 0.70);
  --color-field-bg:       rgba(0, 0, 0, 0.025);
  --color-review-bg:      rgba(0, 0, 0, 0.025);
  --color-stats-bg:       rgba(255, 255, 255, 0.75);
  --color-footer-bg:      rgba(255, 255, 255, 0.92);
  --color-overlay-bg:     rgba(255, 255, 255, 0.95);
  --color-drawer-bg:      rgba(248, 250, 252, 0.97);

  /* select option bg (explicit — used in field select option) */
  --color-option-bg:      #ffffff;
  --color-option-text:    #0f172a;
}

/* ============================================================
   DARK MODE — Override all tokens
   ============================================================ */
html[data-theme="dark"] {
  /* Legacy vars */
  --black: #020617;       /* page background — Slate 950   */
  --navy:  #0f172a;       /* surface — Slate 900            */
  --white: #f8fafc;       /* primary text — Slate 50        */

  --text-rgb:   248, 250, 252;
  --panel-rgb:  15, 23, 42;
  --border-rgb: 255, 255, 255;
  --drawer-rgb: 2, 6, 23;

  /* ── Semantic tokens (DARK) ── */
  --color-bg:             #020617;
  --color-surface:        #0f172a;
  --color-surface-alt:    #1e293b;
  --color-surface-raised: #1e293b;

  --color-text-primary:   #f8fafc;   /* Slate 50   — 18:1 on dark bg */
  --color-text-secondary: #cbd5e1;   /* Slate 300  — 10:1            */
  --color-text-tertiary:  #94a3b8;   /* Slate 400  —  6.4:1          */
  --color-text-muted:     #64748b;   /* Slate 500  —  3.8:1          */
  --color-text-faint:     #475569;   /* Slate 600  —  2.6:1          */

  --color-border:         rgba(255, 255, 255, 0.08);
  --color-border-strong:  rgba(255, 255, 255, 0.18);
  --color-border-subtle:  rgba(255, 255, 255, 0.05);

  --color-nav-bg:         rgba(15, 23, 42, 0.90);
  --color-panel-bg:       rgba(15, 23, 42, 0.80);
  --color-card-bg:        rgba(15, 23, 42, 0.70);
  --color-section-bg:     rgba(15, 23, 42, 0.50);
  --color-field-bg:       rgba(255, 255, 255, 0.05);
  --color-review-bg:      rgba(255, 255, 255, 0.04);
  --color-stats-bg:       rgba(15, 23, 42, 0.60);
  --color-footer-bg:      rgba(15, 23, 42, 0.85);
  --color-overlay-bg:     rgba(2, 6, 23, 0.95);
  --color-drawer-bg:      rgba(2, 6, 23, 0.97);

  --color-option-bg:      #1e293b;
  --color-option-text:    #f8fafc;
}

/* ============================================================
   UTILITY CLASSES — use in HTML instead of inline rgba() colors
   ============================================================ */
.theme-text-primary   { color: var(--color-text-primary)   !important; }
.theme-text-secondary { color: var(--color-text-secondary)  !important; }
.theme-text-tertiary  { color: var(--color-text-tertiary)   !important; }
.theme-text-muted     { color: var(--color-text-muted)      !important; }
.theme-text-faint     { color: var(--color-text-faint)      !important; }
.theme-surface        { background: var(--color-surface)    !important; }

/* ============================================================
   NAVIGATION — Bright + Dark fixes
   ============================================================ */

/* Scrolled nav — Bright Mode */
nav.scrolled {
  background: var(--color-nav-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--color-border);
}

/* Nav links — Bright Mode (better contrast) */
.nav-links a {
  color: var(--color-text-tertiary);
}
.nav-links a:hover {
  color: var(--color-text-primary);
}

/* Nav hamburger lines — Bright Mode */
.nav-hamburger span {
  background: var(--color-text-primary);
}

/* Mobile drawer — Bright Mode */
.nav-drawer {
  background: var(--color-drawer-bg);
}
.nav-drawer ul li a {
  color: var(--color-text-secondary);
  border-bottom: 1px solid var(--color-border-subtle);
}
.nav-drawer ul li a:hover {
  color: var(--color-text-primary);
}

/* ── Dark Mode Nav ── */
html[data-theme="dark"] nav.scrolled {
  background: var(--color-nav-bg);
  border-bottom: 1px solid var(--color-border);
}

html[data-theme="dark"] .nav-links a {
  color: var(--color-text-tertiary);
}
html[data-theme="dark"] .nav-links a:hover {
  color: var(--color-text-primary);
}

html[data-theme="dark"] .nav-hamburger span {
  background: var(--color-text-primary);
}

html[data-theme="dark"] .nav-drawer {
  background: var(--color-drawer-bg);
}
html[data-theme="dark"] .nav-drawer ul li a {
  color: var(--color-text-secondary);
  border-bottom: 1px solid var(--color-border-subtle);
}

/* ============================================================
   HERO SECTION
   ============================================================ */
.year-text {
  color: var(--color-text-faint);
}
.hero-sub {
  color: var(--color-text-tertiary);
}
.hero-sub strong {
  color: var(--color-text-primary);
}
.scroll-hint span {
  color: var(--color-text-muted);
}

html[data-theme="dark"] .year-text  { color: rgba(248, 250, 252, 0.18); }
html[data-theme="dark"] .hero-sub   { color: var(--color-text-secondary); }
html[data-theme="dark"] .hero-sub strong { color: var(--color-text-primary); }
html[data-theme="dark"] .scroll-hint span { color: var(--color-text-muted); }

/* Ghost button — Bright Mode (was barely visible) */
.btn-ghost {
  color: var(--color-text-primary);
  border-color: var(--color-border-strong);
}
.btn-ghost:hover {
  background: rgba(15, 23, 42, 0.05);
  border-color: var(--color-text-muted);
}

html[data-theme="dark"] .btn-ghost {
  color: var(--color-text-primary);
  border-color: rgba(255, 255, 255, 0.28);
}
html[data-theme="dark"] .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.55);
}

/* nav-cta hover — dark mode: was white-bg + white-text = invisible */
html[data-theme="dark"] .nav-cta:hover {
  background: var(--color-text-secondary) !important;
  color: #020617 !important;
  box-shadow: 0 0 20px rgba(203, 213, 225, 0.2);
}

/* ============================================================
   STATS SECTION
   ============================================================ */
#stats {
  background: var(--color-stats-bg);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.stat-item::after {
  background: var(--color-border);
}
.stat-label {
  color: var(--color-text-muted);
}

html[data-theme="dark"] #stats {
  background: var(--color-stats-bg);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
html[data-theme="dark"] .stat-item::after {
  background: var(--color-border);
}
html[data-theme="dark"] .stat-label {
  color: var(--color-text-tertiary);
}

/* ============================================================
   CATEGORIES SECTION
   ============================================================ */
.categories-sub {
  color: var(--color-text-secondary);
}

/* Category Cards */
.cat-card {
  background: var(--color-card-bg);
  border-color: var(--color-border);
}
.cat-card:hover,
.cat-card:focus {
  border-color: var(--color-border-strong);
}
.cat-card:hover .cat-desc {
  color: var(--color-text-secondary);
}
.cat-num {
  color: var(--color-text-faint);
}
.cat-icon-text {
  background: var(--color-surface-alt);
}
.cat-desc {
  color: var(--color-text-tertiary);
}
.cat-arrow {
  color: var(--color-text-primary);
  border-color: var(--color-border);
}

html[data-theme="dark"] .categories-sub { color: var(--color-text-secondary); }
html[data-theme="dark"] .cat-card {
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
}
html[data-theme="dark"] .cat-card:hover,
html[data-theme="dark"] .cat-card:focus {
  border-color: var(--color-border-strong);
}
html[data-theme="dark"] .cat-num    { color: var(--color-text-muted); }
html[data-theme="dark"] .cat-icon-text { background: rgba(255, 255, 255, 0.06); }
html[data-theme="dark"] .cat-desc   { color: var(--color-text-tertiary); }
html[data-theme="dark"] .cat-card:hover .cat-desc { color: var(--color-text-secondary); }

/* ============================================================
   ABOUT / TIMELINE SECTION
   ============================================================ */
#about {
  background: linear-gradient(180deg, transparent, var(--color-section-bg), transparent);
}
.tl-text {
  color: var(--color-text-tertiary);
}

html[data-theme="dark"] #about {
  background: linear-gradient(180deg, transparent, rgba(15, 23, 42, 0.45), transparent);
}
html[data-theme="dark"] .tl-text { color: var(--color-text-secondary); }

/* ============================================================
   REGISTRATION SECTION
   ============================================================ */
.reg-sub {
  color: var(--color-text-secondary);
}

/* Progress stepper */
.prog-step::after {
  background: var(--color-border);
}
.prog-dot {
  border: 1px solid var(--color-border-strong);
  color: var(--color-text-muted);
  background: var(--color-surface);
}
.prog-label {
  color: var(--color-text-muted);
}
.prog-step.done .prog-label {
  color: var(--color-text-secondary);
}

/* Glass panel */
.glass-panel {
  background: var(--color-panel-bg);
  border: 1px solid var(--color-border);
}

.step-subtitle {
  color: var(--color-text-muted);
}

/* Form fields */
.field input,
.field select,
.field textarea {
  background: var(--color-field-bg);
  border: 1px solid var(--color-border-strong);
  color: var(--color-text-primary);
}
.field select option {
  background: var(--color-option-bg);
  color: var(--color-option-text);
}
.field label {
  color: var(--color-text-muted);
}

/* File upload */
.file-upload {
  border: 1px dashed var(--color-border-strong);
}
.upload-tag   { color: var(--color-text-muted); }
.upload-text  { color: var(--color-text-tertiary); }
.upload-hint  { color: var(--color-text-muted); }

/* Form nav */
.form-nav {
  border-top: 1px solid var(--color-border);
}
.btn-form-prev {
  color: var(--color-text-tertiary);
}
.btn-form-prev:hover {
  color: var(--color-text-primary);
}

/* Review grid */
.review-grid {
  background: var(--color-review-bg);
  border: 1px solid var(--color-border);
}
.review-item span:first-child {
  color: var(--color-text-muted);
}
.review-item span:last-child {
  color: var(--color-text-primary);
}

/* Success text */
.success-text {
  color: var(--color-text-secondary);
}

/* ── Dark Mode Registration ── */
html[data-theme="dark"] .reg-sub     { color: var(--color-text-secondary); }
html[data-theme="dark"] .prog-step::after { background: var(--color-border); }
html[data-theme="dark"] .prog-dot {
  border: 1px solid var(--color-border-strong);
  color: var(--color-text-tertiary);
  background: var(--color-surface);
}
html[data-theme="dark"] .prog-label   { color: var(--color-text-tertiary); }
html[data-theme="dark"] .prog-step.done .prog-label { color: var(--color-text-secondary); }
html[data-theme="dark"] .glass-panel {
  background: var(--color-panel-bg);
  border: 1px solid var(--color-border);
}
html[data-theme="dark"] .step-subtitle { color: var(--color-text-tertiary); }
html[data-theme="dark"] .field input,
html[data-theme="dark"] .field select,
html[data-theme="dark"] .field textarea {
  background: var(--color-field-bg);
  border: 1px solid var(--color-border-strong);
  color: var(--color-text-primary);
}
html[data-theme="dark"] .field select option {
  background: var(--color-option-bg);
  color: var(--color-option-text);
}
html[data-theme="dark"] .field label   { color: var(--color-text-tertiary); }
html[data-theme="dark"] .file-upload   { border: 1px dashed var(--color-border-strong); }
html[data-theme="dark"] .upload-tag    { color: var(--color-text-muted); }
html[data-theme="dark"] .upload-text   { color: var(--color-text-tertiary); }
html[data-theme="dark"] .upload-hint   { color: var(--color-text-muted); }
html[data-theme="dark"] .form-nav      { border-top: 1px solid var(--color-border); }
html[data-theme="dark"] .btn-form-prev { color: var(--color-text-tertiary); }
html[data-theme="dark"] .btn-form-prev:hover { color: var(--color-text-primary); }
html[data-theme="dark"] .review-grid {
  background: var(--color-review-bg);
  border: 1px solid var(--color-border);
}
html[data-theme="dark"] .review-item span:first-child { color: var(--color-text-tertiary); }
html[data-theme="dark"] .review-item span:last-child  { color: var(--color-text-primary); }
html[data-theme="dark"] .success-text { color: var(--color-text-secondary); }

/* ============================================================
   CRITERIA SECTION
   ============================================================ */
.criteria-section {
  background: linear-gradient(180deg, transparent, var(--color-section-bg), transparent);
}
.criteria-card {
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
}
.criteria-num  { color: var(--color-text-faint); }
.criteria-desc { color: var(--color-text-tertiary); }

html[data-theme="dark"] .criteria-section {
  background: linear-gradient(180deg, transparent, rgba(15, 23, 42, 0.45), transparent);
}
html[data-theme="dark"] .criteria-card {
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
}
html[data-theme="dark"] .criteria-num  { color: var(--color-text-muted); }
html[data-theme="dark"] .criteria-desc { color: var(--color-text-secondary); }

/* ============================================================
   FAQ SECTION
   ============================================================ */
.faq-section {
  background: linear-gradient(180deg, transparent, var(--color-section-bg), transparent);
}
.faq-item {
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
}
.faq-q {
  color: var(--color-text-primary);
}
.faq-icon {
  border: 1px solid var(--color-border-strong);
  color: var(--color-text-tertiary);
}
.faq-a-inner {
  color: var(--color-text-secondary);
}

html[data-theme="dark"] .faq-section {
  background: linear-gradient(180deg, transparent, rgba(15, 23, 42, 0.45), transparent);
}
html[data-theme="dark"] .faq-item {
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
}
html[data-theme="dark"] .faq-q      { color: var(--color-text-primary); }
html[data-theme="dark"] .faq-icon {
  border: 1px solid var(--color-border-strong);
  color: var(--color-text-tertiary);
}
html[data-theme="dark"] .faq-a-inner { color: var(--color-text-secondary); }

/* ============================================================
   FOOTER
   ============================================================ */
footer {
  background: var(--color-footer-bg);
  border-top: 1px solid var(--color-border);
}
.footer-copy {
  color: var(--color-text-muted);
}
/* This class overrides the inline strong color in HTML */
.footer-copy strong,
.footer-copy-brand {
  color: var(--color-text-primary) !important;
}
.footer-links a {
  color: var(--color-text-muted);
}
.footer-links a:hover {
  color: var(--color-text-primary);
}
.footer-credit {
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
}

html[data-theme="dark"] footer {
  background: var(--color-footer-bg);
  border-top: 1px solid var(--color-border);
}
html[data-theme="dark"] .footer-copy { color: var(--color-text-tertiary); }
html[data-theme="dark"] .footer-copy strong,
html[data-theme="dark"] .footer-copy-brand { color: var(--color-text-primary) !important; }
html[data-theme="dark"] .footer-links a { color: var(--color-text-tertiary); }
html[data-theme="dark"] .footer-links a:hover { color: var(--color-text-primary); }
html[data-theme="dark"] .footer-credit {
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
}

/* ============================================================
   SITE LOADER
   ============================================================ */
html[data-theme="dark"] #site-loader {
  background: #020617 !important;
}
html[data-theme="dark"] .loader-label,
html[data-theme="dark"] .loader-tagline {
  color: rgba(248, 250, 252, 0.75) !important;
}
html[data-theme="dark"] .loader-bar-track {
  background: rgba(255, 255, 255, 0.12) !important;
}
html[data-theme="dark"] .loader-bar-sheen {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent) !important;
}

/* ============================================================
   NOISE TEXTURE
   ============================================================ */
html[data-theme="dark"] .noise {
  filter: none;
  opacity: 0.03;
}

/* ============================================================
   CUSTOM CURSOR — fix mix-blend-mode in dark mode
   In dark mode, multiply blend makes orange cursor invisible.
   ============================================================ */
html[data-theme="dark"] #cursor {
  mix-blend-mode: normal;
  opacity: 0.85;
}

/* ============================================================
   SUBMIT OVERLAY (register.html)
   ============================================================ */
.submit-overlay {
  background: var(--color-overlay-bg);
}

html[data-theme="dark"] .submit-overlay {
  background: var(--color-overlay-bg);
}

/* ============================================================
   REVIEW SECTION TITLE (register.html inline style override)
   ============================================================ */
html[data-theme="dark"] .review-section-title {
  border-bottom: 1px solid var(--color-border);
}

/* ============================================================
   INLINE TEXT OVERRIDES — elements with hardcoded rgba in HTML
   These classes replace inline styles so theme switching works
   ============================================================ */

/* Misc inline text that can't be easily converted to a class */
.inline-text-secondary {
  color: var(--color-text-secondary) !important;
}
.inline-text-tertiary {
  color: var(--color-text-tertiary) !important;
}
.inline-text-muted {
  color: var(--color-text-muted) !important;
}
.inline-text-primary {
  color: var(--color-text-primary) !important;
}

/* Terms text in register.html */
.terms-text {
  color: var(--color-text-muted);
  font-size: 0.7rem;
  text-align: center;
  margin-bottom: 20px;
  letter-spacing: 0.1em;
  line-height: 1.6;
}

/* ============================================================
   THEME TOGGLE BUTTON
   ============================================================ */
.theme-toggle {
  background: transparent;
  border: none;
  cursor: pointer;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-tertiary);
  border-radius: 50%;
  transition: background 0.3s, color 0.3s;
}
.theme-toggle:hover {
  background: rgba(var(--text-rgb), 0.06);
  color: var(--color-text-primary);
}
.theme-toggle svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-moon { display: block; }
.icon-sun  { display: none;  }
html[data-theme="dark"] .icon-moon { display: none;  }
html[data-theme="dark"] .icon-sun  { display: block; }

/* ============================================================
   SECTION LABELS — tiny orange accent labels
   ============================================================ */
/* The orange color stays; ensure the line before it also shows */
.section-label::before {
  background: var(--orange);
  box-shadow: 0 0 6px rgba(255, 107, 26, 0.5);
}

/* ============================================================
   DARK MODE — Background canvas particles
   Increase brightness of the dot field for dark backgrounds
   ============================================================ */
html[data-theme="dark"] #bg-canvas {
  opacity: 0.6;
}