/* ============================================================
   THEMES.CSS — CSS Custom Properties for Dark/Light Mode
   ============================================================ */

:root,
[data-theme="light"] {
  /* ── Brand palette — premium deep navy ─────────────────── */
  --color-primary:       #091A38;
  --color-primary-light: #1A4E82;
  --color-primary-dark:  #060F22;
  --color-blue:          #1E6BBF;
  --color-accent:        #0EA5B7;
  --color-accent-bright: #67D3FF;
  --color-gold:          #D4A24C;
  --color-gold-dark:     #B8892E;
  --color-gold-bg:       rgba(212,162,76,0.10);

  /* ── Neutral scale (5 steps) ────────────────────────────── */
  --neutral-50:          #F8FAFC;
  --neutral-100:         #E2E8F0;
  --neutral-400:         #94A3B8;
  --neutral-600:         #475569;
  --neutral-900:         #0F172A;

  /* ── Typography ─────────────────────────────────────────── */
  --font-display:        'Manrope', 'Plus Jakarta Sans', 'Montserrat', sans-serif;
  --font-body:           'Manrope', 'Montserrat', sans-serif;

  /* ── Dark section palette ───────────────────────────────── */
  --dark-navy:           #08152E;
  --dark-cobalt:         #0B1E44;
  --dark-royal:          #12305F;
  --dark-glow:           #67D3FF;
  --dark-text-primary:   #F5F9FF;
  --dark-text-soft:      #B7C4D9;
  --dark-text-muted:     #8897B0;

  /* ── Page backgrounds ───────────────────────────────────── */
  --bg-page:             #FFFFFF;
  --bg-card:             #FFFFFF;
  --bg-card-hover:       #F9FAFB;
  --bg-navbar:           rgba(8,21,46,0.88);
  --bg-footer:           #061224;
  --bg-section-alt:      #F4F7FB;
  --bg-surface-2:        #F2F6FC;
  --bg-surface-3:        #EAF0FB;
  --bg-dark-hero:        #08152E;
  --bg-overlay:          rgba(11,30,68,0.06);
  --bg-dark:             #08152E;

  --text-primary:        #0B1733;
  --text-secondary:      #475569;
  --text-muted:          #64748B;
  --text-inverse:        #ffffff;

  --border-color:        #DEE5EF;
  --border-card:         #E8EDF6;
  --shadow-card:         0 1px 4px rgba(0,0,0,0.04), 0 4px 16px rgba(11,30,68,0.08);
  --shadow-card-hover:   0 4px 8px rgba(0,0,0,0.06), 0 12px 32px rgba(11,30,68,0.14);
  --shadow-navbar:       0 1px 0 rgba(8,21,46,0.15);

  --gradient-hero:       linear-gradient(135deg, #08152E 0%, #0B1E44 60%, #12305F 100%);
  --gradient-card:       linear-gradient(135deg, #0B1E44, #1A4E82);
  --gradient-section:    linear-gradient(180deg, #FFFFFF 0%, #F4F7FB 100%);

  --input-bg:            #FFFFFF;
  --input-border:        #C8D5E8;
  --input-focus:         #0B1E44;

  --scrollbar-thumb:     #3E8AC4;
  --scrollbar-track:     #F4F7FB;

  /* ── Extended semantic tokens ───────────────────────────── */
  --primary-900:         #0A1F5C;
  --primary-700:         #0F3FA8;
  --primary-500:         #2B5FD9;
  --accent-500:          #14B8A6;
  --accent-300:          #5EEAD4;
  --gold-500:            #C9A961;
  --surface-0:           #FFFFFF;
  --surface-1:           #F7F9FC;
  --surface-2:           #EDF1F7;
  --text-1:              #0B1336;
  --text-2:              #4A5578;
  --text-3:              #8794B5;
  --border-subtle:       rgba(15,63,168,.08);
  --success:             #10B981;
  --warning:             #F59E0B;
  --danger:              #EF4444;
}

[data-theme="dark"] {
  --color-primary:       #2a6db5;
  --color-primary-light: #4d8fd4;
  --color-primary-dark:  #1a5090;
  --color-blue:          #5b9bd6;
  --color-accent:        #2fa8be;
  --color-gold:          #c49a20;
  --color-gold-dark:     #a07c18;

  --bg-page:             #070E1A;
  --bg-card:             #0d1b2e;
  --bg-card-hover:       #112240;
  --bg-navbar:           rgba(7,14,26,0.97);
  --bg-footer:           #050b14;
  --bg-section-alt:      #0a1525;
  --bg-overlay:          rgba(0,180,216,0.05);
  --bg-dark:             #050b14;

  --text-primary:        #e8edf8;
  --text-secondary:      #a8b8d8;
  --text-muted:          #6b7a99;
  --text-inverse:        #070E1A;

  --border-color:        #1a2f4f;
  --border-card:         #1c3054;
  --shadow-card:         0 4px 24px rgba(0,0,0,0.40);
  --shadow-card-hover:   0 12px 48px rgba(0,0,0,0.35);
  --shadow-navbar:       0 2px 24px rgba(0,0,0,0.50);

  --gradient-hero:       linear-gradient(135deg, #070E1A 0%, #0d1b2e 50%, #0a2040 100%);
  --gradient-card:       linear-gradient(135deg, #0d1b2e, #112240);
  --gradient-section:    linear-gradient(180deg, #070E1A 0%, #0a1525 100%);

  --input-bg:            #0d1b2e;
  --input-border:        #1c3054;
  --input-focus:         #2a6db5;

  --scrollbar-thumb:     #2a6db5;
  --scrollbar-track:     #0d1b2e;
}

/* Font Size Classes */
html.fs-small  { font-size: 14px; }
html.fs-normal { font-size: 16px; }
html.fs-large  { font-size: 18px; }

/* Reading Mode */
[data-reading="true"] {
  --bg-page:      #FFFEF7;
  --bg-card:      #FFFEF7;
  --text-primary: #2c2c2c;
  --text-secondary: #444;
}
[data-reading="true"] .reading-content {
  max-width: 780px;
  margin: 0 auto;
  font-family: 'Georgia', serif;
  font-size: 1.1rem;
  line-height: 1.9;
}

/* Custom Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; }