/* ===== Clinaudit — design tokens (light + dark) =====
   Cambiar la paleta = editar este archivo. Es el ÚNICO lugar donde viven los colores: styles.css, los
   CSS por pantalla y el JSX solo usan var(--…). (Excepción: los trazados SVG de los glifos.)

   Capas:
   1. Rampas «Industry» (--color-*): base del sistema de diseño. El modo oscuro INVIERTE las rampas
      (accent-100 es el más oscuro y accent-900 el más claro): nunca use --color-accent-900 como
      relleno oscuro; use --field.
   2. Tokens de producto Clinaudit (--surface-*, --text-*, --line, --st-*, --field…): lo que deben usar
      las pantallas. Se declaran en ':root, [data-theme]' para que se recalculen contra la rampa oscura.
   3. Tipografía, espaciado, radios, sombras y movimiento.

   El tema vive en <html data-theme="light|dark"> (index.html lo fija antes de pintar; ui.jsx → useTheme).
*/

/* ---------- 1. Industry base (light) ---------- */
:root {
  --color-bg: #f2f2f3;
  --color-surface: #e9e9ea;
  --color-text: #1d1f20;
  --color-accent: #5980a6;
  --color-accent-2: #728fab;
  --color-divider: color-mix(in srgb, #1d1f20 16%, transparent);

  --color-neutral-100: #f5f5f8;
  --color-neutral-200: #e7e7ea;
  --color-neutral-300: #d4d4d7;
  --color-neutral-400: #b7b7ba;
  --color-neutral-500: #98989b;
  --color-neutral-600: #7a7a7d;
  --color-neutral-700: #5d5d60;
  --color-neutral-800: #424244;
  --color-neutral-900: #2b2b2d;

  --color-accent-100: #eef6ff;
  --color-accent-200: #d6ebff;
  --color-accent-300: #b5d9fd;
  --color-accent-400: #94bce3;
  --color-accent-500: #749dc4;
  --color-accent-600: #597ea3;
  --color-accent-700: #416180;
  --color-accent-800: #2c455d;
  --color-accent-900: #1d2d3d;

  --color-accent-2-100: #eef6ff;
  --color-accent-2-200: #d6ebff;
  --color-accent-2-300: #bdd8f2;
  --color-accent-2-400: #9ebbd8;
  --color-accent-2-500: #7e9cb8;
  --color-accent-2-600: #627d98;
  --color-accent-2-700: #486077;
  --color-accent-2-800: #314457;
  --color-accent-2-900: #1f2d3a;

  /* ---------- 3. Type, spacing, radius, shadow ---------- */
  --font-heading: "Barlow Condensed", system-ui, sans-serif;
  --font-heading-weight: 600;
  --font-body: "Barlow", system-ui, sans-serif;

  --space-1: 3.4px;
  --space-2: 6.8px;
  --space-3: 10.2px;
  --space-4: 13.6px;
  --space-6: 20.4px;
  --space-8: 27.2px;

  /* The system draws every frame square ("Radio 0"); radii exist for the few round things. */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 7px;

  --shadow-sm: 0 1px 2px color-mix(in srgb, #2b2b2d 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2b2b2d 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2b2b2d 22%, transparent);

  /* Layout */
  --sidebar-w: 232px;
  --page-max: 1360px;
}

/* ---------- 2. Clinaudit product tokens (resolve against whichever ramp is active) ---------- */
:root, [data-theme] {
  color-scheme: light;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* Motion: "nunca lineal" (except spin/shimmer). */
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --ease-in-out: cubic-bezier(.45, 0, .25, 1);
  --dur-1: 150ms;   /* hover / focus / color */
  --dur-2: 200ms;   /* tabs / chips / chevron */
  --dur-3: 250ms;   /* expand / semáforo / toast / bars */

  --surface-0: var(--color-bg);
  --surface-1: var(--color-neutral-100);
  --surface-2: var(--color-neutral-200);
  --text-1: var(--color-text);
  --text-2: var(--color-neutral-700);
  --text-3: var(--color-neutral-600);
  --line: var(--color-divider);
  --line-soft: color-mix(in srgb, var(--color-text) 7%, transparent);
  --line-strong: color-mix(in srgb, var(--color-text) 45%, transparent);
  --field: var(--color-accent-900);
  --field-text: #ffffff;
  --field-muted: var(--color-accent-300);
  --field-line: rgba(214, 235, 255, .18);

  /* Estados — siempre acompañados de forma: ✓ círculo, ✕ octágono, ▲ triángulo, reloj, guion */
  --st-ok: #2f6b4b;      --st-ok-fill: #e3f0e8;    --st-ok-mark: #4f9a72;
  --st-bad: #8f3329;     --st-bad-fill: #f8e4e1;   --st-bad-mark: #c4513f;
  --st-warn: #6e4c10;    --st-warn-fill: #f6ecd6;  --st-warn-mark: #c9952e;
  --st-pend: #3f5163;    --st-pend-fill: #e4eaf0;  --st-pend-mark: #7d93a8;
  --st-na: #55555a;      --st-na-fill: #e9e9ec;    --st-na-mark: #98989b;
  --st-crit: #ffffff;    --st-crit-fill: #a63d32;

  --skeleton-a: var(--color-neutral-200);
  --skeleton-b: var(--color-neutral-100);
  --overlay: color-mix(in srgb, #0d1620 45%, transparent);
  --selection: color-mix(in srgb, var(--color-accent) 30%, transparent);

  /* Chart series (Análisis / sparklines): tone + dash pattern (dash lives in ui.jsx SERIES_STYLES). */
  --series-1: var(--color-accent-900);
  --series-2: var(--color-accent-700);
  --series-3: var(--color-accent-500);
  --series-4: var(--color-neutral-700);
  --series-5: var(--color-accent-400);
  --series-6: var(--color-neutral-500);

  /* Clinical timeline event colours (línea de tiempo, detail.jsx TL_TYPES). */
  --tl-ingreso: #9a5608;
  --tl-eval: #6d4bc2;
  --tl-medic: #1f7a70;
  --tl-proc: #b23a72;
  --tl-paraclinico: #3a62b8;
  --tl-evolucion: #5d6878;
  --tl-egreso: #2f6b4b;
}

/* ---------- Dark theme ---------- */
[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #121416;
  --color-surface: #1a1d20;
  --color-text: #e6e7e9;
  --color-divider: rgba(230, 231, 233, .13);
  --color-accent: #749dc4;

  --color-neutral-100: #181b1e;
  --color-neutral-200: #212428;
  --color-neutral-300: #2c3034;
  --color-neutral-400: #3b3f44;
  --color-neutral-500: #5b6066;
  --color-neutral-600: #8b9096;
  --color-neutral-700: #aaaeb3;
  --color-neutral-800: #c9ccd0;
  --color-neutral-900: #e6e7e9;

  --color-accent-100: #17212b;
  --color-accent-200: #1d2b39;
  --color-accent-300: #2c455d;
  --color-accent-400: #416180;
  --color-accent-500: #597ea3;
  --color-accent-600: #749dc4;
  --color-accent-700: #94bce3;
  --color-accent-800: #b5d9fd;
  --color-accent-900: #d6ebff;

  --field: #0c141c;
  --field-text: #e6e7e9;
  --field-muted: #8fb0cf;

  --st-ok: #93d3ad;   --st-ok-fill: rgba(111, 191, 144, .14);  --st-ok-mark: #6fbf90;
  --st-bad: #f6b3a7;  --st-bad-fill: rgba(232, 128, 111, .16); --st-bad-mark: #e8806f;
  --st-warn: #ecc983; --st-warn-fill: rgba(224, 178, 90, .15); --st-warn-mark: #e0b25a;
  --st-pend: #b8c7d6; --st-pend-fill: rgba(184, 199, 214, .1); --st-pend-mark: #8fa5ba;
  --st-na: #aaaeb3;   --st-na-fill: rgba(255, 255, 255, .06);  --st-na-mark: #6b7076;
  --st-crit: #ffffff; --st-crit-fill: #b2483b;

  --skeleton-a: #1e2125;
  --skeleton-b: #262a2e;
  --overlay: rgba(0, 0, 0, .55);

  --tl-ingreso: #eaa553;
  --tl-eval: #b39cf5;
  --tl-medic: #5cc7ba;
  --tl-proc: #ef84b6;
  --tl-paraclinico: #86aaf2;
  --tl-evolucion: #a3adbb;
  --tl-egreso: #74c99a;
}