/* ============================================================
   TOKENS DE IDENTIDAD - Contadata
   ------------------------------------------------------------
   Copiado de:
   Contadata/propuestas-identidad/Claude_Designer/tokens/
   (Manual de identidad visual v1.0 - Julio 2026)

   NO editar aqui. Si cambia la identidad, se actualiza en el
   origen y se vuelve a copiar. Este archivo solo define
   variables: ningun estilo de componente vive aca.
   ============================================================ */

/* ---------- colors.css ---------- */
/* Sistema cromático · Manual de identidad visual v1.0 (Julio 2026)
   Proporción recomendada: 55% blanco · 20% papel · 15% verde · 8% mostaza · 2% tinta */
:root{
/* --- Colores de marca (valores exactos del manual) --- */
--verde-archivo:#315B4A;
--mostaza:#D6B64D;
--papel:#F2EFE6;
--blanco:#FFFFFF;
--tinta:#1B201C;
--rojo-omision:#A64C3C;

/* --- Escala verde archivo --- */
--verde-900:#16281F;
--verde-800:#1E3A2E;
--verde-700:#27493B;
--verde-600:#315B4A;
--verde-500:#3F7059;
--verde-400:#5C8C76;
--verde-300:#8FB3A2;
--verde-200:#C2D6CB;
--verde-100:#DEE9E3;
--verde-50:#EEF4F1;

/* --- Escala mostaza --- */
--mostaza-800:#7A6220;
--mostaza-700:#A2842F;
--mostaza-600:#C2A23F;
--mostaza-500:#D6B64D;
--mostaza-400:#E0C776;
--mostaza-300:#EAD9A0;
--mostaza-200:#F2E8C8;
--mostaza-100:#F8F2DF;
--mostaza-50:#FCF9EF;

/* --- Escala tinta / neutros cálidos --- */
--tinta-900:#1B201C;
--tinta-700:#3A423C;
--tinta-600:#525A53;
--tinta-500:#6B736C;
--tinta-400:#8A918B;
--tinta-300:#B3B8B3;
--tinta-200:#D6D3C8;
--tinta-100:#E8E4D8;
--tinta-50:#F5F3EC;

/* --- Superficies --- */
--surface-page:#FFFFFF;
--surface-alt:#F2EFE6;
--surface-card:#FFFFFF;
--surface-sunken:#F5F3EC;
--surface-inverse:#315B4A;
--surface-ink:#1B201C;
--surface-proceso:#EEF4F1;
--surface-destacada:#D6B64D;
--surface-destacada-suave:#F8F2DF;

/* --- Texto --- */
--text-body:#1B201C;
--text-muted:#525A53;
--text-subtle:#6B736C;
--text-heading:#1B201C;
--text-heading-brand:#315B4A;
--text-link:#315B4A;
--text-link-hover:#1E3A2E;
--text-on-verde:#FFFFFF;
--text-on-mostaza:#1B201C;
--text-inverse-muted:rgba(255,255,255,.72);

/* --- Bordes --- */
--border-subtle:#E8E4D8;
--border:#DCD7C7;
--border-strong:#C3BCA6;
--border-verde:#315B4A;
--border-inverse:rgba(255,255,255,.18);
--border-focus:#315B4A;

/* --- Acción --- */
--action-primary:#315B4A;
--action-primary-hover:#27493B;
--action-primary-active:#1E3A2E;
--action-secondary:#D6B64D;
--action-secondary-hover:#C2A23F;
--action-secondary-active:#A2842F;
--action-disabled:#D6D3C8;

/* --- Estados de dato (verde: conciliado · mostaza: revisar · rojo: omisión) --- */
--estado-conciliado:#315B4A;
--estado-conciliado-fondo:#EEF4F1;
--estado-conciliado-borde:#C2D6CB;
--estado-revisar:#A2842F;
--estado-revisar-fondo:#F8F2DF;
--estado-revisar-borde:#EAD9A0;
--estado-omision:#A64C3C;
--estado-omision-fondo:#F8EDEA;
--estado-omision-borde:#E4C4BC;
--estado-neutro:#6B736C;
--estado-neutro-fondo:#F5F3EC;
--estado-neutro-borde:#E8E4D8;

/* --- Gráficos (tableros) --- */
--chart-1:#315B4A;
--chart-2:#D6B64D;
--chart-3:#5C8C76;
--chart-4:#A2842F;
--chart-5:#8FB3A2;
--chart-grid:#E8E4D8;
}

