/* ============================================
OroCredit — Design Tokens
Origen: design system entregado 2026-05-17.
Cargado en via para que las custom properties
vivan en :root del documento y se hereden a todos los shadow
roots automaticamente.
============================================ */
:root {
/* Base palette — neutrals (warm cream tones) */
--oc-cream-50: #fbf9f4;
--oc-cream-100: #f8f5ef;
--oc-cream-200: #eeeae0;
--oc-cream-300: #e2dccc;
--oc-cream-400: #c9c2ae;
--oc-cream-500: #a8a18c;
/* Ink — deep classic blue family */
--oc-ink-900: #050e18;
--oc-ink-800: #0a1828;
--oc-ink-700: #11243b;
--oc-ink-600: #1b3551;
--oc-ink-500: #2e4a68;
--oc-ink-400: #5a7290;
--oc-ink-300: #8fa2b8;
--oc-ink-200: #c0ccd9;
--oc-ink-100: #e4eaf1;
/* Gold — ceremonial accent */
--oc-gold-700: #8e764f;
--oc-gold-600: #a38962;
--oc-gold-500: #bfa181; /* primary gold */
--oc-gold-400: #d2b996;
--oc-gold-300: #e3d2b7;
--oc-gold-200: #f0e4d1;
--oc-gold-100: #f8f1e4;
/* Turquoise — functional accent */
--oc-teal-800: #0f5f5d;
--oc-teal-700: #14716e;
--oc-teal-600: #178582; /* primary teal */
--oc-teal-500: #2c9d9a;
--oc-teal-400: #6bbdba;
--oc-teal-300: #a6d8d6;
--oc-teal-200: #d4ecec;
--oc-teal-100: #eaf6f5;
/* Semantic — quotes, gains, losses */
--oc-positive: #2f7d5b;
--oc-positive-bg: #e5f0ea;
--oc-negative: #b23a3a;
--oc-negative-bg: #f4e4e2;
--oc-warning: #b07a1a;
--oc-warning-bg: #f6ecd6;
/* ----- LIGHT MODE (default) ----- */
--bg: var(--oc-cream-100);
--bg-elevated: #ffffff;
--bg-subtle: var(--oc-cream-200);
--bg-deep: var(--oc-cream-300);
--bg-inverse: var(--oc-ink-800);
--fg: var(--oc-ink-800);
--fg-muted: var(--oc-ink-500);
--fg-subtle: var(--oc-ink-400);
--fg-faint: var(--oc-ink-300);
--fg-inverse: var(--oc-cream-100);
--border: var(--oc-cream-300);
--border-strong: var(--oc-ink-200);
--border-hairline: rgba(10, 24, 40, 0.08);
--border-gold: var(--oc-gold-500);
--accent: var(--oc-teal-600);
--accent-fg: #ffffff;
--accent-soft: var(--oc-teal-100);
--gold: var(--oc-gold-500);
--gold-strong: var(--oc-gold-700);
--gold-soft: var(--oc-gold-100);
--shadow-xs: 0 1px 0 0 rgba(10, 24, 40, 0.04);
--shadow-sm: 0 1px 2px rgba(10, 24, 40, 0.06), 0 1px 0 rgba(10, 24, 40, 0.02);
--shadow-md: 0 4px 12px -4px rgba(10, 24, 40, 0.1), 0 2px 4px -2px rgba(10, 24, 40, 0.04);
--shadow-lg: 0 16px 32px -12px rgba(10, 24, 40, 0.18), 0 4px 8px -4px rgba(10, 24, 40, 0.06);
--shadow-inset: inset 0 1px 0 0 rgba(255, 255, 255, 0.6);
/* ===== Estados de Acuerdo · familia oklch =====
Diseñado con Claude Design (sesión 2026-06-15) como paleta semántica
por estado del Acuerdo. Familia coherente: lightness 0.55–0.66 y chroma
0.05–0.10, variando sólo el matiz. Azules fríos = proceso, verde/oro =
cierres positivos, rojo = negativo, ciruela = renegociación.
Sustituye al set ad-hoc `--vv-est-*` pastel previo. */
--st-consulta: oklch(0.62 0.055 285); /* azul-violeta tenue, tentativo */
--st-presupuesto: oklch(0.55 0.050 250); /* slate-azul, hub que ramifica */
--st-compra: oklch(0.58 0.095 155); /* verde adquisición */
--st-empeno: oklch(0.58 0.085 195); /* teal de marca */
--st-venta: oklch(0.66 0.100 85); /* oro cálido (texto ink-900) */
--st-perdido: oklch(0.56 0.095 30); /* arcilla-rojo, oportunidad perdida */
--st-renegociado: oklch(0.56 0.070 330); /* ciruela, camino re-trabajado */
/* ===== Estados de Lote · familia oklch =====
Diseñado con Claude Design (sesión 2026-06-19) coherente con la paleta
de Acuerdo. abierto (teal) y enviado (verde) reutilizan los matices de
empeno/compra para mantener una lectura cromática familiar · cerrado
(slate-gris) marca "pausa custodial" y controlado (oro) "preparado para
envío". */
--st-abierto: oklch(0.58 0.085 195); /* teal · igual familia que empeño */
--st-cerrado: oklch(0.52 0.020 250); /* slate-gris, pausa custodial */
--st-controlado: oklch(0.66 0.100 85); /* oro cálido · igual familia que venta */
--st-enviado: oklch(0.58 0.095 155); /* verde · igual familia que compra */
}
[data-theme='dark'] {
--bg: var(--oc-ink-900);
--bg-elevated: var(--oc-ink-800);
--bg-subtle: var(--oc-ink-700);
--bg-deep: #020812;
--bg-inverse: var(--oc-cream-100);
--fg: var(--oc-cream-100);
--fg-muted: var(--oc-ink-200);
--fg-subtle: var(--oc-ink-300);
--fg-faint: var(--oc-ink-400);
--fg-inverse: var(--oc-ink-900);
--border: var(--oc-ink-600);
--border-strong: var(--oc-ink-500);
--border-hairline: rgba(191, 161, 129, 0.12);
--border-gold: var(--oc-gold-500);
--accent: var(--oc-teal-500);
--accent-fg: var(--oc-ink-900);
--accent-soft: rgba(23, 133, 130, 0.16);
--gold: var(--oc-gold-500);
--gold-strong: var(--oc-gold-400);
--gold-soft: rgba(191, 161, 129, 0.14);
--shadow-xs: 0 1px 0 0 rgba(0, 0, 0, 0.4);
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
--shadow-md: 0 4px 12px -4px rgba(0, 0, 0, 0.6), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
--shadow-lg: 0 16px 32px -12px rgba(0, 0, 0, 0.7), 0 4px 8px -4px rgba(0, 0, 0, 0.5);
--shadow-inset: inset 0 1px 0 0 rgba(255, 255, 255, 0.04);
/* Estados de Acuerdo · variante dark · suben lightness y chroma para
compensar el bg ink y mantener saturación percibida. Los derivados
bg/line/ink/glow del `:root` siguen funcionando sin redefinir porque
`--bg-elevated` y `--fg` también cambian con el tema. */
--st-consulta: oklch(0.72 0.070 285);
--st-presupuesto: oklch(0.68 0.065 250);
--st-compra: oklch(0.70 0.110 155);
--st-empeno: oklch(0.70 0.100 195);
--st-venta: oklch(0.78 0.110 85);
--st-perdido: oklch(0.68 0.115 30);
--st-renegociado: oklch(0.70 0.090 330);
--st-abierto: oklch(0.70 0.100 195);
--st-cerrado: oklch(0.66 0.030 250);
--st-controlado: oklch(0.78 0.110 85);
--st-enviado: oklch(0.70 0.110 155);
}
:root {
/* Type — three families */
--font-display: 'Cormorant Garamond', 'Source Serif Pro', Georgia, serif;
--font-sans: 'Inter Tight', 'Söhne', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;
/* Type scale */
--text-xs: 11px;
--text-sm: 13px;
--text-base: 15px;
--text-md: 17px;
--text-lg: 20px;
--text-xl: 24px;
--text-2xl: 32px;
--text-3xl: 44px;
--text-4xl: 60px;
--text-5xl: 84px;
/* Spacing — 4pt base */
--space-0: 0;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-7: 28px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
--space-20: 80px;
/* Radii — restrained, mostly 4-8px */
--radius-none: 0;
--radius-xs: 2px;
--radius-sm: 4px;
--radius-md: 6px;
--radius-lg: 10px;
--radius-xl: 14px;
--radius-pill: 999px;
/* Layout */
--hairline: 1px solid var(--border-hairline);
--hairline-gold: 1px solid var(--gold);
--container-max: 1280px;
}
/* ===== Derivados color-mix por estado =====
Se definen una sola vez en `:root` porque `color-mix` resuelve en sitio de
uso · el cambio de tema (var(--bg-elevated) y var(--fg) recalculados en
[data-theme='dark']) propaga automáticamente al derivado sin redefinir.
- `-bg` · tinte suave para bg de pills/chips/eyebrows.
- `-line` · borde discreto que respeta el matiz del estado.
- `-ink` · texto sobre tinte, suficiente contraste sin gritar.
- `-glow` / `-glow-weak` · halos animados del componente
`` (latido). */
:root {
--st-consulta-bg: color-mix(in oklab, var(--st-consulta) 13%, var(--bg-elevated));
--st-consulta-line: color-mix(in oklab, var(--st-consulta) 42%, var(--bg-elevated));
--st-consulta-ink: color-mix(in oklab, var(--st-consulta) 64%, var(--fg));
--st-consulta-glow: color-mix(in oklab, var(--st-consulta) 46%, transparent);
--st-consulta-glow-weak: color-mix(in oklab, var(--st-consulta) 20%, transparent);
--st-consulta-on: #fff;
--st-presupuesto-bg: color-mix(in oklab, var(--st-presupuesto) 13%, var(--bg-elevated));
--st-presupuesto-line: color-mix(in oklab, var(--st-presupuesto) 42%, var(--bg-elevated));
--st-presupuesto-ink: color-mix(in oklab, var(--st-presupuesto) 64%, var(--fg));
--st-presupuesto-glow: color-mix(in oklab, var(--st-presupuesto) 46%, transparent);
--st-presupuesto-glow-weak: color-mix(in oklab, var(--st-presupuesto) 20%, transparent);
--st-presupuesto-on: #fff;
--st-compra-bg: color-mix(in oklab, var(--st-compra) 13%, var(--bg-elevated));
--st-compra-line: color-mix(in oklab, var(--st-compra) 42%, var(--bg-elevated));
--st-compra-ink: color-mix(in oklab, var(--st-compra) 64%, var(--fg));
--st-compra-glow: color-mix(in oklab, var(--st-compra) 46%, transparent);
--st-compra-glow-weak: color-mix(in oklab, var(--st-compra) 20%, transparent);
--st-compra-on: #fff;
--st-empeno-bg: color-mix(in oklab, var(--st-empeno) 13%, var(--bg-elevated));
--st-empeno-line: color-mix(in oklab, var(--st-empeno) 42%, var(--bg-elevated));
--st-empeno-ink: color-mix(in oklab, var(--st-empeno) 64%, var(--fg));
--st-empeno-glow: color-mix(in oklab, var(--st-empeno) 46%, transparent);
--st-empeno-glow-weak: color-mix(in oklab, var(--st-empeno) 20%, transparent);
--st-empeno-on: #fff;
--st-venta-bg: color-mix(in oklab, var(--st-venta) 13%, var(--bg-elevated));
--st-venta-line: color-mix(in oklab, var(--st-venta) 42%, var(--bg-elevated));
--st-venta-ink: color-mix(in oklab, var(--st-venta) 64%, var(--fg));
--st-venta-glow: color-mix(in oklab, var(--st-venta) 46%, transparent);
--st-venta-glow-weak: color-mix(in oklab, var(--st-venta) 20%, transparent);
--st-venta-on: var(--oc-ink-900); /* oro cálido · texto oscuro contrasta mejor que blanco */
--st-perdido-bg: color-mix(in oklab, var(--st-perdido) 13%, var(--bg-elevated));
--st-perdido-line: color-mix(in oklab, var(--st-perdido) 42%, var(--bg-elevated));
--st-perdido-ink: color-mix(in oklab, var(--st-perdido) 64%, var(--fg));
--st-perdido-glow: color-mix(in oklab, var(--st-perdido) 46%, transparent);
--st-perdido-glow-weak: color-mix(in oklab, var(--st-perdido) 20%, transparent);
--st-perdido-on: #fff;
--st-renegociado-bg: color-mix(in oklab, var(--st-renegociado) 13%, var(--bg-elevated));
--st-renegociado-line: color-mix(in oklab, var(--st-renegociado) 42%, var(--bg-elevated));
--st-renegociado-ink: color-mix(in oklab, var(--st-renegociado) 64%, var(--fg));
--st-renegociado-glow: color-mix(in oklab, var(--st-renegociado) 46%, transparent);
--st-renegociado-glow-weak: color-mix(in oklab, var(--st-renegociado) 20%, transparent);
--st-renegociado-on: #fff;
/* Lote · derivados de los 4 estados (mismo patrón 13/42/64/46/20%) */
--st-abierto-bg: color-mix(in oklab, var(--st-abierto) 13%, var(--bg-elevated));
--st-abierto-line: color-mix(in oklab, var(--st-abierto) 42%, var(--bg-elevated));
--st-abierto-ink: color-mix(in oklab, var(--st-abierto) 64%, var(--fg));
--st-abierto-glow: color-mix(in oklab, var(--st-abierto) 46%, transparent);
--st-abierto-glow-weak: color-mix(in oklab, var(--st-abierto) 20%, transparent);
--st-abierto-on: #fff;
--st-cerrado-bg: color-mix(in oklab, var(--st-cerrado) 13%, var(--bg-elevated));
--st-cerrado-line: color-mix(in oklab, var(--st-cerrado) 42%, var(--bg-elevated));
--st-cerrado-ink: color-mix(in oklab, var(--st-cerrado) 64%, var(--fg));
--st-cerrado-glow: color-mix(in oklab, var(--st-cerrado) 46%, transparent);
--st-cerrado-glow-weak: color-mix(in oklab, var(--st-cerrado) 20%, transparent);
--st-cerrado-on: #fff;
--st-controlado-bg: color-mix(in oklab, var(--st-controlado) 13%, var(--bg-elevated));
--st-controlado-line: color-mix(in oklab, var(--st-controlado) 42%, var(--bg-elevated));
--st-controlado-ink: color-mix(in oklab, var(--st-controlado) 64%, var(--fg));
--st-controlado-glow: color-mix(in oklab, var(--st-controlado) 46%, transparent);
--st-controlado-glow-weak: color-mix(in oklab, var(--st-controlado) 20%, transparent);
--st-controlado-on: var(--oc-ink-900); /* oro cálido · texto oscuro contrasta mejor */
--st-enviado-bg: color-mix(in oklab, var(--st-enviado) 13%, var(--bg-elevated));
--st-enviado-line: color-mix(in oklab, var(--st-enviado) 42%, var(--bg-elevated));
--st-enviado-ink: color-mix(in oklab, var(--st-enviado) 64%, var(--fg));
--st-enviado-glow: color-mix(in oklab, var(--st-enviado) 46%, transparent);
--st-enviado-glow-weak: color-mix(in oklab, var(--st-enviado) 20%, transparent);
--st-enviado-on: #fff;
}
/* Reset bits — globales del documento.
No se replican en shadow roots porque el reset (* / body) no es
adoptable a piezas aisladas. Las utility classes (eyebrow, etc.)
viven en app.css para que cada shadow root las adopte. */
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
font-family: var(--font-sans);
font-size: var(--text-base);
line-height: 1.5;
color: var(--fg);
background: var(--bg);
-webkit-font-smoothing: antialiased;
font-feature-settings: 'ss01', 'cv11';
}