/* ===========================================================================
   CLÍNICA SALUD CALATAYUD · Tokens de diseño
   ---------------------------------------------------------------------------
   ESTE ES EL ÚNICO FICHERO QUE HAY QUE TOCAR PARA CAMBIAR LA IDENTIDAD VISUAL.

   Ningún otro CSS escribe un color literal: todos usan las variables de aquí.
   Para aplicar un Pantone nuevo a toda la web basta con sustituir la rampa
   --c-brand-* (y, si procede, --c-accent-*) por los valores equivalentes.

   Cómo construir una rampa a partir de un Pantone:
     1. Convierte el Pantone a HEX con la guía oficial de Pantone Connect.
     2. Coloca ese HEX en --c-brand-600 (es el tono de los botones y enlaces).
     3. Genera el resto aclarando y oscureciendo en pasos regulares. Una
        herramienta como uicolors.app/create lo hace en un clic.
     4. Comprueba el contraste: el texto sobre --c-brand-600 debe superar
        4.5:1 según WCAG AA. Hay un validador en webaim.org/resources/contrastchecker

   Las variables semánticas del segundo bloque (--color-*) son las que usan
   los componentes. Si solo quieres recolorear algo puntual, cámbialas ahí y
   deja la rampa intacta.
   =========================================================================== */

:root {

  /* ── Rampa de marca ──────────────────────────────────────────────────────
     Evolución del azul corporativo original (#2cbfd9 / #1b90da) hacia una
     gama más profunda y sobria, propia del sector sanitario premium.        */
  --c-brand-50:  #eff9fc;
  --c-brand-100: #d6f0f7;
  --c-brand-200: #aee2ef;
  --c-brand-300: #76cee4;
  --c-brand-400: #3fb4d2;
  --c-brand-500: #1f96b8;
  --c-brand-600: #17788f;
  --c-brand-700: #166176;
  --c-brand-800: #17505f;
  --c-brand-900: #0e3a47;
  --c-brand-950: #082531;

  /* ── Rampa de acento ─────────────────────────────────────────────────────
     Naranja cálido heredado del logotipo (#ef6c00). Se reserva para las
     llamadas a la acción, de modo que destaquen sobre el azul dominante.    */
  --c-accent-50:  #fff5ed;
  --c-accent-100: #ffe8d4;
  --c-accent-200: #fecda8;
  --c-accent-300: #fdaa70;
  --c-accent-400: #fa8033;
  --c-accent-500: #ed7f26;
  --c-accent-600: #d9660f;
  --c-accent-700: #b44c0f;

  /* ── Neutros ─────────────────────────────────────────────────────────────
     Ligeramente fríos para que armonicen con el azul de marca.              */
  --c-ink-50:  #f5f8f9;
  --c-ink-100: #e9eff1;
  --c-ink-200: #d5dee1;
  --c-ink-300: #a8b4b9;
  --c-ink-400: #7d8c93;
  --c-ink-500: #5a6b73;
  --c-ink-600: #42545c;
  --c-ink-700: #2a3b43;
  --c-ink-800: #1a2a31;
  --c-ink-900: #0c1a20;
  --c-white:   #ffffff;

  /* ── Estados ─────────────────────────────────────────────────────────── */
  --c-success-50:  #ecfdf5;
  --c-success-500: #10b981;
  --c-success-700: #047857;
  --c-error-50:    #fef2f2;
  --c-error-500:   #ef4444;
  --c-error-700:   #b91c1c;

  /* ── Roles semánticos ────────────────────────────────────────────────────
     Los componentes usan SOLO estas variables, nunca las rampas de arriba.  */
  --color-bg:              var(--c-white);
  --color-bg-subtle:       var(--c-ink-50);
  --color-bg-inverse:      var(--c-brand-900);
  --color-surface:         var(--c-white);
  --color-surface-raised:  var(--c-white);

  --color-text:            var(--c-ink-800);
  --color-text-soft:       var(--c-ink-500);
  --color-text-inverse:    var(--c-white);
  --color-text-on-brand:   var(--c-white);

  --color-heading:         var(--c-brand-900);
  --color-brand:           var(--c-brand-600);
  --color-brand-strong:    var(--c-brand-700);
  --color-brand-soft:      var(--c-brand-50);
  --color-accent:          var(--c-accent-500);
  --color-accent-strong:   var(--c-accent-600);

  --color-border:          var(--c-ink-200);
  --color-border-soft:     var(--c-ink-100);
  --color-focus:           var(--c-brand-400);

  /* ── Tipografía ──────────────────────────────────────────────────────────
     Plus Jakarta Sans, variable (400-800), autoalojada en /assets/fonts.
     Al servirla desde nuestro dominio no se envía ninguna petición a Google,
     lo que evita el problema de RGPD que tiene Google Fonts por CDN.        */
  --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Escala fluida: el tamaño se adapta al ancho sin saltos bruscos. */
  --text-xs:   0.8125rem;
  --text-sm:   0.9063rem;
  --text-base: 1rem;
  --text-md:   clamp(1.0625rem, 1.01rem + 0.27vw, 1.1875rem);
  --text-lg:   clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);
  --text-xl:   clamp(1.375rem, 1.24rem + 0.62vw, 1.75rem);
  --text-2xl:  clamp(1.625rem, 1.4rem + 1.05vw, 2.25rem);
  --text-3xl:  clamp(2rem, 1.63rem + 1.72vw, 3rem);
  --text-4xl:  clamp(2.375rem, 1.82rem + 2.57vw, 3.875rem);

  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.6;
  --leading-relaxed: 1.75;

  --tracking-tight:  -0.022em;
  --tracking-snug:   -0.014em;
  --tracking-wide:    0.08em;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    800;

  /* ── Espaciado (escala de 4 px) ──────────────────────────────────────── */
  --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;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Separación vertical entre secciones, adaptable al viewport. */
  --section-y: clamp(3.5rem, 2.4rem + 5vw, 7rem);

  /* ── Medidas ─────────────────────────────────────────────────────────── */
  --container:       1200px;
  --container-narrow: 760px;
  --gutter:          clamp(1.125rem, 0.8rem + 1.6vw, 2.5rem);

  /* ── Radios ──────────────────────────────────────────────────────────── */
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-full: 999px;

  /* ── Sombras ─────────────────────────────────────────────────────────────
     Tintadas con el azul de marca en lugar de negro puro: es lo que da la
     sensación de profundidad limpia que se asocia al diseño premium.        */
  --shadow-xs:  0 1px 2px rgba(14, 58, 71, 0.06);
  --shadow-sm:  0 2px 8px rgba(14, 58, 71, 0.07);
  --shadow-md:  0 8px 24px -6px rgba(14, 58, 71, 0.12);
  --shadow-lg:  0 18px 44px -12px rgba(14, 58, 71, 0.18);
  --shadow-xl:  0 32px 68px -20px rgba(14, 58, 71, 0.24);

  /* ── Movimiento ──────────────────────────────────────────────────────── */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 140ms;
  --duration-base: 240ms;
  --duration-slow: 420ms;

  /* ── Capas ───────────────────────────────────────────────────────────── */
  --z-dropdown: 50;
  --z-header:   100;
  --z-drawer:   200;
  --z-modal:    300;
}

/* Respeta a quien ha pedido menos animaciones en su sistema operativo. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
}