/* ============================================================================
   OwnCoding UI — tokens de tema (solo variables)
   Este archivo **no** toca el documento: son variables CSS. Una app con diseño
   propio lo importa solo (o lo copia al suyo) sin adoptar la base global:
     @import 'owncoding-ui/tokens.css';
   La base opt-in (html/body/tipografías/foco) vive en `owncoding-ui/base.css` y
   el paquete completo (tokens + base) en `owncoding-ui/styles.css`.
   El tema oscuro se activa con la clase `dark` en <html>.
   Cada app puede pisar cualquier variable en su propio CSS.

   La paleta global es el lenguaje v2 "device ops" (#241, promovido a global en
   la ronda .21): consola con verde pass y azul de acción. Los tonos semánticos
   son de **TEXTO AA** (4.5:1 sobre las superficies: medidos en el shell real);
   los vivos de PhoneCheck quedan para rellenos e indicadores en `--c-pass` y
   `--c-accion`. `.tema-v2`/`.v2-piloto` siguen como **alias temporal**.
   ============================================================================ */

:root {
  /* Paleta clara (v2 "device ops" con profundidad, #241): lienzo más profundo
     y tarjetas/paneles en capas; los estados siguen en tonos de texto AA. */
  --c-paper: 241 244 248;
  --c-fore: 14 17 22;
  --c-ink: 255 255 255;
  --c-ink-950: 241 244 248;
  --c-ink-900: 255 255 255;
  --c-ink-800: 248 250 253;
  --c-ink-700: 237 241 246;
  --c-ink-600: 213 220 230;
  --c-ink-500: 148 163 184;
  --c-mute: 71 85 105;
  --c-fono: 16 185 129;
  --c-fono-dark: 4 120 87;
  --c-fono-light: 4 120 87;
  --c-fono-glow: 16 185 129;
  --c-fono-soft: 236 253 245;
  --c-ok: 22 101 52;
  --c-bad: 185 28 28;
  --c-warn: 146 64 14;
  --c-info: 32 89 190;
  --c-reserved: 109 40 217;
  --c-onbrand: 4 28 18;
  /* Texto AA sobre botones semánticos sólidos. */
  --c-on-ok: 255 255 255;
  --c-on-bad: 255 255 255;
  /* Verde pass/certificado y azul acción (tema consola, épica #241) */
  --c-pass: 22 197 94;
  --c-pass-dark: 26 141 79;
  --c-pass-soft: 231 248 238;
  --c-accion: 77 124 254;

  /* Texto de chips sobre relleno tenue (#5): familia de TEXTO para los tonos
     que se apoyan en tintes suaves (Badge, ChipEstado, puntos de estado).
     El tono base queda para rellenos, puntos y bordes; esta familia se mide
     ≥4.5:1 sobre blanco y sobre el canvas, y una app con paleta propia la pisa
     (`--c-ok-text`, `--c-warn-text`, …) sin tocar los tonos base. */
  --c-ok-text: 22 101 52;
  --c-warn-text: 146 64 14;
  --c-bad-text: 185 28 28;
  --c-info-text: 32 89 190;
  --c-fono-text: 6 95 70;
  --c-pass-text: 22 101 52;

  /* Borde interactivo (#5): el borde que es la única affordance de un control
     (variant outline, botones de solo-icono con borde) se mide ≥3:1 sobre las
     superficies (WCAG 1.4.11). */
  --c-interactivo: 116 131 154;

  /* Tokens de superficie */
  --oc-brand: rgb(var(--c-fono));
  --oc-canvas: rgb(var(--c-paper));
  --oc-surface: rgb(var(--c-ink));
  --oc-border: rgb(var(--c-ink-600));
  --oc-radius: 1rem;

  /* Profundidad (#241): sombras por tema. El preset las expone como
     `shadow-card` (tarjetas) y `shadow-float` (modales y popovers). */
  --oc-shadow-card: 0 1px 2px rgba(15, 23, 42, .05), 0 2px 6px -2px rgba(15, 23, 42, .09);
  --oc-shadow-float: 0 12px 32px -12px rgba(15, 23, 42, .26), 0 2px 8px -2px rgba(15, 23, 42, .10);
}

