/**
 * Tokens — Profit Condor
 * Capa legacy (compat UI actual) + capa V3 (--pc-*) según A_UX/V3/00.
 * Con PC_V3_UI, preferir --pc-*; legacy sigue mapeado para no romper pantallas.
 */

html {
  color-scheme: light;
}

:root {
  /* ——— V3 design tokens (A_UX/V3/00 §4) ——— */
  --pc-bg: #f3f1ec;
  --pc-bg-elevated: #fffcf8;
  --pc-bg-muted: #e8e4dc;
  --pc-ink: #1c1a16;
  --pc-ink-muted: #5c574e;
  --pc-ink-inverse: #f7f4ee;
  --pc-brand: #1f4b3a;
  --pc-brand-hover: #183b2e;
  --pc-accent: #c45c26;
  --pc-accent-hover: #a34b1f;
  --pc-line: #d4cfc4;
  --pc-focus: #2f6fdb;
  --pc-success: #2f6b3a;
  --pc-warning: #a67c00;
  --pc-danger: #9b2c2c;
  --pc-info: #1e4d7b;

  --pc-health-ok: #2f6b3a;
  --pc-health-watch: #a67c00;
  --pc-health-crit: #9b2c2c;

  --pc-font-display: "Source Serif 4", "Libertinus Serif", Georgia, serif;
  --pc-font-body: "IBM Plex Sans", "Source Sans 3", system-ui, sans-serif;
  --pc-font-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* Design Language — type roles (Decision / UI / Data / Meta) */
  --pc-type-decision: var(--pc-font-display);
  --pc-type-ui: var(--pc-font-body);
  --pc-type-data: var(--pc-font-mono);
  --pc-type-meta: var(--pc-font-body);

  /* Elevation: borde > sombra (0 | hairline | rule) */
  --pc-elev-0: none;
  --pc-elev-hairline: 1px solid var(--pc-line);
  --pc-elev-rule: 2px solid var(--pc-brand);
  --pc-shadow-none: none;

  --pc-space-1: 4px;
  --pc-space-2: 8px;
  --pc-space-3: 12px;
  --pc-space-4: 16px;
  --pc-space-5: 24px;
  --pc-space-6: 32px;
  --pc-space-7: 48px;

  /* Consola-first radii (UX-C → sharp) */
  --pc-radius-sm: 3px;
  --pc-radius-md: 6px;
  --pc-radius: 6px;
  --pc-radius-lg: 8px;

  /* Tipografía legacy (UI actual) */
  --font-glass: "Tajawal", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Espaciado — grilla 4px */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Legacy accent (se mantiene mientras PC_V3_UI=false en pantallas no migradas) */
  --accent: #6d5dfc;
  --accent-soft: #8b7cf7;
  --accent-teal: #2dd4bf;
  --accent-teal-deep: #0d9488;
  --accent-glow: rgba(109, 93, 252, 0.14);
  --accent-muted: rgba(109, 93, 252, 0.08);
  --grad-brand: linear-gradient(135deg, #6d5dfc 0%, #8b7cf7 48%, #2dd4bf 100%);
  --grad-brand-soft: linear-gradient(90deg, rgba(109, 93, 252, 0.18) 0%, rgba(45, 212, 191, 0.1) 100%);
  --grad-track: linear-gradient(90deg, #2dd4bf 0%, #6d5dfc 100%);
  --bg-color: #f7f6fb;
  --bg-subtle: #efedf6;
  --text-main: #2a2540;
  --text-muted: #6b7280;
  --panel-bg: #ffffff;
  --panel-bg-solid: #ffffff;
  --panel-border: rgba(109, 93, 252, 0.14);
  --panel-hover: rgba(109, 93, 252, 0.06);

  --nav-hover-bg: rgba(109, 93, 252, 0.06);
  --nav-active-bg: var(--grad-brand-soft);
  --nav-active-border: #6d5dfc;
  --nav-label-color: #6b7280;

  --pc-form-field-bg: #ffffff;
  --pc-form-field-border: rgba(109, 93, 252, 0.18);
  --pc-form-field-text: var(--text-main);
  --pc-form-focus-border: #6d5dfc;
  --pc-form-focus-ring: rgba(109, 93, 252, 0.2);
  --pc-form-label: #6b7280;
  --pc-form-primary: #6d5dfc;
  --pc-form-primary-hover: #5b4de0;
  --pc-form-ghost-bg: rgba(109, 93, 252, 0.06);
  --pc-form-ghost-hover-bg: rgba(109, 93, 252, 0.1);
  --pc-form-ghost-text: #4b5563;
  --pc-form-ghost-border: rgba(109, 93, 252, 0.16);
  --pc-form-actions-border: var(--panel-border);
  --pc-form-card-inner-bg: var(--pc-bg-muted);
  --pc-form-shadow-card: none;

  --verde: #15803d;
  --verde-bg: rgba(34, 197, 94, 0.12);
  --amarillo: #a16207;
  --amarillo-bg: rgba(234, 179, 8, 0.14);
  --rojo: #b91c1c;
  --rojo-bg: rgba(239, 68, 68, 0.1);
  --sin-dato: #9ca3af;
  --sin-dato-bg: rgba(156, 163, 175, 0.1);

  --gap: 20px;
  --sidebar-w: 260px;
  --content-max: 1400px;
  --radius-sm: 8px;
  --radius-lg: 22px;
  --radius-md: 14px;
  --radius-nav-item: 10px;
  --pc-form-radius-field: 12px;
  --pc-form-radius-card: 16px;
  --pc-dash-radius: 12px;
  --glass-blur: 0;
  --shadow-panel: 0 4px 18px rgba(42, 37, 64, 0.06), 0 1px 3px rgba(109, 93, 252, 0.04);
  --shadow-panel-lg: 0 10px 32px rgba(42, 37, 64, 0.08), 0 2px 8px rgba(109, 93, 252, 0.05);
  --shadow-modal: 0 16px 48px rgba(42, 37, 64, 0.12);
}

/* Cuando V3 UI está activa en el documento, re-mapear legacy → tokens V3 */
html[data-pc-v3="1"] {
  --bg-color: var(--pc-bg);
  --bg-subtle: var(--pc-bg-muted);
  --text-main: var(--pc-ink);
  --text-muted: var(--pc-ink-muted);
  --panel-bg: var(--pc-bg-elevated);
  --panel-bg-solid: var(--pc-bg-elevated);
  --panel-border: var(--pc-line);
  --accent: var(--pc-brand);
  --accent-soft: color-mix(in srgb, var(--pc-brand) 70%, white);
  --accent-glow: color-mix(in srgb, var(--pc-brand) 18%, transparent);
  --accent-muted: color-mix(in srgb, var(--pc-brand) 10%, transparent);
  --nav-hover-bg: color-mix(in srgb, var(--pc-brand) 6%, transparent);
  --nav-active-bg: color-mix(in srgb, var(--pc-brand) 10%, transparent);
  --nav-active-border: var(--pc-brand);
  --nav-label-color: var(--pc-ink-muted);
  --pc-form-field-border: var(--pc-line);
  --pc-form-focus-border: var(--pc-focus);
  --pc-form-focus-ring: rgba(47, 111, 219, 0.22);
  --pc-form-primary: var(--pc-brand);
  --pc-form-primary-hover: var(--pc-brand-hover);
  --pc-form-ghost-bg: color-mix(in srgb, var(--pc-brand) 6%, transparent);
  --pc-form-ghost-hover-bg: color-mix(in srgb, var(--pc-brand) 10%, transparent);
  --pc-form-ghost-text: var(--pc-ink-muted);
  --pc-form-ghost-border: var(--pc-line);
  --font-glass: var(--pc-font-body);
  --shadow-panel: none;
  --shadow-panel-lg: none;
  --grad-brand: linear-gradient(135deg, var(--pc-brand) 0%, var(--pc-brand-hover) 100%);
  --grad-brand-soft: linear-gradient(90deg, color-mix(in srgb, var(--pc-brand) 14%, transparent) 0%, transparent 100%);
  --grad-track: linear-gradient(90deg, var(--pc-brand) 0%, var(--pc-accent) 100%);
  --panel-hover: color-mix(in srgb, var(--pc-brand) 6%, transparent);
  --pc-form-card-inner-bg: var(--pc-bg-muted);
  --pc-form-field-bg: var(--pc-bg-elevated);
  --pc-form-field-text: var(--pc-ink);
  --pc-form-label: var(--pc-ink-muted);
  --shadow-panel: var(--pc-shadow-none);
  --shadow-panel-lg: var(--pc-shadow-none);
  --shadow-modal: 0 12px 40px color-mix(in srgb, var(--pc-ink) 12%, transparent);
  --radius-sm: var(--pc-radius-sm);
  --radius-md: var(--pc-radius-md);
  --radius-lg: var(--pc-radius-lg);
  --pc-form-radius-field: var(--pc-radius-md);
  --pc-form-radius-card: var(--pc-radius-lg);
  --pc-dash-radius: var(--pc-radius-md);
}

/* Type role utilities — Design Language */
.pc-type-decision {
  font-family: var(--pc-type-decision);
  letter-spacing: -0.02em;
}
.pc-type-ui {
  font-family: var(--pc-type-ui);
}
.pc-type-data {
  font-family: var(--pc-type-data);
  font-variant-numeric: tabular-nums;
}
.pc-type-meta {
  font-family: var(--pc-type-meta);
  font-size: 0.82rem;
  color: var(--pc-ink-muted);
}

html[data-pc-v3="1"] body.pc-app {
  font-family: var(--pc-font-body);
  background-color: var(--pc-bg);
  background-image: none;
}

html[data-theme="light"] {
  color-scheme: light;
}