/* =========================================================
   GEOTEST · Design tokens (ERP) — fuente global única
   Alineado con docs/prompts/design-system.yaml (v2.8) = fuente de la verdad.

   DECISIONES DE COHERENCIA (importante):
   1. COLORES → OKLCH, con los valores literales del YAML (tokens.light/dark).
      OKLCH es independiente del root font-size, así que se adopta tal cual.
   2. DIMENSIONES (spacing, radius, control, tipografía, shadows) → en px.
      El host (Bootstrap 3) fija `html{font-size:10px}` en
      public/css/bootstrap.min.css. Con ese root, `rem` rendurizaría al 62.5%
      del tamaño previsto. El propio YAML documenta este caso en
      measurement_strategy.host_integration. Por eso se conservan px, usando
      los VALORES OBJETIVO del YAML calculados a su root asumido de 16px
      (ej. 0.625rem → 10px, 2.5rem → 40px). Así el render es correcto bajo
      el host real y los valores siguen siendo los del sistema de diseño.
   3. MODO OSCURO → mecanismo híbrido data-mode + prefers-color-scheme (YAML
      theme.mechanism), con color-scheme declarado en :root (YAML
      color_engine.color_scheme_declaration → enforce_in: tokens.css).
   4. ALIAS LEGACY → los nombres que el ERP ya consume (--color-text*,
      --color-primary*, --color-bg-card, --color-border-light, --color-warning,
      --duration-normal, --ease-out) se conservan como alias var() hacia los
      tokens canónicos del YAML. No se renombra nada en consumidores.

   SOLO define variables (sin resets sobre elementos) → carga global segura.
   ========================================================= */

