/* ── Reset & base ────────────────────────────────────────────────────────── */
html { height: 100%; }
body { height: 100%; margin: 0; font-family: 'Inter', system-ui, sans-serif; box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

.app-root {
  height: 100%;
  min-height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.font-display { font-family: 'Playfair Display', Georgia, serif; }

/* ── Navy dark palette (always-on defaults) ──────────────────────────────── */
:root {
  --bg:             #0b1120;
  --bg-subtle:      #111827;
  --bg-section:     #0d1526;
  --surface:        #162032;
  --surface-2:      #1e2d42;
  --border:         #1e3a5f;
  --border-soft:    #1a2f4a;
  --text-primary:   #e8f0fe;
  --text-secondary: #8ba3c7;
  --text-muted:     #4d6a8a;
  --text-label:     #a8c0e0;
  --text-body:      #7a9bbf;
  --input-bg:       #0d1a2e;
  --card-bg:        #162032;
  --accent:         #A51C30;
  --accent-soft:    rgba(165,28,48,0.12);
  --accent-glow:    rgba(165,28,48,0.25);
  --shadow-sm:      rgba(0,0,0,0.3);
  --shadow-md:      rgba(0,0,0,0.5);
  --shadow-lg:      0 8px 32px rgba(0,0,0,0.4);
}

/* ── Global body/page background ─────────────────────────────────────────── */
body {
  background-color: var(--bg);
  color: var(--text-primary);
}

#site-page-content {
  background-color: var(--bg);
}

/* ── Scrollbar ───────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-subtle); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }
.app-root::-webkit-scrollbar { width: 6px; }
.app-root::-webkit-scrollbar-track { background: var(--bg-subtle); }
.app-root::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.app-root::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ── Animations ──────────────────────────────────────────────────────────── */
@keyframes fadeUp { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:translateY(0); } }
@keyframes scaleIn { from { opacity:0; transform:scale(0.96); } to { opacity:1; transform:scale(1); } }
@keyframes fadeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
.anim-fade-up   { animation: fadeUp 0.7s ease-out both; }
.anim-fade-up-d1 { animation: fadeUp 0.7s ease-out 0.12s both; }
.anim-fade-up-d2 { animation: fadeUp 0.7s ease-out 0.24s both; }
.anim-fade-up-d3 { animation: fadeUp 0.7s ease-out 0.36s both; }
.anim-scale-in  { animation: scaleIn 0.5s ease-out both; }
.anim-up        { animation: fadeUp 0.5s ease forwards; opacity:0; }
.anim-d1 { animation-delay:0.1s; }
.anim-d2 { animation-delay:0.2s; }
.anim-d3 { animation-delay:0.3s; }
.anim-d4 { animation-delay:0.4s; }
.fade-in  { animation: fadeIn 0.3s ease forwards; }
.fade-up  { animation: fadeUp 0.4s ease forwards; }

