/*
 * Tokens de diseño de ADSER — "Del plano al acero".
 * Único lugar donde se definen colores, tipografías, radios y tiempos.
 * Todos los demás CSS (style.css, fx-*.css, admin.css) solo LEEN estas variables.
 *
 * Dos familias de superficie:
 *   - "plano": navy con retícula cianotipo (hero, bitácora, orden, contacto)
 *   - "acero": papel/acero claro (nosotros, especialidades, expedientes...)
 * Modo careta (html[data-careta="on"]): todo el sitio pasa a oscuro "careta de soldar".
 */
:root {
  /* ---- Marca ---- */
  --navy: #001C3B;
  --navy-2: #0A2A52;
  --navy-3: #13396B;
  --rojo: #D30302;
  --rojo-2: #F0261F;
  --rojo-oscuro: #9E0201;
  --tinta: #0B1420;

  /* ---- Materiales ---- */
  --cianotipo: #5CC8FF;          /* líneas de plano */
  --cianotipo-tenue: rgba(92, 200, 255, 0.14);
  --chispa: #FFB347;             /* chispa / metal caliente */
  --incandescente: #FFF1C1;      /* punto de soldadura */
  --acero: #8A96A3;
  --acero-2: #C5CDD6;
  --acero-3: #E3E8EE;
  --papel: #F4F6F8;
  --blanco: #FFFFFF;
  --careta: #7DFF9B;             /* verde de lente de careta (solo modo careta) */

  /* ---- Semánticos (superficie "acero" por defecto) ---- */
  --bg: var(--papel);
  --bg-alt: var(--blanco);
  --surface: var(--blanco);
  --surface-2: var(--acero-3);
  --text: var(--tinta);
  --text-2: #3A4757;
  --text-muted: #5E6B7A;
  --line: rgba(11, 20, 32, 0.12);
  --line-fuerte: rgba(11, 20, 32, 0.28);
  --acento: var(--rojo);
  --acento-texto: var(--blanco);
  --foco: var(--rojo);

  /* ---- Superficie "plano" (se aplica con .sec--plano o .is-plano) ---- */
  --plano-bg: var(--navy);
  --plano-bg-2: #00142B;
  --plano-text: #EAF3FB;
  --plano-muted: #9DB3C9;
  --plano-line: rgba(92, 200, 255, 0.22);
  --plano-grid: rgba(92, 200, 255, 0.07);

  /* ---- Tipografía ---- */
  --f-titulo: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  --f-texto: "Barlow", Arial, sans-serif;
  --f-mono: "IBM Plex Mono", "Courier New", monospace;
  --tracking-titulo: 0.02em;
  --tracking-eyebrow: 0.18em;

  --fs-hero: clamp(2.75rem, 1.4rem + 5.6vw, 6rem);
  --fs-h2: clamp(2rem, 1.2rem + 3.4vw, 4rem);
  --fs-h3: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  --fs-body: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --fs-small: 0.875rem;
  --fs-mono: 0.75rem;

  /* Papeles tipográficos (usar estos, no valores sueltos) */
  --fs-h2-seccion: clamp(2.4rem, 1.2rem + 4.4vw, 5rem);   /* título de sección */
  --fs-bloque: clamp(1.35rem, 1.1rem + .9vw, 1.9rem);      /* título de bloque (hojas, fichas, columnas) */
  --fs-elemento: clamp(1.1rem, 1rem + .3vw, 1.3rem);       /* título de elemento (franjas, valores, fases) */
  --fs-lead: clamp(1.15rem, 1rem + .6vw, 1.45rem);         /* entrada de sección */
  --fs-detalle: .95rem;                                     /* texto de apoyo */
  --fs-etiqueta: .82rem;                                    /* etiqueta de interfaz (condensada) */
  --fs-dato: .74rem;                                        /* dato en mono: códigos, folios, cotas */
  --fs-dato-s: .68rem;                                      /* dato chico (pies, insignias); piso de legibilidad */

  /* ---- Espacio, forma, movimiento ---- */
  --gutter: clamp(16px, 4vw, 48px);
  --max: 1280px;
  --sec-pad: clamp(72px, 10vw, 140px);
  --radio: 4px;
  --radio-2: 10px;
  --corte: 28px;                 /* tamaño del corte diagonal (clip-path) */
  --sombra: 0 1px 2px rgba(0, 28, 59, .06), 0 8px 24px rgba(0, 28, 59, .08);
  --sombra-2: 0 2px 6px rgba(0, 28, 59, .08), 0 24px 60px rgba(0, 28, 59, .18);
  --ease: cubic-bezier(.2, .7, .1, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-rapido: 160ms;
  --t-medio: 360ms;
  --t-lento: 800ms;
  --z-barra: 50;
  --z-modal: 100;
  --z-loader: 200;
  --z-cursor: 300;
}

/* Superficie "plano": re-mapea los semánticos dentro de la sección. */
.sec--plano,
.is-plano {
  --bg: var(--plano-bg);
  --bg-alt: var(--plano-bg-2);
  --surface: rgba(10, 42, 82, 0.55);
  --surface-2: rgba(92, 200, 255, 0.06);
  --text: var(--plano-text);
  --text-2: #C9D8E6;
  --text-muted: var(--plano-muted);
  --line: var(--plano-line);
  --line-fuerte: rgba(92, 200, 255, 0.45);
  --foco: var(--cianotipo);
}

/* Modo careta: todo oscuro, acento verde-careta sutil. */
html[data-careta="on"] {
  --bg: #07090B;
  --bg-alt: #0C1014;
  --surface: #11161C;
  --surface-2: #161D24;
  --text: #E7ECEF;
  --text-2: #B9C3CB;
  --text-muted: #8B96A0;
  --line: rgba(125, 255, 155, 0.12);
  --line-fuerte: rgba(125, 255, 155, 0.3);
  --foco: var(--careta);
  --plano-bg: #050807;
  --plano-bg-2: #030504;
  --plano-line: rgba(125, 255, 155, 0.2);
  --plano-grid: rgba(125, 255, 155, 0.06);
  --cianotipo: #7DFF9B;
  --cianotipo-tenue: rgba(125, 255, 155, 0.12);
  --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .5);
  --sombra-2: 0 2px 6px rgba(0, 0, 0, .5), 0 24px 60px rgba(0, 0, 0, .6);
  color-scheme: dark;
}
html[data-careta="on"] .sec--plano,
html[data-careta="on"] .is-plano {
  --surface: rgba(20, 30, 24, 0.6);
  --line: rgba(125, 255, 155, 0.2);
}