:root {
  color-scheme: light dark;   /* YAML color_engine.color_scheme_declaration */

  /* =======================================================
     NEUTRALES (no cambian con el tema)
     ======================================================= */

  /* ---------- TIPOGRAFÍA ---------- */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace;

  /* Escala tipográfica (YAML typography.tokens) — en px por host root=10px.
     Valores objetivo del YAML calculados a su root asumido de 16px. */
  --text-display:   64px;   /* 4rem    */
  --text-h1:        44px;   /* 2.75rem */
  --text-h2:        32px;   /* 2rem    */
  --text-h3:        24px;   /* 1.5rem  */
  --text-h4:        18px;   /* 1.125rem*/
  --text-body:      14px;   /* 0.875rem*/
  --text-body-sm:   13px;   /* 0.8125rem*/
  --text-caption:   12px;   /* 0.75rem */
  --leading-display: 1.05;
  --leading-heading: 1.15;
  --leading-body:    1.5;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --tracking-eyebrow: 0.08em;

  /* ---------- SPACING (px — ver nota host_integration) ---------- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px;

  /* ---------- RADIOS (YAML radius, px @16px) ---------- */
  --radius-sm: 6px;    /* 0.375rem */
  --radius-md: 10px;   /* 0.625rem */
  --radius-lg: 14px;   /* 0.875rem */
  --radius-full: 9999px;

  /* ---------- SOMBRAS (YAML elevation.tokens, px @16px, OKLCH) ---------- */
  --shadow-sm: 0 2px 4px oklch(0.2 0.02 255 / 0.05);
  --shadow-md: 0 4px 12px oklch(0.2 0.02 255 / 0.08);
  --shadow-lg: 0 12px 32px oklch(0.2 0.02 255 / 0.12);
  /* Extras del ERP (fuera del set del YAML, mismo estilo) */
  --shadow-xs: 0 1px 2px oklch(0.2 0.02 255 / 0.04);
  --shadow-xl: 0 20px 40px oklch(0.2 0.02 255 / 0.16);

  /* ---------- CONTROLES / DENSIDAD (YAML density.standard, px @16px) ---------- */
  --control-height: 40px;          /* 2.5rem  */
  --control-padding-inline: 14px;  /* 0.875rem*/
  --control-padding-block: 10px;   /* 0.625rem*/

  /* ---------- MOVIMIENTO (YAML motion.tokens) ---------- */
  --duration-fast: 120ms;          /* micro-feedback */
  --duration-standard: 200ms;      /* cambios de estado */
  --duration-entrance: 320ms;      /* entrada de componentes (sheets, drawers, toasts) */
  --duration-exit: 220ms;          /* salida snappy */
  --duration-page: 480ms;          /* view transitions */
  --duration-pulse: 1.5s;          /* skeleton / breathing */
  --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);  /* ease-out-expo (entradas) */
  --ease-exit:     cubic-bezier(0.4, 0, 1, 1);     /* ease-in (salidas) */
  --ease-inout:    cubic-bezier(0.65, 0, 0.35, 1); /* transformaciones simétricas */
  /* Alias legacy (consumidos en el ERP) */
  --duration-normal: var(--duration-standard);
  --ease-out: var(--ease-standard);
  --transition-fast: 0.15s ease;
  --transition-normal: 0.2s ease;

  /* ---------- BREAKPOINTS (YAML layout.breakpoints, en rem) ----------
     NB: rem en @media es relativo al default del navegador (16px), NO al
     html{font-size:10px} del host. Sirven para JS / container-queries; NO se
     pueden usar dentro de `@media` vía var() (CSS no lo permite). */
  --breakpoint-xs: 30rem;  --breakpoint-sm: 40rem;  --breakpoint-md: 48rem;
  --breakpoint-lg: 64rem;  --breakpoint-xl: 80rem;  --breakpoint-xxl: 96rem;

  /* ---------- Z-INDEX (YAML stacking_context.z_index_scale) ---------- */
  --z-hide: -1; --z-base: 0; --z-docked: 10; --z-dropdown: 100;
  --z-sticky: 200; --z-overlay: 300; --z-modal: 400;
  /* DESVIACIÓN DOCUMENTADA del YAML (toast: 500): la app legacy apila
     overlays en 1000–1050 (Bootstrap modal 1050, backdrop 1040, drawer de
     gastos 1050, panel-totales 1000). Un toast en 500 quedaría DETRÁS de un
     modal. Por eso vive por encima de esa banda. (Sugerencia: actualizar el
     YAML para reflejar la banda legacy del ERP.) */
  --z-toast: 1100;

  /* =======================================================
     TEMA CLARO (light) — YAML tokens.light
     ======================================================= */

  /* theme_deltas (YAML color_engine.theme_deltas.light) */
  --hover-delta: -0.05;
  --active-delta: -0.09;
  --surface-hover-delta: -0.02;

  /* Superficies */
  --color-bg:        oklch(0.985 0.004 255);
  --color-bg-subtle: oklch(1 0 0);
  --color-bg-muted:  oklch(0.965 0.008 255);
  --color-surface:   oklch(1 0 0);

  /* Texto / foreground */
  --color-fg-strong: oklch(0.18 0.02 255);
  --color-fg:        oklch(0.24 0.02 255);
  --color-fg-muted:  oklch(0.45 0.02 255);
  --color-fg-subtle: oklch(0.68 0.01 255);

  /* Bordes */
  --color-border:        oklch(0.9 0.008 255);
  --color-border-subtle: oklch(0.94 0.006 255);
  --color-border-strong: oklch(0.82 0.01 255);

  /* Accent (marca) */
  --color-accent:    oklch(0.43 0.19 265);
  --color-accent-fg: oklch(1 0 0);

  /* Estatus semánticos */
  --color-success: oklch(0.58 0.15 145);
  --color-warn:    oklch(0.72 0.17 80);
  --color-danger:  oklch(0.58 0.22 27);
  --color-info:    oklch(0.62 0.14 240);

   /* warn legible como TEXTO sobre fondo claro: warn base (L=0.72) no alcanza
   AA 4.5:1 sobre --color-bg. success/danger (L≈0.58) no lo necesitan. */
  --color-warn-text: oklch(0.52 0.15 80);

  /* Interacción que difiere por tema (alpha/L distintos en dark) */
  --color-selection-bg:    oklch(from var(--color-accent) l c h / 0.15);
  --color-row-selected-bg: oklch(from var(--color-accent) l c h / 0.08);
  --color-scrim:           oklch(0.18 0.02 255 / 0.5);
  --color-field-bg-invalid-subtle: oklch(from var(--color-danger) 0.97 0.025 h);
  --color-field-ring-focus:        oklch(from var(--color-accent) l c h / 0.25);
  --color-field-ring-invalid:      oklch(from var(--color-danger) l c h / 0.25);

  /* =======================================================
     DERIVADOS (una sola vez — se recalculan solos en dark vía var())
     ======================================================= */

  /* Foco */
  --color-focus-ring: var(--color-accent);                 /* YAML interaction.focus.color */
  --focus-ring: 0 0 0 3px oklch(from var(--color-accent) l c h / 0.35); /* alias legacy (box-shadow) */

  /* Filas / tabla (YAML tokens.*.table_* + row_*) */
  --color-row-hover-bg:       oklch(from var(--color-bg) calc(l + var(--surface-hover-delta)) c h);
  --color-row-selected-border: var(--color-accent);
  --color-table-header-bg:    var(--color-bg-muted);
  --color-table-header-fg:    var(--color-fg-muted);
  --color-table-zebra-bg:     var(--color-bg-subtle);
  --color-table-cell-border:  var(--color-border-subtle);

  /* Campos (forms) — YAML tokens.*.field_* */
  --color-field-bg-disabled: var(--color-bg-muted);
  --color-field-bg-readonly: var(--color-bg-subtle);

  /* Skeleton */
  --color-skeleton-bg: var(--color-bg-muted);

  /* Variantes hover/subtle/border de estatus (derivadas vía theme_deltas +
     color-mix → theme-aware). Reemplazan los hex fijos anteriores.
     NB: los tintes (subtle/border) se mezclan en `oklab`, NO en `oklch`. En un
     espacio POLAR (oklch), mezclar un color cromático con --color-surface
     (= oklch(1 0 0), hue 0 explícito) interpola el hue hacia 0 y el verde/azul
     vira a rosa. `oklab` es el hermano rectangular (misma familia OKL*) y no
     tiene ese artefacto. Los hover usan oklch relativo (solo cambia L). */
  --color-accent-hover:  oklch(from var(--color-accent) calc(l + var(--hover-delta)) c h);
  --color-accent-subtle: color-mix(in oklab, var(--color-accent) 8%, var(--color-surface));
  --color-success-hover: oklch(from var(--color-success) calc(l + var(--hover-delta)) c h);
  --color-success-subtle: color-mix(in oklab, var(--color-success) 8%, var(--color-surface));
  --color-success-border: color-mix(in oklab, var(--color-success) 28%, var(--color-surface));
  --color-danger-hover:  oklch(from var(--color-danger) calc(l + var(--hover-delta)) c h);
  --color-danger-subtle: color-mix(in oklab, var(--color-danger) 8%, var(--color-surface));
  --color-danger-border: color-mix(in oklab, var(--color-danger) 28%, var(--color-surface));
  --color-warn-hover:    oklch(from var(--color-warn) calc(l + var(--hover-delta)) c h);
  --color-warn-hover:    oklch(from var(--color-warn) calc(l + var(--hover-delta)) c h);
  --color-warn-subtle:   color-mix(in oklab, var(--color-warn) 8%, var(--color-surface));
  --color-warn-border:   color-mix(in oklab, var(--color-warn) 28%, var(--color-surface));
  --color-info-hover:    oklch(from var(--color-info) calc(l + var(--hover-delta)) c h);

  /* =======================================================
     ALIAS LEGACY (nomenclatura que el ERP ya consume)
     Mapean a los tokens canónicos del YAML → no romper consumidores.
     ======================================================= */
  --color-primary:        var(--color-accent);
  --color-primary-hover:  var(--color-accent-hover);
  --color-primary-subtle: var(--color-accent-subtle);
  --color-text:        var(--color-fg);
  --color-text-muted:  var(--color-fg-muted);
  --color-text-light:  var(--color-fg-subtle);
  --color-bg-card:     var(--color-surface);
  --color-border-light: var(--color-border-subtle);
  --color-warning:      var(--color-warn);
  --color-warning-hover: var(--color-warn-hover);
}