/* ── Sistema --ds-* (geometría, elevación y contrato medido, #1) ────────────
   Escala portable cosechada de PagaYa (app/tokens.css + docs/ui-kit.md) con la
   elevación y los halos expresados sobre los tokens de la librería: el halo
   sigue al acento de la app (--c-fono) y las superficies a --c-ink-800. Es
   aditivo: ninguna app que no consuma --ds-* cambia su render, y cualquier
   valor se puede pisar desde el CSS de la app (el último gana). */
:root {
  /* Espaciado: 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 */
  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 24px;
  --ds-space-6: 32px;
  --ds-space-7: 48px;
  --ds-space-8: 64px;
  /* Radios */
  --ds-radius-xs: 8px;
  --ds-radius-sm: 12px;
  --ds-radius-md: 16px;
  --ds-radius-lg: 24px;
  --ds-radius-xl: 32px;
  --ds-radius-2xl: 40px;
  --ds-radius-pill: 999px;
  /* Tipografía: jerarquía grande (el cuerpo no baja de --ds-text-sm) */
  --ds-text-xs: 11px;
  --ds-text-sm: 12px;
  --ds-text-md: 13px;
  --ds-text-lg: 15px;
  --ds-title-sm: 22px;
  --ds-title-md: 28px;
  --ds-title-lg: 38px;
  --ds-title-xl: 48px;
  --ds-leading-tight: 1.04;
  --ds-leading-snug: 1.35;
  --ds-leading-relaxed: 1.6;
  --ds-tracking-title: -0.045em;
  /* Elevación, halo de marca y superficies con gradiente (siguen la paleta) */
  --ds-shadow-1: 0 1px 2px rgb(15 23 42 / 0.1);
  --ds-shadow-2: 0 22px 50px -30px rgb(15 23 42 / 0.26);
  --ds-shadow-3: 0 38px 90px -42px rgb(15 23 42 / 0.32);
  --ds-glow: 0 0 30px -14px rgb(var(--c-fono) / 0.3);
  --ds-glow-strong: 0 0 40px -12px rgb(var(--c-fono) / 0.34);
  --ds-gradient-surface: linear-gradient(168deg, rgb(var(--c-ink-800)), rgb(var(--c-ink)) 62%);
  --ds-gradient-panel: linear-gradient(176deg, rgb(var(--c-ink-800)), rgb(var(--c-ink)) 48%);
  --ds-gradient-immersive: radial-gradient(circle at 84% 0, rgb(var(--c-fono) / 0.12), transparent 46%), linear-gradient(150deg, rgb(var(--c-ink-800)), rgb(var(--c-ink)) 62%);
  --ds-gradient-auth: radial-gradient(circle at 12% 12%, rgb(var(--c-fono) / 0.1), transparent 32rem), radial-gradient(circle at 88% 88%, rgb(var(--c-fono) / 0.07), transparent 30rem), rgb(var(--c-paper));
  /* Ritmo de contenedores */
  --ds-shell-pad-x: 38px;
  --ds-shell-pad-y: 24px;
  --ds-section-gap: 26px;
  --ds-card-pad: 28px;
  /* Contrato de densidad: se miden, no se declaran (ver REGLAS.md §8) */
  --ds-row: 54px;
  --ds-cell-min: 150px;
}

/* Halos y elevación del modo oscuro (en oscuro el halo se ve más) */
html.dark {
  --ds-shadow-1: 0 1px 2px rgb(0 0 0 / 0.16);
  --ds-shadow-2: 0 22px 50px -28px rgb(0 0 0 / 0.62);
  --ds-shadow-3: 0 38px 90px -40px rgb(0 0 0 / 0.72);
  --ds-glow: 0 0 32px -12px rgb(var(--c-fono) / 0.42);
  --ds-glow-strong: 0 0 44px -10px rgb(var(--c-fono) / 0.5);
  --ds-gradient-immersive: radial-gradient(circle at 84% 0, rgb(var(--c-fono) / 0.22), transparent 46%), linear-gradient(150deg, rgb(var(--c-ink-800)), rgb(var(--c-ink)) 62%);
  --ds-gradient-auth: radial-gradient(circle at 12% 12%, rgb(var(--c-fono) / 0.16), transparent 32rem), radial-gradient(circle at 88% 88%, rgb(var(--c-fono) / 0.1), transparent 30rem), rgb(var(--c-paper));
}

