/* EXIN AI Foundation Prep - Shared Design System */

:root {
  /* EXIN Brand Colors */
  --navy: #1B365D;
  --navy-light: #2A4A7F;
  --navy-dark: #0F1F3D;
  --gold: #F0AB00;
  --gold-light: #FFD54F;
  --gold-dark: #C68A00;
  --white: #FFFFFF;
  --gray-50: #F8F9FA;
  --gray-100: #F1F3F5;
  --gray-200: #E9ECEF;
  --gray-300: #DEE2E6;
  --gray-400: #CED4DA;
  --gray-500: #ADB5BD;
  --gray-600: #868E96;
  --gray-700: #495057;
  --gray-800: #343A40;
  --gray-900: #212529;

  /* Semantic Colors */
  --bg-primary: var(--white);
  --bg-secondary: var(--gray-50);
  --bg-card: var(--white);
  --text-primary: var(--gray-900);
  --text-secondary: var(--gray-700);
  --text-muted: var(--gray-600);
  --border-color: var(--gray-200);
  --accent: var(--navy);
  --accent-light: var(--navy-light);
  --highlight: var(--gold);
  --highlight-bg: #FFF8E1;
  --success: #2E7D32;
  --success-bg: #E8F5E9;
  --error: #C62828;
  --error-bg: #FFEBEE;
  --info: #1565C0;
  --info-bg: #E3F2FD;

  /* Typography */
  --font-sans: 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.07);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.1);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow: 350ms ease;
}

/* Dark Mode */
[data-theme="dark"] {
  --bg-primary: #0D1117;
  --bg-secondary: #161B22;
  --bg-card: #1C2128;
  --text-primary: #E6EDF3;
  --text-secondary: #B1BAC4;
  --text-muted: #8B949E;
  --border-color: #30363D;
  --accent: #58A6FF;
  --accent-light: #79C0FF;
  --highlight: var(--gold);
  --highlight-bg: #2D2200;
  --success: #56D364;
  --success-bg: #0D2818;
  --error: #F85149;
  --error-bg: #2D1214;
  --info: #58A6FF;
  --info-bg: #0D1B2E;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.4);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.5);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-primary: #0D1117;
    --bg-secondary: #161B22;
    --bg-card: #1C2128;
    --text-primary: #E6EDF3;
    --text-secondary: #B1BAC4;
    --text-muted: #8B949E;
    --border-color: #30363D;
    --accent: #58A6FF;
    --accent-light: #79C0FF;
    --highlight: var(--gold);
    --highlight-bg: #2D2200;
    --success: #56D364;
    --success-bg: #0D2818;
    --error: #F85149;
    --error-bg: #2D1214;
    --info: #58A6FF;
    --info-bg: #0D1B2E;
  }
}

/* Base Reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--text-primary);
  background-color: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
}

/* Dark Mode Toggle */
.theme-toggle {
  position: fixed;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 1000;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.theme-toggle:hover {
  background: var(--bg-secondary);
  border-color: var(--accent);
}

/* Common Components */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-normal);
}

.card:hover {
  box-shadow: var(--shadow-md);
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  border-radius: 9999px;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.badge-topic1 { background: #E3F2FD; color: #1565C0; }
.badge-topic2 { background: #FCE4EC; color: #C62828; }
.badge-topic3 { background: #E8F5E9; color: #2E7D32; }
.badge-topic4 { background: #FFF3E0; color: #E65100; }
.badge-topic5 { background: #F3E5F5; color: #6A1B9A; }
.badge-topic6 { background: #E0F2F1; color: #00695C; }

[data-theme="dark"] .badge-topic1 { background: #0D1B2E; color: #58A6FF; }
[data-theme="dark"] .badge-topic2 { background: #2D1214; color: #F85149; }
[data-theme="dark"] .badge-topic3 { background: #0D2818; color: #56D364; }
[data-theme="dark"] .badge-topic4 { background: #2D1A00; color: #F0AB00; }
[data-theme="dark"] .badge-topic5 { background: #1E0D2B; color: #BC8CF2; }
[data-theme="dark"] .badge-topic6 { background: #0D2420; color: #56D364; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
}

.btn-primary {
  background: var(--navy);
  color: var(--white);
}

.btn-primary:hover {
  background: var(--navy-light);
}

.btn-gold {
  background: var(--gold);
  color: var(--navy-dark);
}

.btn-gold:hover {
  background: var(--gold-light);
}

.btn-outline {
  background: transparent;
  color: var(--accent);
  border: 2px solid var(--accent);
}

.btn-outline:hover {
  background: var(--accent);
  color: var(--white);
}

/* Callout boxes */
.callout {
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-md);
  margin: var(--space-4) 0;
  border-left: 4px solid;
}

.callout-exam {
  background: var(--highlight-bg);
  border-color: var(--gold);
}

.callout-memorize {
  background: var(--error-bg);
  border-color: var(--error);
}

.callout-tip {
  background: var(--info-bg);
  border-color: var(--info);
}

.callout-success {
  background: var(--success-bg);
  border-color: var(--success);
}

.callout-title {
  font-weight: 700;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-2);
}

/* Progress bar */
.progress-bar {
  width: 100%;
  height: 8px;
  background: var(--bg-secondary);
  border-radius: 4px;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background: var(--navy);
  border-radius: 4px;
  transition: width var(--transition-normal);
}

.progress-bar-fill.pass { background: var(--success); }
.progress-bar-fill.fail { background: var(--error); }

/* Utility classes */
.text-center { text-align: center; }
.text-muted { color: var(--text-muted); }
.font-mono { font-family: var(--font-mono); }
.mt-4 { margin-top: var(--space-4); }
.mt-8 { margin-top: var(--space-8); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-8 { margin-bottom: var(--space-8); }
.mx-auto { margin-left: auto; margin-right: auto; }
.max-w-4xl { max-width: 56rem; }
.hidden { display: none !important; }

/* Theme toggle script helper */
.theme-toggle-icon::before {
  content: '\263C'; /* sun */
}
[data-theme="dark"] .theme-toggle-icon::before {
  content: '\263E'; /* moon */
}