/* PBergy design tokens — Fase 10, Plan 1.
   Copiados del sistema de diseño del dueño del producto
   (proyecto Claude Design 64ec8312, `_ds/pbergy-.../tokens/colors.css`).

   El bundle de componentes de ese sistema es React y esta app no tiene paso de
   build, así que se copian los TOKENS y los componentes se reimplementan a mano
   en `ui.css`/`ui.js`.

   Los cuatro tokens de estado venían en oklch(); aquí van en hex porque
   `schemes.contrast_ratio()` solo parsea hex, y sin eso el gate WCAG no los puede
   evaluar. El origen de cada uno queda anotado al lado, con la razón medida cuando
   el valor de origen no alcanzaba 3:1 sobre blanco (mínimo WCAG para un objeto
   gráfico) y hubo que oscurecerlo. */
:root {
  --blue-50:#F2F6FB; --blue-100:#E1EBF6; --blue-200:#BBD0E9; --blue-300:#85ABD6;
  --blue-400:#4A85BE; --blue-500:#1C63A8; --blue-600:#0C4F96; --blue-700:#003E7E;
  --blue-800:#002C5C; --blue-900:#001F40;

  --teal-50:#F0FBFA; --teal-100:#DCF5F2; --teal-200:#B3EAE4; --teal-300:#7ADAD1;
  --teal-400:#33C6BA; --teal-500:#00B8A9; --teal-600:#00A89B; --teal-700:#009186;
  --teal-800:#00726A; --teal-900:#004F49;

  --slate-50:#F4F5F6; --slate-100:#E4E7EA; --slate-200:#C8CDD3; --slate-300:#A3AAB4;
  --slate-400:#7B8492; --slate-500:#5B6675; --slate-600:#4E5866; --slate-700:#454E5A;
  --slate-800:#333B45; --slate-900:#1B2027;

  /* --success-500 no puede ser `var(--teal-600)`: el propio --teal-600 (#00A89B)
     mide 2.97:1 sobre blanco, medido con schemes.contrast_ratio -- por debajo de
     3:1, y además el gate de contraste de este archivo exige un literal hex para
     evaluarlo (una referencia var() no se puede medir). Se usa el valor de
     --teal-700 (#009186), medido en 3.89:1. */
  --success-500:#009186;  /* teal-700, no teal-600: 2.97:1 no alcanza 3:1 */
  --success-100: var(--teal-100);
  --warning-500:#B87407;  /* oklch(74% 0.15 75) -> ~#D89A2B mide 2.45:1; oscurecido a 3.79:1 (mismo defecto que ya tuvo el ámbar del Esquema B, 2.10:1) */
  --warning-100:#FDF3E3;  /* oklch(96% 0.04 80) */
  --danger-500:#B3261E;   /* oklch(52% 0.18 25), mide 6.54:1, sin necesidad de ajuste */
  --danger-100:#FBE9E7;   /* oklch(94% 0.05 25) */
  --info-500: var(--blue-500);
  --info-100: var(--blue-100);

  --surface-page:#FFFFFF; --surface-subtle:var(--slate-50);
  --surface-sunken:var(--slate-100); --surface-card:#FFFFFF;
  --surface-inverse:var(--blue-900); --surface-brand:var(--blue-700);
  --surface-accent:var(--teal-500);

  --text-primary:var(--slate-900); --text-secondary:var(--slate-600);
  --text-muted:var(--slate-400); --text-on-brand:#FFFFFF;
  --text-link:var(--blue-700); --text-link-hover:var(--blue-800);

  --border-subtle:var(--slate-100); --border-default:var(--slate-200);
  --border-strong:var(--slate-300); --border-brand:var(--blue-700);
  --border-focus:var(--teal-600);

  --radius-sm:6px; --radius-md:8px; --radius-lg:12px;
  --shadow-sm:0 2px 10px rgba(10,45,107,.25);
  --shadow-md:0 8px 28px rgba(10,45,107,.12);
  --shadow-lg:0 12px 40px rgba(10,45,107,.35);

  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px;
  --space-6:24px; --space-8:32px; --space-10:40px;
}