/* AXIOMA · Sistema de diseño único — concepto 1a MÁQUINA
   Tokens semánticos por rol. Un solo acento. Cero serif. Ambiente plano.
   Todos los pares de texto documentados en SISTEMA.md § Color. */

:root {
  /* ── Superficie ─────────────────────────────────────────── */
  --surface: #dcdcd9;              /* fondo de página, intocable */
  --surface-raised: #e7e7e4;       /* fila / inset, nivel 1 */
  --surface-card: #ffffff;         /* tarjeta, niveles 2 y 3 */
  --surface-dark: #0e0f12;         /* bloque oscuro a sangre */
  --surface-dark-raised: #1a1b1f;  /* fila dentro de bloque oscuro */
  --surface-field: #f0f0ee;        /* relleno de input sobre tarjeta blanca */

  /* ── Tinta sobre claro (solo dos: no existe una tinta 3) ── */
  --ink-1: #171717;                /* 13.0:1 sobre --surface · títulos, dato, celda clave */
  --ink-2: #5f5f5c;                /* 4.64:1 sobre --surface · párrafo, etiqueta mono, celda secundaria */

  /* ── Tinta sobre oscuro (aquí sí hay tres) ──────────────── */
  --ink-1-inv: #ffffff;                    /* 19.3:1 sobre --surface-dark */
  --ink-2-inv: rgba(255, 255, 255, .72);   /* 10.0:1 */
  --ink-3-inv: rgba(255, 255, 255, .55);   /*  6.2:1 · énfasis susurrado, solo en oscuro */

  /* ── Línea ──────────────────────────────────────────────── */
  --line: rgba(23, 23, 23, .14);       /* hairline de tabla, fila, celda */
  --line-strong: #171717;              /* regla de cabecera de sección */
  --line-inv: rgba(255, 255, 255, .16);
  --line-card: #ffffff;                /* borde 1px de la superficie nivel 1 */

  /* ── Acento (uno solo) ──────────────────────────────────── */
  --accent: #2F6BFF;               /* relleno, y texto solo ≥24px/600 o ≥32px */
  --accent-ink: #1F52D0;           /* 4.81:1 sobre --surface · links y marcas a tamaño de cuerpo */
  --accent-pressed: #1A46B5;       /* estado activo de relleno */
  --accent-inv: #6E97FF;           /* 6.9:1 sobre --surface-dark · texto azul en oscuro */
  --accent-on-fill: #ffffff;       /* 4.54:1 sobre --accent */

  /* ── Estado ─────────────────────────────────────────────── */
  --positive: #0E9F6E;             /* SOLO punto o relleno; nunca texto */
  --focus-ring: #2F6BFF;
  --focus-ring-inv: #6E97FF;

  /* ── Radios (4 valores, ni uno más) ─────────────────────── */
  --r-xs: 4px;    /* medidor de puntos, chip mono, inset, celda destacada */
  --r-s: 8px;     /* input, chip, tarjeta nivel 1, imagen ≤240px */
  --r-m: 16px;    /* tarjeta nivel 2 y 3, imagen >240px, panel claro */
  --r-pill: 999px;/* botón, píldora de estado, avatar */
  /* Bloque oscuro: radio 0, siempre a sangre con arista recta. */

  /* ── Elevación (0-3; máx. dos niveles visibles por sección) */
  --e-0: none;
  --e-1: none;                    /* + background:var(--surface-raised); border:1px solid var(--line-card) */
  --e-2: 0 1px 1px rgba(23,23,23,.04), 0 8px 24px -14px rgba(23,23,23,.35);
  --e-3: 0 2px 4px rgba(23,23,23,.05), 0 18px 40px -24px rgba(23,23,23,.40);
  --e-3-inv: 0 2px 4px rgba(0,0,0,.25), 0 30px 60px -20px rgba(0,0,0,.45);

  /* ── Espacio · base 4 ───────────────────────────────────── */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-6: 24px;  --sp-8: 32px;  --sp-12: 48px; --sp-16: 64px;
  --sp-24: 96px; --sp-32: 128px; --sp-40: 160px;

  --sp-sec: 112px;        /* aire vertical de sección, simétrico arriba y abajo */
  --sp-head: 64px;        /* cabecera de sección → contenido */
  --sp-head-gap: 40px;    /* regla → H2 */
  --sp-lead: 20px;        /* H2 → lead */
  --sp-grid: 24px;        /* gap entre tarjetas */
  --sp-card: 24px;        /* aire interior de tarjeta nivel 1 */
  --sp-card-lg: 32px;     /* aire interior de tarjeta nivel 2-3 */

  /* ── Retícula ───────────────────────────────────────────── */
  --max: 1360px;          /* contenedor ancho */
  --max-read: 68ch;       /* contenedor de lectura */
  --pad: 44px;            /* ≥1280 */
  --cols: 12;
  --gutter: 24px;

  /* ── Tipografía ─────────────────────────────────────────── */
  --font-sans: 'Geist', system-ui, -apple-system, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, monospace;

  --t-display-xl: clamp(44px, 8.9vw, 130px);  /* H1 MARCA · 700 · lh .93 · ls -.05em · UPPERCASE */
  --t-display-l:  clamp(38px, 6.4vw, 92px);   /* H1 VENTA / statement · 700 · lh .95 · ls -.045em */
  --t-h2:         clamp(32px, 4.6vw, 64px);   /* cabecera de sección · 700 · lh .98 · ls -.04em */
  --t-h3:         clamp(22px, 2.2vw, 32px);   /* subtítulo de bloque · 600 · lh 1.15 · ls -.03em */
  --t-data-xl:    clamp(56px, 9vw, 128px);    /* cifra protagonista · 700 · lh .85 · ls -.055em */
  --t-data-m:     clamp(28px, 3vw, 40px);     /* cifra de apoyo · 700 · lh .95 · ls -.035em */
  --t-lead:       clamp(17px, 1.4vw, 21px);   /* 400 · lh 1.5 · max 48ch */
  --t-body:       17px;                        /* 400 · lh 1.55 · max 68ch */
  --t-body-s:     14px;                        /* 400 · lh 1.5 · max 62ch */
  --t-label:      12px;                        /* mono · 500 · ls .1em · UPPERCASE · max 40ch */
  --t-label-s:    11px;                        /* mono · 500 · ls .08em · unidades e índices */
  --t-button:     15px;                        /* 600 · ls -.005em */

  /* ── Textura y ambiente ─────────────────────────────────── */
  --grain-opacity: .055;
  --grain-tile: 160px;
  --grain-z: 60;

  /* Mesh de luz: SOLO el hero de MARCA, una vez por página, nunca bajo texto de cuerpo */
  --ambient-mesh:
    radial-gradient(42% 42% at 46% 48%, rgba(47,107,255,.50), rgba(47,107,255,0) 70%),
    radial-gradient(38% 38% at 72% 62%, rgba(120,90,255,.40), rgba(120,90,255,0) 70%),
    radial-gradient(34% 34% at 30% 72%, rgba(60,200,220,.34), rgba(60,200,220,0) 70%);
  --ambient-mesh-blur: 74px;
  --ambient-mesh-opacity: .6;

  /* Resplandor: SOLO dentro de un bloque oscuro, detrás de la firma */
  --ambient-glow:
    radial-gradient(45% 45% at 50% 50%, rgba(47,107,255,.45), rgba(47,107,255,0) 70%),
    radial-gradient(38% 38% at 68% 62%, rgba(120,90,255,.30), rgba(120,90,255,0) 70%);
  --ambient-glow-blur: 90px;
  --ambient-glow-opacity: .5;

  /* ── Motion ─────────────────────────────────────────────── */
  --ease-enter: cubic-bezier(.16, 1, .3, 1);   /* entradas, reveals, acordeón */
  --ease-state: cubic-bezier(.4, 0, .2, 1);    /* hover, foco, press */
  --dur-reveal: 600ms;
  --dur-state: 150ms;
  --dur-rule: 1100ms;      /* la regla que crece (scaleX 0→1) */
  --reveal-y: 12px;
  --stagger: 60ms;         /* máx. 6 hijos escalonados */
}

@media (max-width: 1279px) { :root { --pad: 32px; } }

@media (max-width: 819px) {
  :root {
    --pad: 20px;
    --sp-sec: 72px;
    --sp-head: 40px;
    --sp-head-gap: 28px;
    --sp-grid: 16px;
    --sp-card: 20px;
    --sp-card-lg: 24px;
    --cols: 4;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-reveal: 200ms; --dur-rule: 0ms; --reveal-y: 0px; --stagger: 0ms; }
}