html.dark {
  /* Paleta oscura (v2 "device ops": base #0E1116, panel #1F2430) con capas y
     bordes levantados para que las superficies no queden planas. */
  --c-paper: 14 17 22;
  --c-fore: 244 246 250;
  --c-ink: 31 36 48;
  --c-ink-950: 14 17 22;
  --c-ink-900: 24 29 39;
  --c-ink-800: 36 42 56;
  --c-ink-700: 45 52 68;
  --c-ink-600: 62 71 90;
  --c-ink-500: 96 107 128;
  --c-mute: 154 163 178;
  --c-fono: 5 241 156;
  --c-fono-dark: 4 185 120;
  --c-fono-light: 124 255 201;
  --c-fono-glow: 5 241 156;
  --c-fono-soft: 6 46 34;
  --c-ok: 74 222 128;
  --c-bad: 252 165 165;
  --c-warn: 252 211 77;
  --c-info: 159 184 255;
  --c-reserved: 196 181 253;
  --c-onbrand: 6 30 20;
  --c-on-ok: 31 36 48;
  --c-on-bad: 31 36 48;

  /* Texto de chips en oscuro (#5): los mismos tonos claros del tema (todos
     ≥5:1 sobre el tinte) para que la familia quede definida también acá. */
  --c-ok-text: 74 222 128;
  --c-warn-text: 252 211 77;
  --c-bad-text: 252 165 165;
  --c-info-text: 159 184 255;
  --c-fono-text: 124 255 201;
  --c-pass-text: 34 197 94;
  --c-interactivo: 124 135 155;

  --oc-canvas: rgb(var(--c-paper));
  --oc-surface: rgb(var(--c-ink));
  --oc-border: rgb(var(--c-ink-600));
  --oc-shadow-card: 0 1px 2px rgba(0, 0, 0, .45), 0 2px 8px -2px rgba(0, 0, 0, .55);
  --oc-shadow-float: 0 16px 40px -12px rgba(0, 0, 0, .65), 0 2px 8px -2px rgba(0, 0, 0, .50);
}

/* ── Tema consola (épica #241) ──────────────────────────────────────────────
   Base oscura tipo consola para lo operativo (inspección, rack, certificación)
   con verde pass para lo certificado y azul acción. Se activa con la clase
   `consola` en <html> o en el contenedor de la pantalla; el verde pass y el
   azul acción quedan disponibles en cualquier tema.
   Paleta de referencia: #0E1116 fondo, #1F2430 panel, #2D2D30 borde,
   #F1F3F5 texto, #22C55E pass, #1A8D4F pass oscuro, #E7F8EE pass suave,
   #4D7CFE acción. */
.consola {
  --c-paper: 14 17 22;
  --c-ink: 31 36 48;
  --c-ink-950: 14 17 22;
  --c-ink-900: 24 29 39;
  --c-ink-800: 31 36 48;
  --c-ink-700: 39 45 58;
  --c-ink-600: 45 45 48;
  --c-ink-500: 90 96 110;
  --c-fore: 241 243 245;
  --c-mute: 168 176 190;
  --c-fono: 34 197 94;
  --c-fono-dark: 26 141 79;
  --c-fono-light: 74 222 128;
  --c-fono-glow: 34 197 94;
  --c-fono-soft: 6 46 34;
  --c-onbrand: 6 30 20;
  --c-on-ok: 255 255 255;
  --c-on-bad: 255 255 255;
  --c-interactivo: 124 135 155;

  --oc-canvas: rgb(var(--c-paper));
  --oc-surface: rgb(var(--c-ink));
  --oc-border: rgb(var(--c-ink-600));
  --oc-shadow-card: 0 1px 2px rgba(0, 0, 0, .45), 0 2px 8px -2px rgba(0, 0, 0, .55);
  --oc-shadow-float: 0 16px 40px -12px rgba(0, 0, 0, .65), 0 2px 8px -2px rgba(0, 0, 0, .50);
}

/* ── Scope del piloto (#241) — alias temporal ──────────────────────────────
   Los tokens del lenguaje v2 ya son **globales** (arriba): `.tema-v2` y
   `.v2-piloto` quedan como alias para las pantallas y el shell que todavía
   usan la clase (ahí siguen aplicándose las reglas de navegación y contenido
   de `base.css`). Se retiran cuando las apps terminen la migración. */
.tema-v2,
.v2-piloto {
  /* Sin overrides: los tokens v2 son globales. */
}

.tema-v2 .v2-numero,
.v2-piloto .v2-numero {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}