/* ==========================================================================
   Fable-X Brand Foundation (deck giới thiệu Pharma Pack)
   Color tokens, typography, base reset cho deck pitch Fable-X — case
   study VP-PHARM.
   Lưu ý: TÊN token giữ prefix --vp-* để 48 slide cũ không cần đổi class;
   GIÁ TRỊ swap sang palette Fable-X (#0066FF blue + #FF6600 orange).
   ========================================================================== */

:root {
  /* Brand blue (mark / primary action) — Fable-X */
  --vp-teal-50:  #e6f0ff;
  --vp-teal-100: #cce0ff;
  --vp-teal-200: #99c2ff;
  --vp-teal-300: #66a3ff;
  --vp-teal-400: #3385ff;
  --vp-teal-500: #1a75ff;
  --vp-teal-600: #0066FF;   /* PRIMARY brand Fable-X blue */
  --vp-teal-700: #0052cc;
  --vp-teal-800: #003d99;
  --vp-teal-900: #002966;

  /* Brand orange (accent / spark) — Fable-X */
  --vp-red-500:  #FF8533;
  --vp-red-600:  #FF6600;   /* SECONDARY brand Fable-X orange */

  /* Aliases Fable-X — nếu slide mới muốn đặt rõ ràng */
  --fbx-blue:    #0066FF;
  --fbx-blue-dark: #003d99;
  --fbx-orange:  #FF6600;
  --fbx-orange-dark: #cc5200;
  --fbx-ink:     #0F2537;

  /* Surface */
  --vp-cream:    #fff7ed;
  --vp-surface:  #f5f8ff;
  --vp-white:    #ffffff;
  --vp-ink-900:  #0F2537;
  --vp-ink-700:  #2c3e54;
  --vp-ink-500:  #4e6788;
  --vp-ink-400:  #6c829e;
  --vp-ink-300:  #94a8c8;
  --vp-ink-200:  #c8d3e8;
  --vp-ink-100:  #e6ecf5;
  --vp-ink-50:   #f3f6fb;

  /* Semantic */
  --vp-success:  #16a34a;
  --vp-warn:     #f59e0b;
  --vp-danger:   #dc2626;
  --vp-info:     #0284c7;

  /* Effects */
  --vp-shadow-sm: 0 1px 2px rgba(15, 37, 55, 0.06);
  --vp-shadow:    0 4px 12px -2px rgba(15, 37, 55, 0.10), 0 2px 4px rgba(15, 37, 55, 0.06);
  --vp-shadow-md: 0 10px 30px -10px rgba(15, 37, 55, 0.18), 0 4px 10px rgba(15, 37, 55, 0.08);
  --vp-shadow-lg: 0 24px 48px -12px rgba(15, 37, 55, 0.25);

  /* Radii */
  --vp-r-sm: 6px;
  --vp-r:    10px;
  --vp-r-md: 14px;
  --vp-r-lg: 20px;
  --vp-r-xl: 28px;

  /* Layout */
  --sidebar-w:        280px;
  --sidebar-w-mini:   72px;
  --header-h:         64px;
  --footer-h:         40px;
  --slide-pad:        48px;

  /* Typography */
  --font-sans: 'Inter', 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', Menlo, Consolas, monospace;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  color: var(--vp-ink-900);
  background: var(--vp-surface);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

button { font-family: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }
a { color: var(--vp-teal-600); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg { display: block; max-width: 100%; }
ul, ol { padding-left: 1.25rem; margin: 0; }
li { margin: 0.25rem 0; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
p { margin: 0; }

/* Headings scale */
.h-display {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4vw, 4rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.h1 { font-size: clamp(2rem, 3vw, 2.75rem); font-weight: 800; letter-spacing: -0.02em; }
.h2 { font-size: clamp(1.5rem, 2vw, 2rem); font-weight: 700; letter-spacing: -0.015em; }
.h3 { font-size: 1.25rem; font-weight: 700; }
.h4 { font-size: 1.05rem; font-weight: 600; }
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--vp-teal-600);
}
.lead {
  font-size: 1.125rem;
  color: var(--vp-ink-500);
  line-height: 1.55;
}
.caption {
  font-size: 0.8rem;
  color: var(--vp-ink-400);
}

/* Brand wordmark (đổi sang Fable-X blue + ink) */
.vp-wordmark {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.01em;
  color: var(--vp-ink-900);
}
.vp-tagline {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--vp-teal-600);
}

/* Brand gradient backgrounds (Fable-X blue → dark + orange accent) */
.bg-vp-gradient {
  background: linear-gradient(135deg, var(--vp-teal-600) 0%, var(--vp-teal-800) 100%);
  color: var(--vp-white);
}
.bg-vp-soft {
  background: linear-gradient(135deg, var(--vp-teal-50) 0%, var(--vp-surface) 100%);
}
.bg-vp-cream {
  background: var(--vp-cream);
}
.bg-fbx-blend {
  background:
    radial-gradient(circle at 15% 20%, rgba(0,102,255,0.10), transparent 55%),
    radial-gradient(circle at 88% 80%, rgba(255,102,0,0.10), transparent 55%),
    var(--vp-white);
}

/* Scrollbar (subtle blue) */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--vp-teal-300) transparent;
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--vp-teal-300); border-radius: 4px; }
*::-webkit-scrollbar-track { background: transparent; }

/* Selection */
::selection { background: var(--vp-teal-200); color: var(--vp-teal-900); }

/* Print: keep slide-only, hide chrome */
@media print {
  .app-sidebar, .app-header, .app-footer, .nav-buttons { display: none !important; }
  .app-main { margin: 0 !important; padding: 0 !important; }
  .slide { box-shadow: none !important; min-height: auto !important; }
  body { background: white !important; }
}