/* ---------- typography.css ---------- */
/* Escala digital del manual: H1 56/600 · H2 40/600 · H3 24/600 · Cuerpo 16/400 · Etiqueta 12/500 mono */
:root{
--text-h1:56px;--text-h1-lh:1.06;--text-h1-ls:-0.02em;--text-h1-weight:600;
--text-h2:40px;--text-h2-lh:1.12;--text-h2-ls:-0.015em;--text-h2-weight:600;
--text-h3:24px;--text-h3-lh:1.25;--text-h3-ls:-0.01em;--text-h3-weight:600;
--text-h4:20px;--text-h4-lh:1.3;--text-h4-weight:600;
--text-lead:19px;--text-lead-lh:1.6;
--text-body-size:16px;--text-body-lh:1.6;--text-body-weight:400;
--text-small:14px;--text-small-lh:1.55;
--text-caption:13px;--text-caption-lh:1.5;
--text-label:12px;--text-label-lh:1.35;--text-label-weight:500;--text-label-ls:0.06em;
--text-dato:15px;--text-dato-lh:1.4;
--text-cifra:32px;--text-cifra-lh:1.1;--text-cifra-weight:600;

--weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;
}

/* ---------- spacing.css ---------- */
/* Escala de 4 px. Contenedor de lectura 1180 px, documento 820 px. */
:root{
--space-0:0px;--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;--space-24:96px;--space-32:128px;

--container-max:1180px;--container-doc:820px;--container-narrow:660px;
--gutter:40px;--gutter-mobile:20px;
--section-y:96px;--section-y-tight:64px;

/* Esquinas moderadas — nunca cápsulas salvo etiquetas de estado */
--radius-xs:4px;--radius-sm:6px;--radius-md:8px;--radius-lg:12px;--radius-xl:16px;
--radius-2xl:20px;--radius-pill:999px;

--border-width:1px;--border-width-strong:1.5px;--border-width-accent:3px;
}

/* ---------- elevation.css ---------- */
/* "Sin sombras excesivas": la jerarquía la da el borde, no la sombra. */
:root{
--shadow-0:none;
--shadow-1:0 1px 2px rgba(27,32,28,.06);
--shadow-2:0 2px 8px rgba(27,32,28,.07);
--shadow-3:0 8px 24px rgba(27,32,28,.09);
--shadow-modal:0 24px 60px rgba(27,32,28,.18);
--ring-focus:0 0 0 3px rgba(49,91,74,.22);
--ring-focus-mostaza:0 0 0 3px rgba(214,182,77,.35);
}

/* ---------- motion.css ---------- */
/* Movimiento discreto: transiciones cortas, sin rebotes ni brillos. */
:root{
--ease-standard:cubic-bezier(.2,0,.2,1); /* @kind other */
--ease-out:cubic-bezier(0,0,.2,1); /* @kind other */
--duration-fast:120ms; /* @kind other */
--duration-base:180ms; /* @kind other */
--duration-slow:280ms; /* @kind other */
--transition-color:color var(--duration-base) var(--ease-standard),background-color var(--duration-base) var(--ease-standard),border-color var(--duration-base) var(--ease-standard);
}

/* ---------- fonts.css (el @import de Google Fonts se movio
   al <head> del layout: cargar fuentes por CSS bloquea el
   render mas que un <link> con preconnect) ---------- */
/* Contadata usa IBM Plex Sans (texto) e IBM Plex Mono (datos auditables).
   Fallbacks del manual: Sans -> "Segoe UI", Arial. Mono -> Consolas. */
:root{--font-sans:"IBM Plex Sans","Segoe UI",Arial,sans-serif;--font-mono:"IBM Plex Mono",Consolas,"SFMono-Regular",monospace}

/* ---------- base.css ---------- */
/* Reglas base mínimas. El navbar siempre es blanco; el fondo principal es blanco o papel. */
:root{color-scheme:light}
body{font-family:var(--font-sans);font-size:var(--text-body-size);line-height:var(--text-body-lh);color:var(--text-body);background:var(--surface-page);-webkit-font-smoothing:antialiased}
a{color:var(--text-link);text-decoration:none}
a:hover{color:var(--text-link-hover);text-decoration:underline;text-underline-offset:3px}
::selection{background:var(--mostaza);color:var(--tinta)}
.cd-mono{font-family:var(--font-mono)}
.cd-etiqueta{font-family:var(--font-mono);font-size:var(--text-label);font-weight:var(--text-label-weight);letter-spacing:var(--text-label-ls);text-transform:uppercase;color:var(--text-muted)}