/* Acceso · design tokens v2 (definitiva) · AccesibleWeb · 26-09-2026 · con el feedback de Acceso del 25-09
   Todos los ratios de contraste verificados con la fórmula WCAG 2.2.
   Uso: importar antes de cualquier otra hoja; consumir solo variables, nunca hex sueltos. */

:root {
  /* ---- Color: paleta de marca ---- */
  --ac-ink:        #001C33; /* texto principal, títulos, fondo inverso · 17,3:1 sobre blanco */
  --ac-navy:       #003866; /* texto secundario, foco, hover primario · 12,0:1 */
  --ac-blue:       #005399; /* énfasis, enlaces, botón primario, bordes funcionales · 7,8:1 */
  --ac-bright:     #008FCC; /* SOLO gráfico y texto ≥24px · 3,6:1 */
  --ac-sky-vivid:  #33A2FF; /* SOLO sobre fondo inverso · 6,4:1 sobre ink */
  --ac-sky:        #66B9FF; /* bordes decorativos; enlaces y foco sobre inverso · 8,2:1 sobre ink */
  --ac-light:      #CCE8FF; /* etiquetas, fondos destacados, separadores */
  --ac-surface-2:  #EEF8FF; /* superficie destacada */
  --ac-surface:    #F8FCFF; /* tarjetas (siempre con borde) */
  --ac-page:       #FFFFFF;
  --ac-logo-blue:  #0073D3; /* SOLO el logotipo (4,8:1); nunca color de interfaz */

  /* ---- Color: semánticos (texto / fondo) ---- */
  --ac-error:        #B42318; --ac-error-bg:   #FEF3F2; /* 6,6:1 */
  --ac-warning:      #B54708; --ac-warning-bg: #FFFAEB; /* 5,4:1 */
  --ac-success:      #027A48; --ac-success-bg: #ECFDF3; /* 5,4:1 */
  --ac-info:         var(--ac-blue); --ac-info-bg: var(--ac-surface-2);
  --ac-critical:     #7A271A; /* 9,9:1 */

  /* ---- Índice de riesgo (siempre con la palabra del tramo y textura en gráficos) ---- */
  --ac-risk-low:      var(--ac-success);
  --ac-risk-medium:   var(--ac-warning);
  --ac-risk-high:     var(--ac-error);
  --ac-risk-critical: var(--ac-critical);

  /* ---- Roles ---- */
  --ac-text:          var(--ac-ink);
  --ac-text-muted:    var(--ac-navy);
  --ac-link:          var(--ac-blue);
  --ac-link-hover:    var(--ac-navy);
  --ac-border:        var(--ac-light);   /* decorativo */
  --ac-border-strong: var(--ac-blue);    /* funcional: campos, controles */
  --ac-focus:         var(--ac-navy);
  --ac-button-bg:     var(--ac-blue);
  --ac-button-hover:  var(--ac-navy);
  --ac-button-active: var(--ac-ink);
  --ac-button-text:   #FFFFFF;

  /* ---- Tipografía ---- */
  --ac-font-brand: "Outfit", "Inter", system-ui, sans-serif; /* Outfit (OFL): display, h1, h2, cifras, tagline; pesos 600–800 */
  --ac-font-text:  "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ac-font-mono:  ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --ac-size-display: clamp(2.25rem, 1.5rem + 2.5vw, 3rem);   /* 36–48 */
  --ac-size-h1:      clamp(2rem, 1.4rem + 2vw, 2.5rem);       /* 32–40 */
  --ac-size-h2:      clamp(1.625rem, 1.3rem + 1.2vw, 2rem);   /* 26–32 */
  --ac-size-h3:      1.5rem;    /* 24 */
  --ac-size-h4:      1.25rem;   /* 20 */
  --ac-size-lead:    1.25rem;   /* 20 */
  --ac-size-body:    clamp(1rem, .95rem + .3vw, 1.125rem);    /* 16–18 */
  --ac-size-ui:      1rem;      /* 16 */
  --ac-size-small:   .875rem;   /* 14 · mínimo absoluto */
  --ac-size-eyebrow: .8125rem;  /* 13 · solo versalitas cortas */

  --ac-lh-display: 1.1; --ac-lh-heading: 1.2; --ac-lh-body: 1.6; --ac-lh-ui: 1.5;
  --ac-ls-heading: -0.02em;  /* nunca menos */
  --ac-ls-eyebrow:  0.08em;
  --ac-measure: 70ch;

  /* ---- Espaciado (base 4) ---- */
  --ac-space-1: .25rem; --ac-space-2: .5rem; --ac-space-3: .75rem; --ac-space-4: 1rem;
  --ac-space-6: 1.5rem; --ac-space-8: 2rem; --ac-space-12: 3rem; --ac-space-16: 4rem; --ac-space-24: 6rem;
  --ac-container: 1120px; --ac-container-text: 72ch; --ac-gutter: 1.5rem;

  /* ---- Forma y elevación ---- */
  --ac-radius-card: 12px; --ac-radius-field: 12px; --ac-radius-tag: 8px; --ac-radius-pill: 999px;
  --ac-border-w: 1px; --ac-border-w-strong: 2px;
  --ac-shadow-float: 0 8px 24px rgba(0, 28, 51, .08); /* solo menús y diálogos */
  --ac-shadow-glow:  0 0 24px rgba(0, 143, 204, .28);  /* solo tarjetas de etapa (Acceso360); decorativo; off en forced-colors */
  --ac-radius-etapa: 0;   /* tarjetas de etapa */

  /* ---- Foco, objetivo, movimiento ---- */
  --ac-focus-w: 3px; --ac-focus-offset: 2px;
  --ac-target: 44px; --ac-target-gap: 8px;
  --ac-motion: 180ms; --ac-ease: cubic-bezier(.2, 0, 0, 1);
}

/* Modo inverso: aplicar a hero, franjas y pie sobre tinta */
.ac-inverse {
  --ac-page:          var(--ac-ink);
  --ac-surface:       #0A2A47;
  --ac-text:          #FFFFFF;
  --ac-text-muted:    var(--ac-light);
  --ac-link:          var(--ac-sky);
  --ac-link-hover:    #FFFFFF;
  --ac-focus:         var(--ac-sky);
  --ac-border:        #1F4468;
  --ac-border-strong: var(--ac-sky);
  --ac-button-bg:     #FFFFFF;
  --ac-button-text:   var(--ac-blue);
  --ac-button-hover:  var(--ac-light);
  --ac-accent:        var(--ac-sky-vivid);
  background: var(--ac-page); color: var(--ac-text);
}

/* Reglas globales mínimas */
:focus-visible { outline: var(--ac-focus-w) solid var(--ac-focus); outline-offset: var(--ac-focus-offset); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }