/* ──────────────────────────────────────────────────────────────────────
   MedNerds — Design Tokens (dark default + light theme override)
   Source: repos/mednerds-page/nginx/html/index.html (kept verbatim).
   Do not redefine here — propose changes in the source file first.
   ────────────────────────────────────────────────────────────────────── */

    /* ══════════════════════════════════════════════
       DESIGN TOKENS — DARK MODE (default)
    ══════════════════════════════════════════════ */
    :root {
      /* Accent (invariant) */
      --accent:        #1d4ed8;
      --accent-mid:    #2563eb;
      --accent-bright: #0d6efd;
      --accent-light:  #7dd3fc;
      --accent-glow:   rgba(29,78,216,0.4);

      /* Backgrounds */
      --bg-body:       #050508;
      --bg-card:       rgba(255,255,255,0.05);
      --bg-card-hover: rgba(13,110,253,0.07);
      --bg-input:      rgba(255,255,255,0.04);
      --bg-input-focus:rgba(255,255,255,0.06);
      --bg-metrics:    rgba(13,110,253,0.04);
      --bg-marquee:    rgba(13,110,253,0.04);
      --bg-nav:        rgba(5,5,8,0.7);
      --bg-toast:      rgba(10,20,50,0.95);
      --bg-logo:       rgba(255,255,255,0.12);
      --bg-footer-logo:rgba(255,255,255,0.08);
      --bg-waitlist-card: linear-gradient(135deg, rgba(13,110,253,0.06) 0%, rgba(29,78,216,0.04) 100%);

      /* Borders */
      --border-card:        rgba(255,255,255,0.12);
      --border-card-hover:  rgba(29,78,216,0.4);
      /* Card elevation — top inner highlight simulates light from above
         (the "light shadows" feel) layered with a soft drop-shadow.
         Without this, dark cards on a near-black bg blend into the
         page and the page reads as one big dark slab. */
      --card-shadow:
        0 1px 0 0 rgba(255,255,255,0.06) inset,
        0 8px 24px -6px rgba(0,0,0,0.5);
      --card-shadow-hover:
        0 1px 0 0 rgba(255,255,255,0.08) inset,
        0 16px 36px -8px rgba(0,0,0,0.55);
      --border-input:       rgba(255,255,255,0.1);
      --border-nav:         rgba(255,255,255,0.05);
      --border-toast:       rgba(29,78,216,0.4);
      --border-footer:      rgba(255,255,255,0.05);
      --border-footer-sep:  rgba(255,255,255,0.04);
      --border-footer-logo: rgba(255,255,255,0.1);
      --border-waitlist:    rgba(29,78,216,0.2);

      /* Text */
      --text-body:      #e2e8f0;
      --text-primary:   #f8fafc;
      --text-heading:   #f1f5f9;
      --text-secondary: rgba(148,163,184,0.85);
      --text-muted:     rgba(148,163,184,0.7);
      --text-muted-60:  rgba(148,163,184,0.6);
      --text-muted-65:  rgba(148,163,184,0.65);
      --text-faint:     rgba(148,163,184,0.5);
      --text-tiny:      rgba(148,163,184,0.35);
      --text-social:    rgba(148,163,184,0.45);
      --text-marquee:   rgba(148,163,184,0.35);
      --text-toast:     #7dd3fc;
      --text-label:     #7dd3fc;
      --text-scroll:    #94a3b8;
      --text-logo:      #f1f5f9;
      --text-footer-logo: #e2e8f0;

      /* Phone mockups (O app section) */
      --mock-phone-bg:  #080c18;
      --mock-notch:     #111827;
      --mock-divider:   rgba(255,255,255,0.06);

      /* Misc */
      --noise-opacity:  0.5;
      --orb1: rgba(13,110,253,0.22);
      --orb2: rgba(29,78,216,0.18);
      --orb3: rgba(15,52,96,0.35);
      --scrollbar-track: #050508;
      --theme-toggle-bg: rgba(255,255,255,0.06);
      --theme-toggle-border: rgba(255,255,255,0.1);
      --theme-toggle-color: rgba(148,163,184,0.8);
    }

    /* ══════════════════════════════════════════════
       DESIGN TOKENS — LIGHT MODE
    ══════════════════════════════════════════════ */
    html[data-theme="light"] {
      --bg-body:       #eff6ff;
      --bg-card:       rgba(255,255,255,0.85);
      --bg-card-hover: rgba(13,110,253,0.04);
      --bg-input:      rgba(255,255,255,0.9);
      --bg-input-focus:#ffffff;
      --bg-metrics:    rgba(37,99,235,0.05);
      --bg-marquee:    rgba(37,99,235,0.04);
      --bg-nav:        rgba(239,246,255,0.88);
      --bg-toast:      rgba(255,255,255,0.97);
      --bg-logo:       rgba(29,78,216,0.1);
      --bg-footer-logo:rgba(29,78,216,0.07);
      --bg-waitlist-card: linear-gradient(135deg, rgba(13,110,253,0.07) 0%, rgba(37,99,235,0.04) 100%);

      --border-card:        rgba(203,213,225,0.8);
      --border-card-hover:  rgba(37,99,235,0.3);
      /* Light-mode equivalent — subtle bottom shadow + faint top highlight. */
      --card-shadow:
        0 1px 0 0 rgba(255,255,255,0.7) inset,
        0 4px 16px -4px rgba(15,23,42,0.06);
      --card-shadow-hover:
        0 1px 0 0 rgba(255,255,255,0.9) inset,
        0 10px 24px -6px rgba(15,23,42,0.10);
      --border-input:       rgba(203,213,225,0.9);
      --border-nav:         rgba(203,213,225,0.6);
      --border-toast:       rgba(37,99,235,0.25);
      --border-footer:      rgba(203,213,225,0.7);
      --border-footer-sep:  rgba(203,213,225,0.5);
      --border-footer-logo: rgba(29,78,216,0.2);
      --border-waitlist:    rgba(29,78,216,0.2);

      --text-body:      #334155;
      --text-primary:   #0f172a;
      --text-heading:   #0f172a;
      --text-secondary: #475569;
      --text-muted:     #64748b;
      --text-muted-60:  #64748b;
      --text-muted-65:  #64748b;
      --text-faint:     #94a3b8;
      --text-tiny:      #cbd5e1;
      --text-social:    #94a3b8;
      --text-marquee:   rgba(100,116,139,0.55);
      --text-toast:     #1d4ed8;
      --text-label:     #1d4ed8;
      --text-scroll:    #64748b;
      --text-logo:      #0f172a;
      --text-footer-logo: #1e293b;

      --noise-opacity:  0.18;
      --orb1: rgba(37,99,235,0.14);
      --orb2: rgba(13,110,253,0.1);
      --orb3: rgba(59,130,246,0.12);
      --scrollbar-track: #eff6ff;
      --theme-toggle-bg: rgba(29,78,216,0.08);
      --theme-toggle-border: rgba(29,78,216,0.2);
      --theme-toggle-color: #2563eb;

      /* Phone mockups (O app section) */
      --mock-phone-bg:  #edf2ff;
      --mock-notch:     #dde4ee;
      --mock-divider:   rgba(0,0,0,0.07);
    }