/**
 * Fundamentos visuales de Clínica Palermo.
 * Este archivo contiene únicamente variables globales de diseño.
 */

:root {
  /* Colores institucionales. */
  --cp-primary-100: #eaf0fa;
  --cp-primary-500: #0e4fbe;
  --cp-primary-900: #0a2a5e;
  --cp-blue-700: #0e4fbe;
  --cp-blue-200: #d7e4f4;
  --cp-blue-400: #4678c8;
  --cp-blue-500: #008fea;
  --cp-blue-royal: #0b57c2;
  --cp-blue-rgb: 11 87 194;
  --cp-cyan-500: #00b9ea;
  --cp-orange-500: #ff8c45;
  --cp-orange-cta: #f08245;
  --cp-sky-100: #d6e4f5;
  --cp-sky-50: #e1ebf6;

  /* Colores neutros. */
  --cp-white: #ffffff;
  --cp-black: #231f20;
  --cp-navy-900: #00263a;
  --cp-gray-100: #f5f7fa;
  --cp-gray-bg: #f5f5f5;
  --cp-gray-300: #d8dee8;
  --cp-gray-700: #465468;

  /* Tinta de texto de cuerpo (tokens de maqueta). */
  --cp-text-ink: #344054;

  /* Escala de neutros del diseño (canvas de componentes). */
  --cp-text-secondary: #667085;
  --cp-text-help: #98a2b3;
  --cp-text-disabled: #d0d5dd;
  --cp-gray-200: #e7e7e7;
  --cp-gray-blue: #d5dfeb;

  /* Tipografías institucionales. */
  --cp-font-heading: "Manrope", system-ui, sans-serif;
  --cp-font-body: "Montserrat", system-ui, sans-serif;

  /* Alias semánticos utilizados por los componentes. */
  --cp-primary: var(--cp-blue-royal);
  --cp-primary-dark: var(--cp-black);
  --cp-secondary: var(--cp-cyan-500);
  --cp-secondary-dark: var(--cp-blue-700);
  --cp-accent: var(--cp-orange-cta);

  /* Layout y estructuras. */
  --cp-layout-max: 69.75rem;
  --cp-section-space: clamp(3.5rem, 5vw, 4.75rem);

  /* Cabecera y pie. */
  --cp-header-shadow: 0 0.35rem 1rem rgb(33 54 88 / 10%);
  --cp-footer: #344054;

  /* Sombra de halo futurista para acentos clave. */
  --cp-glow: 0 0 1.25rem rgb(0 185 234 / 35%);
  --cp-glow-strong: 0 0 1.75rem rgb(0 185 234 / 55%);

  /* Tarjetas. */
  --cp-card-radius: 0.65rem;
  --cp-card-border: rgb(206 216 230 / 92%);
  --cp-card-shadow: 0 0.25rem 0.9rem rgb(35 31 32 / 5%);

  --cp-text: var(--cp-black);
  --cp-muted: var(--cp-gray-700);
  --cp-background: var(--cp-white);
  --cp-soft: var(--cp-sky-100);
  --cp-dark: var(--cp-black);
  --cp-border: var(--cp-gray-300);

  --cp-radius-small: var(--cp-radius-sm);
  --cp-radius: var(--cp-radius-md);
  --cp-radius-large: var(--cp-radius-lg);

  --cp-shadow-small: var(--cp-shadow-sm);
  --cp-shadow: var(--cp-shadow-md);

  /* Radios. */
  --cp-radius-sm: 0.375rem;
  --cp-radius-md: 0.75rem;
  --cp-radius-lg: 1.25rem;
  --cp-radius-xl: 1rem;
  --cp-radius-pill: 999px;

  /* Sombras. */
  --cp-shadow-sm: 0 0.25rem 1rem rgb(35 31 32 / 10%);
  --cp-shadow-md: 0 0.75rem 2rem rgb(35 31 32 / 16%);

  /* Estructura. */
  --cp-container: 75rem;

  /* Accesibilidad. */
  --cp-focus: 0 0 0 0.375rem rgb(0 143 234 / 22%);
}