/* =========================================================
   TEMA OSCURO (dark) — YAML tokens.dark
   Mecanismo híbrido (YAML theme.mechanism): prefers-color-scheme da el primer
   paint sin JS; [data-mode] permite override manual. Solo se redefinen los
   tokens BASE + deltas; los derivados/alias se recalculan solos vía var().
   MANTENER LOS DOS BLOQUES SIGUIENTES EN SINCRONÍA.
   ========================================================= */

@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]) {
    --hover-delta: 0.08;
    --active-delta: 0.12;
    --surface-hover-delta: 0.04;

    --color-bg:        oklch(0.16 0.015 255);
    --color-bg-subtle: oklch(0.2 0.015 255);
    --color-bg-muted:  oklch(0.24 0.015 255);
    --color-surface:   oklch(0.22 0.015 255);

    --color-fg-strong: oklch(0.96 0.01 255);
    --color-fg:        oklch(0.91 0.01 255);
    --color-fg-muted:  oklch(0.72 0.015 255);
    --color-fg-subtle: oklch(0.55 0.015 255);

    --color-border:        oklch(0.3 0.015 255);
    --color-border-subtle: oklch(0.26 0.015 255);
    --color-border-strong: oklch(0.4 0.015 255);

    --color-accent:    oklch(0.62 0.17 265);
    --color-accent-fg: oklch(0.98 0.005 255);

    --color-success: oklch(0.72 0.14 145);
    --color-warn:    oklch(0.8 0.14 80);
    --color-danger:  oklch(0.7 0.19 27);
    --color-info:    oklch(0.76 0.12 240);

    --color-warn-text: var(--color-warn); 

    --color-selection-bg:    oklch(from var(--color-accent) l c h / 0.2);
    --color-row-selected-bg: oklch(from var(--color-accent) l c h / 0.15);
    --color-scrim:           oklch(0.08 0.015 255 / 0.6);
    --color-field-bg-invalid-subtle: oklch(from var(--color-danger) 0.22 0.05 h);
    --color-field-ring-focus:        oklch(from var(--color-accent) l c h / 0.35);
    --color-field-ring-invalid:      oklch(from var(--color-danger) l c h / 0.4);
  }
}

