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

:root,
[data-theme="light"] {
  /* ── Brand palette — premium deep navy ─────────────────── */
  --color-primary:       #0B1E44;
  --color-primary-light: #1A4E82;
  --color-primary-dark:  #08152E;
  --color-blue:          #1E6BBF;
  --color-accent:        #3E8AC4;
  --color-accent-bright: #67D3FF;
  --color-gold:          #96710A;
  --color-gold-dark:     #7a5c08;

  /* ── 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:        #1A2B45;
  --text-secondary:      #445A7A;
  --text-muted:          #7B90B2;
  --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;
}

[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; }