/* ==========================================================================
   VP-PHARM Brand Foundation
   Color tokens, typography, base reset for ERP VP-PHARM presentation deck
   ========================================================================== */

:root {
  /* Brand teal (mark / primary action) */
  --vp-teal-50:  #edfafa;
  --vp-teal-100: #d5f5f6;
  --vp-teal-200: #afeaed;
  --vp-teal-300: #79d9de;
  --vp-teal-400: #3dbfc6;
  --vp-teal-500: #1da5ac;
  --vp-teal-600: #0d8389;   /* PRIMARY brand color */
  --vp-teal-700: #0a6e74;
  --vp-teal-800: #08585c;
  --vp-teal-900: #064448;

  /* Brand red (logo wordmark) */
  --vp-red-500:  #e63946;
  --vp-red-600:  #c92a37;

  /* Surface */
  --vp-cream:    #f7f5f0;
  --vp-surface:  #f4f8f8;
  --vp-white:    #ffffff;
  --vp-ink-900:  #0f1f23;
  --vp-ink-700:  #2c3e42;
  --vp-ink-500:  #4e6768;
  --vp-ink-400:  #6c8284;
  --vp-ink-300:  #94a8aa;
  --vp-ink-200:  #c8d3d4;
  --vp-ink-100:  #e6ecec;
  --vp-ink-50:   #f3f6f6;

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

  /* Effects */
  --vp-shadow-sm: 0 1px 2px rgba(8, 60, 64, 0.05);
  --vp-shadow:    0 4px 12px -2px rgba(8, 60, 64, 0.10), 0 2px 4px rgba(8, 60, 64, 0.06);
  --vp-shadow-md: 0 10px 30px -10px rgba(8, 60, 64, 0.18), 0 4px 10px rgba(8, 60, 64, 0.08);
  --vp-shadow-lg: 0 24px 48px -12px rgba(8, 60, 64, 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 */
.vp-wordmark {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.01em;
  color: var(--vp-red-500);
}
.vp-tagline {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--vp-teal-500);
}

/* Brand gradient backgrounds */
.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);
}

/* Scrollbar (subtle teal) */
* {
  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; }
}