/* Tokens de voxon.cloud. Fuente: APPLE_FRONTEND_PROMPT.md (§6, Apéndice A).
   Cada color tiene 4 variantes: claro, oscuro, alto contraste claro y alto contraste oscuro.
   El contraste se verifica con: node scripts/contraste.mjs */

:root {
  /* Espaciado, base 4 [HEURÍSTICA] */
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 20px; --e-6: 24px;
  --e-8: 32px; --e-10: 40px; --e-12: 48px; --e-16: 64px; --e-24: 96px;

  /* Radios: tarjeta 22 px; lo anidado es concéntrico (22 − padding) [APPLE] */
  --r-tarjeta: 22px; --r-control: 14px; --r-capsula: 999px;

  /* Color — claro */
  --fondo: #ffffff;
  --fondo-2: #f5f5f7;
  --superficie: #ffffff;
  --texto: #1d1d1f;
  --texto-2: #6e6e73;
  --borde: rgb(0 0 0 / 0.1);
  --borde-control: #8e8e93;    /* bordes de campos: ≥ 3:1 (WCAG 1.4.11) */
  --relleno: rgb(120 120 128 / 0.12);
  --pomo: #ffffff;             /* pomo del control segmentado en reposo */
  --acento: #4f46e5;           /* índigo de la marca VOXON */
  --acento-fondo: #4f46e5;
  --sobre-acento: #ffffff;
  --exito: #008932;
  --error: #d70015;
  --foco: #4f46e5;

  /* Vidrio (§9.10) */
  --lg-relleno: 255 255 255;
  --lg-opacidad: 0.62;
  --lg-blur: 14px;
  --lg-sat: 1.8;
  --lg-tinte: 79 70 229;

  /* Elevación (§6.6) [HEURÍSTICA] */
  --elevacion-1: 0 1px 2px rgb(0 0 0 / 0.06), 0 1px 1px rgb(0 0 0 / 0.04);
  --elevacion-2: 0 4px 12px rgb(0 0 0 / 0.08), 0 1px 3px rgb(0 0 0 / 0.06);
  --elevacion-3: 0 8px 24px rgb(0 0 0 / 0.12), 0 2px 6px rgb(0 0 0 / 0.06);
  --elevacion-flotante: 0 12px 32px rgb(0 0 0 / 0.16), 0 2px 8px rgb(0 0 0 / 0.08);

  /* Movimiento: springs de Apple como linear() (Apéndice A.2). Solo para transiciones no interrumpibles. */
  --ease-smooth: linear(0, 0.0229, 0.0789, 0.1533, 0.2362, 0.3209, 0.4031, 0.4803, 0.5511, 0.6147, 0.6712, 0.7208, 0.7639, 0.8011, 0.833, 0.8602, 0.8833, 0.9028, 0.9192, 0.933, 0.9445, 0.9542, 0.9622, 0.9688, 0.9744, 0.9789, 0.9827, 0.9858, 0.9884, 0.9905, 0.9922, 0.9936, 0.9948, 0.9958, 0.9966, 0.9972, 0.9977, 0.9981, 0.9985, 0.9988, 1);
  --dur-smooth: 735ms;
  --ease-snappy: linear(0, 0.0212, 0.0748, 0.1486, 0.2335, 0.3225, 0.4109, 0.4953, 0.5736, 0.6446, 0.7076, 0.7628, 0.8102, 0.8505, 0.8842, 0.9121, 0.9348, 0.953, 0.9675, 0.9787, 0.9873, 0.9938, 0.9984, 1.0017, 1.0039, 1.0053, 1.006, 1.0063, 1.0062, 1.0059, 1.0055, 1.0049, 1.0044, 1.0038, 1.0033, 1.0028, 1.0023, 1.0019, 1.0016, 1.0013, 1);
  --dur-snappy: 697ms;
  --ease-micro: var(--ease-smooth);
  --dur-micro: 441ms;
  --motion-escala: 1;          /* multiplica traslaciones y escalas de entrada; 0 con Reduce Motion */

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #000000;
    --fondo-2: #0e0e10;
    --superficie: #1c1c1e;
    --texto: #f5f5f7;
    --texto-2: #a1a1a6;
    --borde: rgb(255 255 255 / 0.12);
    --relleno: rgb(120 120 128 / 0.32);
    --pomo: #636366;
    --acento: #9c96ff;
    --acento-fondo: #5b52f0;
    --sobre-acento: #ffffff;
    --exito: #4ad968;
    --error: #ff6165;
    --foco: #9c96ff;
    --lg-relleno: 28 28 30;
    --lg-opacidad: 0.58;
    --lg-tinte: 91 82 240;
    --elevacion-1: 0 0 0 1px rgb(255 255 255 / 0.06);
    --elevacion-2: 0 0 0 1px rgb(255 255 255 / 0.08);
    --elevacion-3: 0 0 0 1px rgb(255 255 255 / 0.08), 0 8px 24px rgb(0 0 0 / 0.5);
    --elevacion-flotante: 0 0 0 1px rgb(255 255 255 / 0.08), 0 12px 32px rgb(0 0 0 / 0.6);
    color-scheme: dark;
  }
}

@media (prefers-contrast: more) {
  :root {
    --texto: #000000;
    --texto-2: #3a3a3c;
    --borde: rgb(0 0 0 / 0.55);
    --borde-control: #000000;
    --acento: #3730a3;
    --acento-fondo: #3730a3;
    --exito: #006b27;
    --error: #a3000f;
    --foco: #000000;
  }
}

@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root {
    --texto: #ffffff;
    --texto-2: #d1d1d6;
    --borde: rgb(255 255 255 / 0.6);
    --borde-control: #ffffff;
    --acento: #c7c4ff;
    --acento-fondo: #c7c4ff;
    --sobre-acento: #000000;
    --exito: #7ef59a;
    --error: #ff9a9d;
    --foco: #ffffff;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --motion-escala: 0; }
}

/* Tipografía: Dynamic Type en Safari iOS; 17 px de base fuera de Apple (§6.4) */
:root { font-size: 106.25%; }
@supports (font: -apple-system-body) {
  :root { font: -apple-system-body; }
}