@layer tn.tokens {
/* ==========================================================================
   TANATOS · tokens.css
   Única fuente de verdad de color, tipografía, espaciado, radios, sombras,
   layout, movimiento y capas. Ningún otro archivo define valores "sueltos":
   todo consume estas variables.
   Prefijo --tn- para no colisionar con variables del CSS heredado.
   ========================================================================== */

/* ---------- Fuentes (self-hosted, OFL) ---------- */
@font-face { font-family: "Geist"; src: url("../fonts/geist-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url("../fonts/geist-sans-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url("../fonts/geist-sans-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url("../fonts/geist-sans-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("../fonts/geist-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("../fonts/geist-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("../fonts/geist-mono-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  /* ---------- Color · primitivos ---------- */
  --tn-ink-950: #06120F;
  --tn-ink-900: #0A1F1D;   /* Tinta: sidebar, primario, certificado */
  --tn-ink-800: #112C29;
  --tn-ink-700: #1A3D39;
  --tn-ink-600: #27524D;
  --tn-ink-300: #93ABA6;
  --tn-ink-200: #C5D6D2;
  --tn-ink-100: #E9F1EE;

  --tn-signal-500: #B5E04F;
  --tn-signal-400: #C8F169; /* Señal: dónde actuar */
  --tn-signal-100: #EEF8D9;

  --tn-teal-700: #0B574D;
  --tn-teal-600: #0E6A5D;   /* Marca: enlaces, foco, interruptores */
  --tn-teal-100: #E3F1ED;

  --tn-gray-0: #FFFFFF;
  --tn-gray-25: #F8F9F7;
  --tn-gray-50: #F2F4F1;    /* Suelo */
  --tn-gray-100: #EBEEEA;
  --tn-gray-200: #E1E5E0;   /* Línea */
  --tn-gray-300: #CFD5CE;
  --tn-gray-500: #626D69;
  --tn-gray-700: #45514D;
  --tn-gray-900: #0E1614;

  /* ---------- Color · semántico ---------- */
  --tn-bg: var(--tn-gray-50);
  --tn-surface: var(--tn-gray-0);
  --tn-surface-2: var(--tn-gray-25);
  --tn-sunken: var(--tn-gray-100);
  --tn-line: var(--tn-gray-200);
  --tn-line-strong: var(--tn-gray-300);
  /* Borde de campos y casillas: 3,1:1 sobre blanco (WCAG 1.4.11; auditoría del dueño, 2026-10-28). */
  --tn-field-line: #8A948F;
  --tn-field-line-hover: #6B7672;
  --tn-text: var(--tn-gray-900);
  --tn-text-2: var(--tn-gray-700);
  --tn-text-3: var(--tn-gray-500);      /* 4,6:1 sobre suelo · mínimo para texto */
  --tn-ink: var(--tn-ink-900);
  --tn-brand: var(--tn-teal-600);
  --tn-brand-hover: var(--tn-teal-700);
  --tn-brand-soft: var(--tn-teal-100);
  --tn-signal: var(--tn-signal-400);
  --tn-signal-ink: var(--tn-ink-900);   /* texto sobre señal */
  --tn-signal-soft: var(--tn-signal-100);
  --tn-on-ink: var(--tn-ink-100);       /* texto sobre tinta */
  --tn-on-ink-2: var(--tn-ink-200);
  --tn-on-ink-3: var(--tn-ink-300);

  /* ---------- Estados (fondo / texto) ---------- */
  --tn-neutral-bg: #ECEFEB;  --tn-neutral-fg: #3B4643;
  --tn-review-bg: #E7EEFD;   --tn-review-fg: #1F43A1;   /* en validación / espera de otro actor */
  --tn-action-bg: #FFF0D4;   --tn-action-fg: #834508;   /* requiere acción */
  --tn-pending-ink: var(--tn-text-3);                     /* contador neutro, igual que los demás indicadores */
  --tn-observed-bg: #FFE8DB; --tn-observed-fg: #A0340E; /* observado, corregible */
  --tn-critical-bg: #FCE6E5; --tn-critical-fg: #9E1B25; /* crítico / fallo */
  --tn-approved-bg: #E1F2E6; --tn-approved-fg: #1A6235; /* aprobado, firmado, confirmado */
  --tn-readonly-bg: #ECEDF7; --tn-readonly-fg: #444779; /* sólo lectura */
  --tn-closed-bg: #F2EDE1;   --tn-closed-fg: #67521E;   /* desistido / baja */
  --tn-observed-line: #EDB596;
  --tn-critical-line: #EBC5C3;

  /* Marcas de datos (barras, medidores) */
  --tn-data-1: var(--tn-teal-600);
  --tn-data-review: #7C9CE8;
  --tn-data-observed: #E07A45;
  --tn-prio-critical: #9E1B25;
  --tn-prio-high: #D9822B;
  --tn-prio-normal: #7C9CE8;
  --tn-prio-low: #CFD5CE;

  /* ---------- Tipografía ---------- */
  --tn-font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --tn-font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --tn-fs-display: 3rem;      /* 48 · auth / certificado */
  --tn-fs-h1: 1.875rem;       /* 30 · título de página */
  --tn-fs-h2: 1.25rem;        /* 20 · sección */
  --tn-fs-h3: 0.96875rem;     /* 15,5 · subtítulo / card */
  --tn-fs-lede: 0.9375rem;    /* 15 · introducción */
  --tn-fs-body: 0.875rem;     /* 14 · cuerpo */
  --tn-fs-sm: 0.8125rem;      /* 13 · secundario */
  --tn-fs-xs: 0.75rem;        /* 12 · meta */
  --tn-fw-regular: 400;
  --tn-fw-medium: 500;
  --tn-fw-semibold: 600;
  --tn-lh-tight: 1.12;
  --tn-lh-snug: 1.3;
  --tn-lh-body: 1.5;
  --tn-track-tight: -0.025em;
  --tn-track-snug: -0.015em;

  /* ---------- Espaciado (base 4) ---------- */
  --tn-sp-1: 4px;  --tn-sp-2: 8px;  --tn-sp-3: 12px; --tn-sp-4: 16px;
  --tn-sp-5: 20px; --tn-sp-6: 24px; --tn-sp-7: 28px; --tn-sp-8: 32px;
  --tn-sp-10: 40px; --tn-sp-12: 48px; --tn-sp-14: 56px; --tn-sp-18: 72px;

  /* ---------- Radios ---------- */
  --tn-r-xs: 6px;   /* chips, tags */
  --tn-r-sm: 8px;   /* botones chicos, items de nav */
  --tn-r-md: 10px;  /* inputs, botones */
  --tn-r-lg: 14px;  /* paneles */
  --tn-r-xl: 20px;  /* próxima acción, auth */
  --tn-r-full: 999px;

  /* ---------- Sombras ---------- */
  --tn-sh-1: 0 1px 2px rgba(10, 31, 29, .05);
  --tn-sh-2: 0 1px 2px rgba(10, 31, 29, .05), 0 8px 24px -8px rgba(10, 31, 29, .14);
  --tn-sh-3: 0 24px 60px -20px rgba(10, 31, 29, .38);
  --tn-ring: 0 0 0 3px rgba(14, 106, 93, .18);

  /* ---------- Layout ---------- */
  --tn-sidebar-w: 264px;
  --tn-sidebar-w-collapsed: 76px;
  --tn-topbar-h: 60px;
  --tn-content-max: 1180px;
  --tn-content-max-wide: 1360px;
  --tn-gutter: 40px;
  --tn-control-h: 44px;
  --tn-control-h-sm: 32px;
  --tn-control-h-md: 40px;
  --tn-control-h-lg: 48px;

  /* ---------- Movimiento ---------- */
  --tn-ease: cubic-bezier(.2, .7, .2, 1);
  --tn-ease-out-expo: cubic-bezier(.16, 1, .3, 1);
  --tn-dur-1: 120ms;
  --tn-dur-2: 200ms;
  --tn-dur-3: 320ms;
  --tn-dur-4: 600ms;

  /* ---------- Capas ---------- */
  --tn-z-sticky: 10;
  --tn-z-topbar: 20;
  --tn-z-drawer: 50;
  --tn-z-dialog: 60;
  --tn-z-toast: 70;
  --tn-z-intro: 90;

  /* ---------- Sidebar (tema "Tinta", por defecto) ---------- */
  --tn-side-bg: var(--tn-ink-900);
  --tn-side-fg: #ECF3F0;
  --tn-side-muted: var(--tn-ink-300);
  --tn-side-dim: #738D88;   /* 4,8:1 sobre el menú (auditoría 2026-10-28; antes 4,49:1) */
  --tn-side-hover: rgba(255, 255, 255, .06);
  --tn-side-active: rgba(255, 255, 255, .10);
  --tn-side-line: rgba(255, 255, 255, .09);
  --tn-side-card: rgba(255, 255, 255, .05);
  --tn-side-accent: var(--tn-signal);
  --tn-side-review: #5CC8FF;   /* celeste del video: «en revisión» en el menú (dueño, 2026-10-29) */
  --tn-side-attention: #F2B84B; /* punto del paso con algo para corregir: ámbar de alerta (dueño, 2026-11-10) */
}

/* Variante opcional: sidebar clara (agregar .theme-side-light al <body>) */
.theme-side-light {
  --tn-side-bg: #FFFFFF;
  --tn-side-fg: #0E1614;
  --tn-side-muted: #56625E;
  --tn-side-dim: #7A8581;
  --tn-side-hover: #F2F4F1;
  --tn-side-active: #E8EFEA;
  --tn-side-line: #E1E5E0;
  --tn-side-card: #F5F7F4;
  --tn-side-accent: var(--tn-brand);
  --tn-side-review: var(--tn-review-fg);
  --tn-side-attention: #D99A1E; /* el mismo ámbar, más firme sobre el menú claro */
}

/* Densidad por rol: Sur Compliance trabaja con más información por pantalla */
.role-compliance {
  --tn-row-py: 11px;
  --tn-content-max: var(--tn-content-max-wide);
}
.role-provider, .role-notary, .role-viewer {
  --tn-row-py: 14px;
}

}