/* =========================================================================
   tokens.css — Design tokens de [Nombre del producto]
   Colores, tipografía, espaciados, radios, sombras y modo oscuro.
   Todo el CSS de componentes (app.css) consume SOLO estas variables.
   ========================================================================= */

:root {
  /* ---- Tipografía ---------------------------------------------------- */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-xs: 0.75rem;    /* 12px — labels, metadatos */
  --fs-sm: 0.8125rem;  /* 13px — tablas densas */
  --fs-base: 0.875rem; /* 14px — texto de interfaz */
  --fs-md: 1rem;       /* 16px */
  --fs-lg: 1.25rem;    /* 20px — títulos de página */
  --fs-xl: 1.625rem;   /* 26px — cifras KPI */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --lh-tight: 1.25;
  --lh-base: 1.5;

  /* ---- Espaciado (base 4px) ------------------------------------------ */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;

  /* ---- Radios --------------------------------------------------------- */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  /* ---- Layout --------------------------------------------------------- */
  --sidebar-w: 232px;
  --topbar-h: 56px;
  --content-max: 1440px;

  /* ---- Color: marca --------------------------------------------------- */
  --c-primary: #1f4e6e;
  --c-primary-hover: #183f5a;
  --c-primary-active: #133247;
  --c-primary-soft: #e8f0f5;
  --c-primary-contrast: #ffffff;
  --c-focus-ring: rgba(31, 78, 110, 0.28);

  /* ---- Color: neutros cálidos ---------------------------------------- */
  --c-bg: #f6f4f0;          /* fondo de la app */
  --c-surface: #ffffff;     /* tarjetas, tablas */
  --c-surface-2: #faf8f5;   /* cabeceras de tabla, zonas secundarias */
  --c-surface-3: #f0ede7;   /* hover, skeleton */
  --c-border: #e5e0d8;
  --c-border-strong: #d3ccc1;
  --c-text: #1e1c19;
  --c-text-2: #5b554e;
  --c-text-3: #8a837a;
  --c-sidebar-bg: #1d2a33;
  --c-sidebar-text: #c9d2d8;
  --c-sidebar-text-strong: #ffffff;
  --c-sidebar-hover: rgba(255, 255, 255, 0.06);
  --c-sidebar-active: rgba(255, 255, 255, 0.11);

  /* ---- Color: semánticos (texto / fondo / borde) --------------------- */
  --c-success: #1c6e46;      --c-success-bg: #e5f3ea;  --c-success-bd: #b9ddc7;
  --c-warning: #94560a;      --c-warning-bg: #fdf0da;  --c-warning-bd: #f1d19b;
  --c-danger:  #b0281d;      --c-danger-bg:  #fceae8;  --c-danger-bd:  #f1bfb9;
  --c-info:    #1d5c9e;      --c-info-bg:    #e7f0fa;  --c-info-bd:    #bcd4ee;
  --c-violet:  #5b3fb0;      --c-violet-bg:  #efebfa;  --c-violet-bd:  #d2c8f0;
  --c-neutral: #5b554e;      --c-neutral-bg: #eeebe6;  --c-neutral-bd: #d9d3ca;
  --c-teal:    #0f6b6b;      --c-teal-bg:    #e2f3f2;  --c-teal-bd:    #b3dedb;

  /* IA: campos detectados / a revisar */
  --c-ai: var(--c-violet);
  --c-ai-bg: var(--c-violet-bg);
  --c-review: #b86e00;
  --c-review-bg: #fff4dc;
  --c-review-bd: #f0c36b;

  /* ---- Sombras -------------------------------------------------------- */
  --shadow-xs: 0 1px 1px rgba(30, 28, 25, 0.04);
  --shadow-sm: 0 1px 2px rgba(30, 28, 25, 0.06), 0 1px 1px rgba(30, 28, 25, 0.04);
  --shadow-md: 0 4px 12px rgba(30, 28, 25, 0.08), 0 1px 3px rgba(30, 28, 25, 0.06);
  --shadow-lg: 0 12px 32px rgba(30, 28, 25, 0.14);

  /* ---- Transiciones --------------------------------------------------- */
  --t-fast: 120ms ease;
  --t-base: 200ms ease;

  /* ---- Puente con Bootstrap 5.3 -------------------------------------- */
  --bs-body-font-family: var(--font-sans);
  --bs-body-font-size: var(--fs-base);
  --bs-body-bg: var(--c-bg);
  --bs-body-color: var(--c-text);
  --bs-secondary-color: var(--c-text-2);
  --bs-tertiary-color: var(--c-text-3);
  --bs-border-color: var(--c-border);
  --bs-border-radius: var(--radius-md);
  --bs-border-radius-sm: var(--radius-sm);
  --bs-border-radius-lg: var(--radius-lg);
  --bs-primary: var(--c-primary);
  --bs-primary-rgb: 31, 78, 110;
  --bs-link-color: var(--c-primary);
  --bs-link-color-rgb: 31, 78, 110;
  --bs-link-hover-color: var(--c-primary-hover);
  --bs-link-hover-color-rgb: 24, 63, 90;
  --bs-focus-ring-color: var(--c-focus-ring);
  --bs-tertiary-bg: var(--c-surface-2);
  --bs-secondary-bg: var(--c-surface-3);
  --bs-emphasis-color: var(--c-text);
  color-scheme: light;
}

/* =========================================================================
   Modo oscuro — se activa con <html data-bs-theme="dark"> (toggle en topbar)
   ========================================================================= */
[data-bs-theme="dark"] {
  --c-primary: #6ea8d4;
  --c-primary-hover: #86b8de;
  --c-primary-active: #9cc6e6;
  --c-primary-soft: #1b2c38;
  --c-primary-contrast: #0f1a22;
  --c-focus-ring: rgba(110, 168, 212, 0.35);

  --c-bg: #141312;
  --c-surface: #1c1b19;
  --c-surface-2: #22201e;
  --c-surface-3: #2b2926;
  --c-border: #33302c;
  --c-border-strong: #45413b;
  --c-text: #ece8e2;
  --c-text-2: #b0a99f;
  --c-text-3: #847d74;
  --c-sidebar-bg: #111618;
  --c-sidebar-text: #aab4ba;

  --c-success: #6cc896;  --c-success-bg: #16291f;  --c-success-bd: #2a4a37;
  --c-warning: #e8b060;  --c-warning-bg: #2c2112;  --c-warning-bd: #4d3a1d;
  --c-danger:  #f08a80;  --c-danger-bg:  #2e1614;  --c-danger-bd:  #522723;
  --c-info:    #7fb2ea;  --c-info-bg:    #14222f;  --c-info-bd:    #25405a;
  --c-violet:  #b5a2f0;  --c-violet-bg:  #221c33;  --c-violet-bd:  #3d3260;
  --c-neutral: #b0a99f;  --c-neutral-bg: #26241f;  --c-neutral-bd: #3a3731;
  --c-teal:    #6fcfcb;  --c-teal-bg:    #132827;  --c-teal-bd:    #24484a;
  --c-review: #f0b75c;   --c-review-bg: #2d2311;   --c-review-bd: #5a4520;

  --shadow-xs: none;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);

  --bs-primary-rgb: 110, 168, 212;
  --bs-link-color-rgb: 110, 168, 212;
  --bs-link-hover-color-rgb: 134, 184, 222;
  color-scheme: dark;
}