/* Auris Reader - Design tokens (variables CSS)
 *
 * Fuente de verdad: doc/imagen_corporativa/02_color_palette.md
 *                   doc/imagen_corporativa/03_typography.md
 *
 * Toda modificación de paleta o tipografía DEBE empezar aquí.
 * Si tienes que cambiar un color en otro fichero CSS, mal.
 */

:root {
  /* ----- Paleta primaria ----- */

  /* Firma del producto (highlight TTS de la app desktop): NO usar para web */
  --color-yellow-pure: #FFFF00;

  /* Amarillo brand: el que se ve en TODA la web */
  --color-yellow-brand: #FFD60A;
  --color-yellow-dim:   #E5B800; /* hover/active */
  --color-yellow-soft:  #FFF4C2; /* backgrounds amarillos sutiles */

  /* Negros y superficies oscuras (dark-first) */
  --color-black-base:   #0A0A0A;
  --color-black-pure:   #000000;
  --color-surface-dark: #1A1A1A;
  --color-border-dark:  #2A2A2A;

  /* Blancos y superficies claras */
  --color-white:         #FFFFFF;
  --color-surface-light: #F5F5F5;
  --color-border-light:  #E5E5E5;

  /* ----- Escala de grises ----- */
  --color-gray-50:  #FAFAFA;
  --color-gray-100: #F0F0F0;
  --color-gray-200: #E5E5E5;
  --color-gray-300: #D4D4D4;
  --color-gray-400: #A3A3A3;
  --color-gray-500: #737373;
  --color-gray-600: #525252;
  --color-gray-700: #404040;
  --color-gray-800: #262626;
  --color-gray-900: #171717;

  /* ----- Colores funcionales ----- */
  --color-success:    #00C853;
  --color-error:      #FF3B30;
  --color-warning:    #FF9500;
  --color-info:       #1F6AA5; /* el azul que ya usa la app desktop */
  --color-info-light: #3B8ED0;

  /* ----- Triples RGB para rgba() -----
   * Permiten rgba(var(--color-yellow-brand-rgb), 0.15) sin hardcodear el
   * color en otros ficheros CSS (mandato de la cabecera de este fichero).
   * Mantener en sync con los hex de arriba si cambian. */
  --color-yellow-brand-rgb: 255, 214, 10;
  --color-black-base-rgb:   10, 10, 10;
  --color-success-rgb:      0, 200, 83;
  --color-warning-rgb:      255, 149, 0;
  --color-gray-500-rgb:     115, 115, 115;

  /* ----- Semánticos dark-first ----- */
  /* Para cambiar a light, sobrescribir en [data-theme="light"] abajo. */
  --bg-primary:    var(--color-black-base);
  --bg-secondary:  var(--color-surface-dark);
  --bg-accent:     var(--color-yellow-brand);
  --text-primary:   var(--color-white);
  --text-secondary: var(--color-gray-400);
  --text-muted:     var(--color-gray-500);
  --border-default: var(--color-border-dark);
  --accent:         var(--color-yellow-brand);
  --accent-hover:   var(--color-yellow-dim);
  --link:           var(--color-yellow-brand);
  --link-hover:     var(--color-yellow-dim);

  /* ----- Tipografía ----- */
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                  Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  --font-body:    var(--font-display);
  --font-mono:    'JetBrains Mono', 'Fira Code', Consolas, Menlo, monospace;

  /* Escala modular 1.250 (Major Third) con base 16 px */
  --text-xs:   0.75rem;    /* 12 */
  --text-sm:   0.875rem;   /* 14 */
  --text-base: 1rem;       /* 16 */
  --text-lg:   1.25rem;    /* 20 */
  --text-xl:   1.5625rem;  /* 25 */
  --text-2xl:  1.9375rem;  /* 31 */
  --text-3xl:  2.4375rem;  /* 39 */
  --text-4xl:  3.0625rem;  /* 49 */
  --text-5xl:  3.8125rem;  /* 61 */
  --text-6xl:  4.75rem;    /* 76 */

  /* ----- Spacing scale (base 4 px) ----- */
  --space-1:  0.25rem;  /* 4 */
  --space-2:  0.5rem;   /* 8 */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.25rem;  /* 20 */
  --space-6:  1.5rem;   /* 24 */
  --space-8:  2rem;     /* 32 */
  --space-10: 2.5rem;   /* 40 */
  --space-12: 3rem;     /* 48 */
  --space-16: 4rem;     /* 64 */
  --space-20: 5rem;     /* 80 */
  --space-24: 6rem;     /* 96 */
  --space-32: 8rem;     /* 128 */

  /* ----- Border radius ----- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* ----- Anchos máximos de columna (legibilidad) ----- */
  --container-max:    1200px;
  --container-narrow: 720px;
  --container-wide:   1440px;

  /* ----- Breakpoints estándar (Bug fix #L) -----
   * Inconsistencia detectada: el codebase usa 480/600/640/720/768/769/900 sin
   * patrón. Estándares decididos para futuros @media:
   *   --bp-sm: 480px  — móvil pequeño (compactar wordmark, etc.)
   *   --bp-md: 768px  — tablet portrait / mobile-to-tablet
   *   --bp-lg: 992px  — desktop
   *   --bp-xl: 1200px — desktop ancho
   * NOTA: CSS no permite usar custom properties dentro de @media queries
   * directamente (no en CSS estándar 2026). Sirven como documentación.
   * Cuando se migre todo el código a estos breakpoints, marcar follow-up.
   */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 992px;
  --bp-xl: 1200px;

  /* ----- Animaciones ----- */
  --transition-fast: 120ms ease-out;
  --transition-base: 200ms ease-out;
  --transition-slow: 400ms ease-out;

  /* ----- Z-index scale ----- */
  --z-base:    0;
  --z-raised:  10;
  --z-overlay: 100;
  --z-modal:   1000;
  --z-toast:   10000;
}

/* ----- Modo claro opcional (toggle vía data-theme="light") -----
 * Las decisiones de color cambian, la paleta primaria no.
 */
[data-theme="light"] {
  --bg-primary:     var(--color-surface-light);
  --bg-secondary:   var(--color-white);
  --text-primary:   var(--color-black-base);
  --text-secondary: var(--color-gray-600);
  --text-muted:     var(--color-gray-500);
  --border-default: var(--color-border-light);
  /* accent, link y bg-accent se mantienen: el amarillo funciona en ambos */
}

/* ----- Reset mínimo ----- */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

button, input, select, textarea {
  font: inherit;
}