/* ── Tailwind color overrides for navy theme ─────────────────────────────── */
.bg-white        { background-color: var(--surface) !important; }
.bg-ivory        { background-color: var(--bg-subtle) !important; }
.bg-slate-50     { background-color: var(--bg-subtle) !important; }
.bg-gray-50      { background-color: var(--bg-subtle) !important; }
.bg-\[#f7f5f3\]  { background-color: var(--bg-subtle) !important; }
.bg-\[#f8fafc\]  { background-color: var(--bg) !important; }

.text-black      { color: var(--text-primary) !important; }
.text-gray-900   { color: var(--text-primary) !important; }
.text-gray-800   { color: var(--text-primary) !important; }
.text-gray-700   { color: var(--text-label) !important; }
.text-gray-600   { color: var(--text-secondary) !important; }
.text-gray-500   { color: var(--text-muted) !important; }
.text-gray-400   { color: var(--text-muted) !important; }
.text-slate-900  { color: var(--text-primary) !important; }
.text-slate-800  { color: var(--text-primary) !important; }
.text-slate-700  { color: var(--text-label) !important; }
.text-slate-600  { color: var(--text-secondary) !important; }
.text-slate-500  { color: var(--text-muted) !important; }
.text-slate-400  { color: var(--text-muted) !important; }

.border-slate-mid   { border-color: var(--border) !important; }
.border-slate-200   { border-color: var(--border) !important; }
.border-gray-200    { border-color: var(--border) !important; }
.border             { border-color: var(--border) !important; }

/* ── Inline style overrides ──────────────────────────────────────────────── */
[style*="color:#1a1a1a"], [style*="color: #1a1a1a"] { color: var(--text-primary) !important; }
[style*="color:#666"],    [style*="color: #666"]     { color: var(--text-secondary) !important; }
[style*="color:#888"],    [style*="color: #888"]     { color: var(--text-muted) !important; }
[style*="color:#444"],    [style*="color: #444"]     { color: var(--text-label) !important; }
[style*="color:#555"],    [style*="color: #555"]     { color: var(--text-body) !important; }
[style*="color:#374151"]  { color: var(--text-secondary) !important; }
[style*="color:#1f2937"]  { color: var(--text-primary) !important; }
[style*="background:#F9FAFB"], [style*="background: #F9FAFB"] { background: var(--input-bg) !important; }
[style*="border-color:#E5E7EB"], [style*="border-color: #E5E7EB"] { border-color: var(--border) !important; }
[style*="border-color:#e5e7eb"] { border-color: var(--border) !important; }
[style*="border-color:#e5e2df"] { border-color: var(--border) !important; }
[style*="border-color:#e2e8f0"] { border-color: var(--border) !important; }

/* ── Cards & surfaces ────────────────────────────────────────────────────── */
.glass {
  background: rgba(22,32,50,0.85);
  backdrop-filter: blur(16px);
  border: 1px solid var(--border);
}

.file-card {
  background: var(--surface);
  border-color: var(--border);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.file-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.4);
  border-color: var(--accent);
}

.link-card {
  background: var(--surface);
  border-color: var(--border);
  transition: all 0.18s ease;
}
.link-card:hover { border-color: var(--accent); box-shadow: 0 4px 20px var(--accent-glow); }

.brochure-page {
  background: linear-gradient(135deg, var(--surface) 0%, var(--bg-subtle) 100%);
  box-shadow: 0 2px 20px rgba(0,0,0,0.4);
}

/* ── Inputs ──────────────────────────────────────────────────────────────── */
input, select, textarea {
  background-color: var(--input-bg) !important;
  color: var(--text-primary) !important;
  border-color: var(--border) !important;
}
input::placeholder { color: var(--text-muted) !important; }
input[type="number"]:focus, select:focus, input:focus, textarea:focus {
  outline: none;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-soft) !important;
}
input[type="number"]::-webkit-inner-spin-button { opacity: 1; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.pill-btn {
  background: var(--surface);
  color: var(--text-secondary);
  border-color: var(--border);
  transition: all 0.18s ease;
}
.pill-btn.active, .pill-btn:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 4px 14px var(--accent-glow);
}
.btn-primary { transition: all 0.2s ease; }
.btn-primary:hover { box-shadow: 0 0 20px var(--accent-glow); }

/* ── Hero & sections ─────────────────────────────────────────────────────── */
#hero, section#hero {
  background: linear-gradient(180deg, var(--bg-section) 0%, var(--bg) 100%) !important;
}
#calculator, section#calculator {
  background-color: var(--bg-subtle) !important;
}
section.bg-ivory { background-color: var(--bg-subtle) !important; }