:root[data-mode="dark"] {
  --hover-delta: 0.08;
  --active-delta: 0.12;
  --surface-hover-delta: 0.04;

  --color-bg:        oklch(0.16 0.015 255);
  --color-bg-subtle: oklch(0.2 0.015 255);
  --color-bg-muted:  oklch(0.24 0.015 255);
  --color-surface:   oklch(0.22 0.015 255);

  --color-fg-strong: oklch(0.96 0.01 255);
  --color-fg:        oklch(0.91 0.01 255);
  --color-fg-muted:  oklch(0.72 0.015 255);
  --color-fg-subtle: oklch(0.55 0.015 255);

  --color-border:        oklch(0.3 0.015 255);
  --color-border-subtle: oklch(0.26 0.015 255);
  --color-border-strong: oklch(0.4 0.015 255);

  --color-accent:    oklch(0.62 0.17 265);
  --color-accent-fg: oklch(0.98 0.005 255);

  --color-success: oklch(0.72 0.14 145);
  --color-warn:    oklch(0.8 0.14 80);
  --color-danger:  oklch(0.7 0.19 27);
  --color-info:    oklch(0.76 0.12 240);

  --color-warn-text: var(--color-warn); 

  --color-selection-bg:    oklch(from var(--color-accent) l c h / 0.2);
  --color-row-selected-bg: oklch(from var(--color-accent) l c h / 0.15);
  --color-scrim:           oklch(0.08 0.015 255 / 0.6);
  --color-field-bg-invalid-subtle: oklch(from var(--color-danger) 0.22 0.05 h);
  --color-field-ring-focus:        oklch(from var(--color-accent) l c h / 0.35);
  --color-field-ring-invalid:      oklch(from var(--color-danger) l c h / 0.4);
}

/* color-scheme manual (YAML color_engine.color_scheme_declaration) */
:root[data-mode="light"] { color-scheme: light; }
:root[data-mode="dark"]  { color-scheme: dark; }

/* =========================================================
   DENSIDAD (YAML density) — compact solo en pointer:fine.
   ========================================================= */
:root[data-density="compact"] {
  --control-height: 32px;          /* 2rem    */
  --control-padding-inline: 10px;  /* 0.625rem*/
  --control-padding-block: 6px;    /* 0.375rem*/
}

/* accessibility.density_override: en touch, el mínimo táctil gana a compact */
@media (pointer: coarse) {
  :root[data-density="compact"] {
    --control-height: 40px;        /* 2.5rem mínimo táctil */
  }
}

/* =========================================================
   REDUCED MOTION (YAML motion.reduced_motion) — colapso de duraciones.
   El loop del skeleton lo detiene el componente (este archivo solo tokens).
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-standard: 0ms;
    --duration-entrance: 0ms;
    --duration-exit: 0ms;
    --duration-page: 0ms;
    --duration-normal: 0ms;
  }
}