/* =========================================================
   PRO EN ESPAÑOL — DESIGN TOKENS v1
   Fase 5 · sistema de diseño digital
   Un solo archivo. Todo lo demás se construye sobre esto.
   ========================================================= */

:root {

  /* ---------- 1. PRIMITIVOS ----------
     Valores crudos. No se usan directamente en componentes:
     se usan a través de los tokens semánticos de la sección 2. */

  --pee-azul-900: #0A2038;
  --pee-azul-800: #0F2E4C;   /* Azul placa — color de marca */
  --pee-azul-700: #1A4570;
  --pee-azul-100: #E7EEF5;
  --pee-azul-050: #F3F7FB;

  --pee-ambar-600: #C97F10;  /* ámbar oscurecido: única versión válida para texto */
  --pee-ambar-500: #F5A524;  /* Ámbar de obra — acento */
  --pee-ambar-100: #FDF0D9;

  --pee-acero-700: #3B4753;
  --pee-acero-500: #5C6B7A;
  --pee-acero-300: #9AA5AF;
  --pee-acero-200: #C7CFD6;
  --pee-acero-100: #E2E6EA;

  --pee-papel:     #F4F2ED;
  --pee-papel-2:   #EDEAE3;
  --pee-blanco:    #FFFFFF;
  --pee-tinta:     #14181C;

  --pee-verde-600: #1F7A54;
  --pee-verde-100: #DCEBE3;
  --pee-rojo-600:  #B3261E;
  --pee-rojo-100:  #F7E3E1;


  /* ---------- 2. SEMÁNTICOS ----------
     Estos sí se usan en los componentes. Si mañana cambia un color de marca,
     se cambia arriba y todo el producto lo hereda. */

  /* Superficies */
  --color-surface:          var(--pee-papel);
  --color-surface-raised:   var(--pee-blanco);
  --color-surface-sunken:   var(--pee-papel-2);
  --color-surface-brand:    var(--pee-azul-800);
  --color-surface-info:     var(--pee-azul-100);
  --color-surface-verified: var(--pee-verde-100);
  --color-surface-error:    var(--pee-rojo-100);

  /* Texto */
  --color-text:            var(--pee-tinta);
  --color-text-secondary:  var(--pee-acero-500);
  --color-text-brand:      var(--pee-azul-800);
  --color-text-inverse:    var(--pee-papel);
  --color-text-disabled:   var(--pee-acero-300);

  /* Bordes */
  --color-border:          var(--pee-acero-200);
  --color-border-strong:   var(--pee-acero-300);
  --color-border-brand:    var(--pee-azul-800);

  /* Acción */
  --color-action:          var(--pee-azul-800);
  --color-action-hover:    var(--pee-azul-700);
  --color-action-text:     var(--pee-papel);
  --color-action-quiet:    transparent;
  --color-focus:           var(--pee-ambar-500);

  /* Acento — REGLA DURA: nunca como color de texto sobre superficie clara.
     Contraste ámbar/papel = 1,82:1. Solo relleno con texto azul, o sobre azul. */
  --color-accent:          var(--pee-ambar-500);
  --color-accent-on:       var(--pee-azul-800);  /* texto encima del ámbar */
  --color-accent-text:     var(--pee-ambar-600); /* ámbar oscurecido, sí legible */

  /* Semánticos de estado */
  --color-verified:        var(--pee-verde-600);
  --color-error:           var(--pee-rojo-600);

  /* Plan pago — deliberadamente SIN color propio.
     Los niveles de plan se expresan con tipografía y jerarquía, nunca con
     un color o una insignia que se pueda confundir con una verificación. */
  --color-plan-label:      var(--pee-acero-500);
  --color-plan-rule:       var(--pee-acero-200);


  /* ---------- 3. ESPACIADO ---------- base 4 */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ---------- 4. RADIOS ---------- */
  --radius-0:    0;
  --radius-1:    4px;   /* chips, etiquetas */
  --radius-2:    6px;   /* botones, campos */
  --radius-3:    8px;   /* tarjetas, distintivos */
  --radius-4:    12px;  /* modales, hojas */
  --radius-pill: 999px; /* solo avatares y contadores */

  /* ---------- 5. SOMBRAS ----------
     Deliberadamente pocas y suaves: el sistema es plano. */
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(15,46,76,.07);
  --shadow-2: 0 2px 10px -3px rgba(15,46,76,.16);
  --shadow-3: 0 12px 32px -12px rgba(15,46,76,.30);

  /* ---------- 6. TIPOGRAFÍA ---------- */
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-ui:      "Barlow", "Helvetica Neue", Arial, sans-serif;

  --text-display:   clamp(30px, 5vw, 48px);
  --text-title-1:   clamp(24px, 3.4vw, 32px);
  --text-title-2:   19px;
  --text-title-3:   16px;
  --text-body:      16px;
  --text-small:     14px;
  --text-label:     12px;
  --text-micro:     11px;

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

  --leading-tight:  1.12;
  --leading-snug:   1.32;
  --leading-normal: 1.5;
  --leading-loose:  1.62;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-label:  0.08em;

  /* ---------- 7. LAYOUT ---------- */
  --container:     1200px;
  --container-pad: var(--space-4);
  --gutter:        16px;
  --bp-sm:  600px;
  --bp-md:  900px;
  --bp-lg:  1200px;
  --bp-xl:  1440px;

  /* ---------- 8. INTERACCIÓN ---------- */
  --touch-min: 48px;          /* área táctil mínima. No negociable. */
  --focus-ring: 3px;
  --dur-fast:  120ms;
  --dur-base:  200ms;
  --ease:      cubic-bezier(.2,.6,.3,1);

  /* ---------- 9. CAPAS ---------- */
  --z-base: 0;
  --z-sticky: 100;
  --z-header: 200;
  --z-dropdown: 300;
  --z-overlay: 400;
  --z-modal: 500;
  --z-toast: 600;
}

@media (min-width: 600px)  { :root { --container-pad: var(--space-6); --gutter: 20px; } }
@media (min-width: 900px)  { :root { --container-pad: var(--space-8); --gutter: 24px; } }

/* Accesibilidad: foco siempre visible, y con el ámbar, que es el único uso
   en el que un color de alta visibilidad sirve exactamente para lo que es. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: var(--focus-ring) solid var(--color-focus);
  outline-offset: 2px;
}

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