.grid-bg {
  background-image:
    linear-gradient(rgba(165,28,48,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(165,28,48,0.04) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* ── Tables ──────────────────────────────────────────────────────────────── */
table td { background-color: var(--surface) !important; color: var(--text-primary) !important; }
table tr { border-color: var(--border) !important; }
table thead tr { background: var(--accent) !important; }
td.bg-white, td[class*="bg-white"] { background-color: var(--surface) !important; }

/* ── Sticky header ───────────────────────────────────────────────────────── */
.sticky-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(11,17,32,0.95) !important;
  backdrop-filter: blur(12px);
  border-color: var(--border) !important;
  transition: box-shadow 0.3s ease;
}
.sticky-header.scrolled { box-shadow: 0 2px 20px rgba(0,0,0,0.4); }
.nav-scrolled { box-shadow: 0 1px 20px rgba(0,0,0,0.3); }

/* ── Tree items ──────────────────────────────────────────────────────────── */
.tree-item { transition: background 0.15s ease; color: var(--text-secondary); }
.tree-item:hover { background: var(--accent-soft); color: var(--text-primary); }

/* ── Result bar ──────────────────────────────────────────────────────────── */
.result-bar { transition: width 0.8s cubic-bezier(0.22,1,0.36,1); }

/* ── Vocabulary page ─────────────────────────────────────────────────────── */
.mono { font-family: 'JetBrains Mono', monospace; }
.card-container { perspective: 1000px; }
.card-inner { transition: transform 0.6s cubic-bezier(0.4,0,0.2,1); transform-style: preserve-3d; }
.card-inner.flipped { transform: rotateY(180deg); }
.card-front, .card-back {
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: var(--surface) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.3) !important;
}
.card-back { transform: rotateY(180deg); }
.cat-btn { transition: all 0.15s ease; }
.cat-btn.active { background: var(--accent); color: #fff; }

/* ── Vocabulary header ───────────────────────────────────────────────────── */
#app > header {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}

/* ── Pomodoro ────────────────────────────────────────────────────────────── */
.progress-ring-bg { stroke: var(--border); }
.progress-ring-fg { transition: stroke-dashoffset 0.5s ease; transform: rotate(-90deg); transform-origin: 50% 50%; }
.task-item { animation: fadeIn 0.25s ease forwards; }
@keyframes pulse-soft { 0%,100% { transform:scale(1); } 50% { transform:scale(1.02); } }
.timer-pulse { animation: pulse-soft 2s ease-in-out infinite; }
.task-card { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.task-card:hover { transform: translateY(-2px); box-shadow: 0 18px 42px rgba(0,0,0,0.3); }

/* ── Math summary ────────────────────────────────────────────────────────── */
.ch {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}
.ch-title { color: var(--text-primary) !important; }
.lc {
  background: var(--bg-subtle) !important;
  border-color: var(--border-soft) !important;
}
.lc:hover { background: var(--surface) !important; border-color: var(--accent) !important; }
.lc-title { color: var(--text-primary) !important; }
.lc-badge { color: var(--text-muted) !important; }
.sec-title { color: var(--text-muted) !important; border-color: var(--border) !important; }

/* ── App root ────────────────────────────────────────────────────────────── */
.app-root { background-color: var(--bg) !important; }
.min-h-screen { background-color: var(--bg) !important; }

/* ── Sections with inline light gradients — override to navy ─────────────── */
section[style*="background: linear-gradient(180deg, #F5F5F5"] {
  background: linear-gradient(180deg, var(--bg-section) 0%, var(--bg) 100%) !important;
}
[style*="background: linear-gradient(135deg, #fef5f5"] { background: var(--bg) !important; }
[style*="background: linear-gradient(135deg, #f0eaf5"]  { background: var(--bg) !important; }

/* ── Smooth transitions ──────────────────────────────────────────────────── */
body, .app-root, .glass, .brochure-page, .file-card, .link-card,
.ch, .lc, .card-front, .card-back, input, select, textarea {
  transition: background-color 0.2s ease, color 0.15s ease, border-color 0.2s ease;
}

/* ── Dark mode class (kept for toggle compatibility, same as :root now) ───── */
html.dark {
  color-scheme: dark;
  --bg:             #0b1120;
  --bg-subtle:      #111827;
  --bg-section:     #0d1526;
  --surface:        #162032;
  --surface-2:      #1e2d42;
  --border:         #1e3a5f;
  --border-soft:    #1a2f4a;
  --text-primary:   #e8f0fe;
  --text-secondary: #8ba3c7;
  --text-muted:     #4d6a8a;
  --text-label:     #a8c0e0;
  --text-body:      #7a9bbf;
  --input-bg:       #0d1a2e;
  --card-bg:        #162032;
}

/* ── Light mode override (when dark toggle is OFF) ───────────────────────── */
html:not(.dark) {
  --bg:             #f4f7fb;
  --bg-subtle:      #eaf0f8;
  --bg-section:     #e8eef6;
  --surface:        #ffffff;
  --surface-2:      #f0f4fa;
  --border:         #c8d8ec;
  --border-soft:    #d8e6f4;
  --text-primary:   #0d1a2e;
  --text-secondary: #3a5a7a;
  --text-muted:     #6a8aaa;
  --text-label:     #2a4a6a;
  --text-body:      #4a6a8a;
  --input-bg:       #f0f6ff;
  --card-bg:        #ffffff;
}