/* Tema CANÓNICO de marca ERPlora — fuente única de verdad de los tokens compartidos por
 * Cloud y Hub (issue ERPlora/outfitkit#14). Los VALORES son los del Hub (apps/web, rama
 * develop): es la paleta viva y más completa (rampa de steps entera, dark zinc, medium, Inter).
 * Cloud y los módulos consumen estos mismos tokens → shells idénticos en claro y oscuro.
 *
 * Mecanismo OFICIAL de Ionic (variables --ion-*) + tokens --ok-* de OutfitKit. El dark se
 * activa con `.ion-palette-dark`. Como `--ok-* → --ion-* → hex`, los componentes ok-* y los
 * ion-* comparten exactamente la misma marca en claro y en oscuro.
 *
 * Fuera de alcance: la paleta SEMÁNTICA (success/warning/danger/secondary) y las clases
 * `.ion-color-*`, que Cloud define aparte porque no carga el core.css de Ionic. */

:root {
  /* ── Marca (primary) ── */
  --ion-color-primary: #1496d6;
  --ion-color-primary-rgb: 20, 150, 214;
  --ion-color-primary-contrast: #ffffff;
  --ion-color-primary-contrast-rgb: 255, 255, 255;
  --ion-color-primary-shade: #1284bc;
  --ion-color-primary-tint: #2ca1da;

  /* ── Lienzo neutro (estética Linear/Vercel/Notion: lienzo suave, superficies blancas) ── */
  --ion-background-color: #f6f7f9;
  --ion-background-color-rgb: 246, 247, 249;
  --ion-text-color: #1a1c20;
  --ion-text-color-rgb: 26, 28, 32;

  /* Texto atenuado (labels, subtítulos) */
  --ion-color-medium: #6b7280;
  --ion-color-medium-rgb: 107, 114, 128;
  --ion-color-medium-shade: #5e636f;
  --ion-color-medium-tint: #797f8b;

  /* Header/cards/items se funden con el lienzo */
  --ion-toolbar-background: var(--ion-background-color);
  --ion-item-background: #ffffff;
  --ion-card-background: #ffffff;
  --ion-border-color: #e7e9ee;

  --ion-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Escala de pasos (grises) — completa para sombras/superficies coherentes */
  --ion-color-step-50: #f3f4f6;
  --ion-color-step-100: #eceef1;
  --ion-color-step-150: #e3e5ea;
  --ion-color-step-200: #d8dbe1;
  --ion-color-step-250: #cdd1d8;
  --ion-color-step-300: #c0c4cd;
  --ion-color-step-500: #8b8f99;
  --ion-color-step-700: #4a4e57;
  --ion-color-step-850: #2a2d33;

  /* ── Tokens de diseño OutfitKit (geometría / sombras, NO-color) ── */
  --ok-radius: 14px;
  --ok-radius-sm: 10px;
  --ok-radius-pill: 999px;
  --ok-shadow-xs: 0 1px 2px rgba(17, 24, 39, 0.05);
  --ok-shadow-sm: 0 1px 3px rgba(17, 24, 39, 0.06), 0 1px 2px rgba(17, 24, 39, 0.04);
  --ok-shadow-md: 0 6px 20px rgba(17, 24, 39, 0.08), 0 2px 6px rgba(17, 24, 39, 0.04);
  --ok-surface-muted: var(--ion-color-step-50);

  /* ── Alias --ok-* → --ion-* (los componentes ok-* resuelven por esta cadena) ── */
  --ok-primary: var(--ion-color-primary);
  --ok-primary-contrast: var(--ion-color-primary-contrast);
  --ok-bg: var(--ion-background-color);
  --ok-surface: var(--ion-card-background);
  --ok-surface-2: var(--ion-color-step-100, rgba(var(--ion-text-color-rgb), 0.04));
  --ok-text: var(--ion-text-color);
  --ok-muted: rgba(var(--ion-text-color-rgb), 0.6);
  --ok-border: var(--ion-border-color);
  --ok-border-soft: rgba(var(--ion-text-color-rgb), 0.08);
  --ok-spacing: 1rem;
  --ok-container-max: 1140px;
  --ok-font: var(--ion-font-family);
  --ok-font-display: var(--font-display, var(--ok-font));

  /* ── Escala tipográfica semántica ──
   * Los componentes consumen estos niveles en lugar de inventar tamaños
   * propios. Los clamp mantienen la jerarquía entre móvil y escritorio. */
  --ok-type-display-size: clamp(3rem, 2.25rem + 3vw, 4.5rem);
  --ok-type-display-weight: 650;
  --ok-type-display-leading: 1;
  --ok-type-page-title-size: clamp(2.35rem, 1.75rem + 2.6vw, 4rem);
  --ok-type-page-title-compact-size: clamp(2rem, 1.55rem + 2vw, 3.25rem);
  --ok-type-page-title-weight: 650;
  --ok-type-page-title-leading: 1.04;
  --ok-type-section-title-size: clamp(1.75rem, 1.1rem + 2.6vw, 2.85rem);
  --ok-type-section-title-weight: 650;
  --ok-type-section-title-leading: 1.06;
  --ok-type-card-title-size: clamp(1.05rem, 1rem + 0.25vw, 1.15rem);
  --ok-type-card-title-weight: 620;
  --ok-type-card-title-leading: 1.25;
  --ok-type-intro-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --ok-type-intro-leading: 1.6;
  --ok-type-body-size: 1rem;
  --ok-type-body-leading: 1.6;
  --ok-type-card-body-size: 0.92rem;
  --ok-type-card-body-leading: 1.55;
  --ok-type-eyebrow-size: 0.72rem;
  --ok-type-eyebrow-weight: 600;
  --ok-type-eyebrow-leading: 1.2;
}

/* ── OSCURO (dark zinc, coherente con el light) ── */
:root.ion-palette-dark {
  --ion-background-color: #0b0c0e;
  --ion-background-color-rgb: 11, 12, 14;
  --ion-text-color: #f4f5f7;
  --ion-text-color-rgb: 244, 245, 247;

  --ion-color-medium: #9aa0ac;
  --ion-color-medium-rgb: 154, 160, 172;

  --ion-toolbar-background: var(--ion-background-color);
  --ion-item-background: #16181c;
  --ion-card-background: #16181c;
  --ion-border-color: #26282e;

  --ion-color-step-50: #16181c;
  --ion-color-step-100: #1d2025;
  --ion-color-step-150: #26282e;
  --ion-color-step-200: #2f323a;
  --ion-color-step-250: #383b44;
  --ion-color-step-300: #41454f;
  --ion-color-step-500: #6b7280;
  --ion-color-step-700: #aab0bc;
  --ion-color-step-850: #d7dae0;

  --ion-color-primary: #2aa6e4;
  --ion-color-primary-rgb: 42, 166, 228;
  --ion-color-primary-shade: #2592c9;
  --ion-color-primary-tint: #3fafe7;

  --ok-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --ok-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
  --ok-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.55);
  --ok-surface-muted: #101216;
}