/* FeynLearn × Tôn Đức Trí — Brand design system (Tín từ Tâm)
   Palette: Navy #0A326E · Blue #0758B3 · Gold #EB8E04 · Bright Gold #FFC247 · White */

/* ===== Theme variables ===== */
:root {
  color-scheme: light;
  --brand-navy: #0A326E;
  --brand-blue: #0758B3;
  --brand-gold: #EB8E04;
  --brand-gold-bright: #FFC247;
  --c-primary: #0A326E;
  --c-primary-container: #0758B3;
  --c-primary-soft: #dcebfb;
  --c-surface: #f8fafd;
  --c-surface-low: #f1f5fa;
  --c-surface-mid: #e8eef6;
  --c-surface-high: #dfe7f2;
  --c-ink: #101c30;
  --c-ink-soft: #43506a;
  --c-outline-soft: #c2cddd;
  --c-flame: #EB8E04;
  --c-tertiary-soft: #ffedcc;
  --c-on-tertiary: #7a4a00;
  --c-card: #ffffff;
  --c-shadow: rgba(10,50,110,0.06);
  --c-shadow-hover: rgba(10,50,110,0.12);
}
html.dark {
  color-scheme: dark;
  --c-primary: #8fbcf5;
  --c-primary-container: #0758B3;
  --c-primary-soft: #12305c;
  --c-surface: #0b1626;
  --c-surface-low: #101e33;
  --c-surface-mid: #16273f;
  --c-surface-high: #1d304c;
  --c-ink: #e3ebf6;
  --c-ink-soft: #9fb0c8;
  --c-outline-soft: #33476a;
  --c-flame: #FFC247;
  --c-tertiary-soft: #4a3200;
  --c-on-tertiary: #ffd98a;
  --c-card: #12213a;
  --c-shadow: rgba(0,0,0,0.35);
  --c-shadow-hover: rgba(0,0,0,0.5);
}
/* Card trắng → nền card theo theme (bg-white được Tailwind CDN sinh màu tĩnh nên override ở đây) */
html.dark .bg-white { background-color: var(--c-card) !important; }
html.dark .text-white { color: #ffffff !important; }
/* Các màu Tailwind tĩnh hay dùng cho badge — dịu lại trong dark */
html.dark .bg-green-100 { background-color: #14351f !important; }
html.dark .text-green-700, html.dark .text-green-800 { color: #7ee2a0 !important; }
html.dark .text-green-600 { color: #6bd694 !important; }
html.dark .text-green-500 { color: #5ecc88 !important; }
html.dark .bg-green-500 { background-color: #2e9e5b !important; }
html.dark .bg-amber-100 { background-color: #3a2f10 !important; }
html.dark .text-amber-800 { color: #ffd977 !important; }
html.dark .bg-amber-400 { background-color: #c99a2e !important; }
html.dark .bg-sky-100 { background-color: #102b3a !important; }
html.dark .text-sky-800 { color: #7cc8f0 !important; }
html.dark .bg-emerald-100 { background-color: #0f3327 !important; }
html.dark .text-emerald-800 { color: #74dcb2 !important; }
html.dark .bg-pink-100 { background-color: #3a1226 !important; }
html.dark .text-pink-800 { color: #f2a1c5 !important; }
html.dark .bg-indigo-100 { background-color: #12305c !important; }
html.dark .text-indigo-800 { color: #8fbcf5 !important; }
html.dark .bg-red-100 { background-color: #3d1414 !important; }
html.dark .text-red-700, html.dark .text-red-800 { color: #f09a9a !important; }
html.dark img, html.dark svg { filter: none; }

.line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

blockquote {
  transition: background 0.2s;
}

#app {
  min-height: 100vh;
}

body {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
}

/* Brand typography: Montserrat cho tiêu đề (guideline mục 8) */
h1, h2, h3, .font-brand {
  font-family: 'Montserrat', 'Inter', ui-sans-serif, system-ui, sans-serif;
}

/* Gradient brand progress (navy → blue → gold) theo guideline Tôn Đức Trí */
.flame-gradient {
  background: linear-gradient(90deg, #0A326E 0%, #0758B3 45%, #EB8E04 80%, #FFC247 100%);
}

/* Mobile bottom nav spacing so content isn't hidden */
@media (max-width: 767px) {
  main { padding-bottom: 84px !important; }
}

/* Smooth card hover per design (Level 2 elevation) */
.card-hover { transition: box-shadow .2s ease, transform .2s ease; }
.card-hover:hover { box-shadow: 0px 10px 30px var(--c-shadow-hover); }