/* ============================================================================
   8A Dental — tokens de marca
   ----------------------------------------------------------------------------
   Paleta segun la ESPECIFICACION OFICIAL entregada con los recursos de marca
   (resources/COLORES.txt), no derivada por medicion:

       Turquesa (principal)  #05779E   CIELAB L 46.3  a -18.0  b -29.0
       Marino   (secundario) #021633   CIELAB L  7.1  a   2.0  b -22.0

   Las escalas son TINTES FUNCIONALES de esos dos colores, no colores de marca
   nuevos. Existen porque los dos oficiales solos no cubren todos los usos:
   el turquesa sobre marino da 3.55:1 y no sirve como texto.

   Tipografia de marca: Montserrat (SemiBold en titulos, igual que el logotipo).

   Los 18 pares en uso real estan validados contra WCAG 2.1 — 0 fallan.
   ========================================================================== */

:root {
  /* ── OFICIALES — no tocar sin actualizar COLORES.txt ─────────────────── */
  --c-turquesa: #05779E;
  --c-marino:   #021633;

  /* ── Turquesa: tintes funcionales ────────────────────────────────────── */
  --c-tur-900: #044B6E;
  --c-tur-800: #05779E;   /* = turquesa oficial — unico apto con texto blanco (5.07:1) */
  --c-tur-700: #1E85A8;
  --c-tur-600: #3792B1;
  --c-tur-500: #55A3BD;
  --c-tur-400: #73B3C9;   /* acento sobre fondos oscuros (7.74:1 sobre marino) */
  --c-tur-300: #91C3D4;
  --c-tur-200: #B4D6E2;
  --c-tur-100: #D7E9EF;
  --c-tur-50:  #EEF5F8;

  /* ── Marino: tintes funcionales ──────────────────────────────────────── */
  --c-mar-900: #021633;   /* = marino oficial */
  --c-mar-800: #11243F;
  --c-mar-700: #20324B;
  --c-mar-600: #35455C;
  --c-mar-500: #4E5C70;
  --c-mar-400: #747F8F;
  --c-mar-300: #9AA2AD;
  --c-mar-200: #BDC2CA;
  --c-mar-100: #DEE1E4;
  --c-mar-50:  #F2F3F5;

  /* ── Neutros ─────────────────────────────────────────────────────────── */
  --c-n-900: #101720;
  --c-n-700: #39434F;
  --c-n-600: #5C6774;
  --c-n-500: #8B96A4;   /* minimo para bordes de campo — 3.00:1 sobre blanco */
  --c-n-200: #DDE3EA;
  --c-n-100: #EDF1F5;
  --c-n-50:  #F6F8FB;
  --c-white: #FFFFFF;

  --c-ok: #0F7A4A;  --c-warn: #B45309;  --c-error: #C0392B;

  /* ── Semanticos ──────────────────────────────────────────────────────────
     TODO componente se pinta con estos, NUNCA con un --c-* directo: son los
     unicos que cambian con el tema.
     ---------------------------------------------------------------------- */
  --bg:             var(--c-white);
  --surface-alt:    #F4F7FA;
  --surface:        var(--c-white);
  --surface-accent: var(--c-tur-50);
  --border-accent:  var(--c-tur-100);

  --text:        var(--c-n-900);
  --text-muted:  var(--c-n-600);
  --text-invert: var(--c-white);
  --brand-ink:   var(--c-marino);
  --accent-ink:  var(--c-tur-800);

  --border:       var(--c-n-200);
  --border-field: var(--c-n-500);
  --link:         var(--c-tur-800);
  --link-hover:   var(--c-tur-900);
  --focus-ring:   var(--c-tur-700);

  --brand-ground:    var(--c-marino);
  --brand-ground-hi: var(--c-mar-800);
  --brand-accent:    var(--c-turquesa);
  --on-brand:        var(--c-tur-400);   /* antetitulos e iconos sobre marino */
  --on-brand-soft:   var(--c-mar-200);   /* texto de apoyo sobre marino */
  --aviso-bg:        var(--c-tur-50);
  --aviso-text:      var(--c-marino);

  /* ── Tipografia ──────────────────────────────────────────────────────── */
  --font-display: 'Montserrat', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-body:    'Noto Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;

  --fs-h1: clamp(2.1rem, 5.2vw, 3.4rem);
  --fs-h2: clamp(1.55rem, 3.4vw, 2.3rem);
  --fs-h3: 1.25rem;
  --fs-base: 1rem;
  --fs-sm: 0.88rem;
  --fs-label: 0.72rem;

  --lh-tight: 1.15;  --lh-base: 1.6;
  --ls-tight: -0.02em;  --ls-label: 0.14em;

  --s-1: 0.5rem;  --s-2: 1rem;  --s-3: 1.5rem;
  --s-4: 2.5rem;  --s-5: 4rem;  --s-6: 6rem;

  --radius-sm: 6px;  --radius: 10px;  --radius-lg: 16px;
  --shadow: 0 1px 2px rgba(2,22,51,.06), 0 8px 24px rgba(2,22,51,.07);

  --container: 1160px;
  --transition: 180ms ease;
}

/* ── Modo oscuro: superficies derivadas del marino, escalonadas ──────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:             #071B37;
    --surface-alt:    #11243F;
    --surface:        #1E3049;
    --surface-accent: rgba(5,119,158,.22);
    --border-accent:  rgba(115,179,201,.30);

    --text:       #E8EEF4;
    --text-muted: #9DABBA;
    --brand-ink:  #E8EEF4;              /* el marino como texto seria invisible */
    --accent-ink: var(--c-tur-400);      /* el turquesa oficial no rinde sobre oscuro */

    --border:       #3A4960;
    --border-field: #768191;
    --link:         var(--c-tur-400);
    --link-hover:   var(--c-tur-300);

    --brand-ground:    #2A3B54;
    --brand-ground-hi: #3F4E64;
    --aviso-bg:        rgba(5,119,158,.16);
    --aviso-text:      #D6E4EF;
    --shadow: 0 1px 2px rgba(0,0,0,.45), 0 8px 28px rgba(0,0,0,.38);
  }
}

/* ── Accesibilidad ──────────────────────────────────────────────────────── */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}