/* Prisma Content — Design Tokens
 * Fuente: imic-website tailwind config (paleta oficial IMIC).
 */

:root {
  /* === BRAND IMIC (oficial) === */
  --color-primary:    #0a8397;  /* teal — color principal IMIC */
  --color-midnight:   #124355;  /* fondos oscuros */
  --color-indigo:     #055496;  /* acento azul */
  --color-emerald:    #0f766e;  /* success / acento secundario */
  --color-cream:      #fffaf0;  /* fondo claro */

  /* Variaciones derivadas (para hover/contraste) */
  --color-primary-dark:   #07687a;
  --color-primary-light:  #1ca0b6;
  --color-primary-bright:  #7dd0de;  /* texto teal legible sobre midnight (≥4.5:1) */
  --color-midnight-deep:  #0a2c39;
  --color-midnight-light: #1a5870;
  --color-cream-soft:     #ece6da;

  /* Acento cálido (para highlights críticos) */
  --color-amber-500: #f59e0b;
  --color-amber-600: #d97706;

  /* Neutros */
  --color-white: #ffffff;
  --color-zinc-100: #f4f4f5;
  --color-zinc-300: #d4d4d8;
  --color-zinc-500: #71717a;
  --color-zinc-700: #3f3f46;
  --color-zinc-900: #18181b;

  /* === SEMÁNTICOS (slides) === */
  --bg-slide:        var(--color-cream);
  --bg-slide-dark:   var(--color-midnight);
  --fg-slide:        var(--color-midnight-deep);
  --fg-slide-dark:   var(--color-cream);
  --accent-primary:  var(--color-primary);
  --accent-highlight: var(--color-amber-500);

  /* === TYPOGRAPHY ===
     IMIC website usa el stack sans default de Tailwind (system).
     Para slides usamos Inter (cercano + carga bien en cualquier display).
  */
  --font-sans:  'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Roboto Serif', Georgia, 'Times New Roman', serif; /* headlines — match prismacosts.mx */
  --font-mono:  'JetBrains Mono', ui-monospace, monospace;

  --fs-hook:    clamp(2.75rem, 6.5vw, 5.5rem);
  --fs-h1:      clamp(2rem, 4.5vw, 3.75rem);
  --fs-h2:      clamp(1.5rem, 3vw, 2.25rem);
  --fs-body:    clamp(1.125rem, 1.5vw, 1.5rem);
  --fs-caption: 0.875rem;

  /* === SPACING === */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 8rem;

  /* === RADII / SHADOWS === */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 24px;
  --radius-4xl: 2.5rem; /* match imic-website .rounded-4xl */

  --shadow-sm: 0 1px 3px rgba(10, 44, 57, 0.08);
  --shadow-md: 0 8px 24px rgba(10, 44, 57, 0.12);
  --shadow-lg: 0 24px 64px rgba(10, 44, 57, 0.18);
}