/* ============================================================================
GRUPO · DESIGN SYSTEM v7 · base/tokens.css
Fundacion comun para CIS, CDS, cochid e illanes00.
----------------------------------------------------------------------------
Fuente canonica: /srv/projects/core/core-style/v7/ (repo core-style).
Dist publicado: https://style.innovacionsantiago.cl/v7/
Derivado del lenguaje visual VIVO de innovacionsantiago.cl (2026-07-31):
papel calido + tinta, bordes 1px, geometria recta, mono como voz secundaria.
Uso minimo por sitio:
Bootstrap anti-flash (inline en , ANTES de los stylesheets):
Tema: light por defecto segun prefers-color-scheme; override explicito con
data-theme="light|dark" en (lo estampa theme.js / el bootstrap).
PROHIBIDO: web components de runtime, Google Fonts/CDN, em-dash en copy.
============================================================================ */
:root {
/* ---- Tinta / papel (neutro del grupo; las marcas pueden re-tenir) ---- */
--ink: #0e1418;
--ink-muted: #5b6672;
--ink-soft: #a3acb5;
--paper: #f6f5f1;
--paper-raised: #ffffff;
/* ---- Lineas: el separador dominante es borde 1px, no sombra ---- */
--line: #d4d1c9;
--line-strong: #14181c;
/* ---- Acento (cada marca lo sobreescribe en brands//tokens.css) ---- */
--accent: #1e3a5f;
--accent-soft: #e7edf4;
/* ---- Estado ---- */
--warn: #b45309;
--err: #9a1b1b;
--ok: #0b7e59;
/* ---- Superficie inversa (bloques oscuros dentro de pagina clara) ---- */
--surface-inverse: #0c1116;
--on-inverse: #c7cdd4;
--on-inverse-strong: #ffffff;
/* ---- Tipografia (self-hosted en /v7/fonts/, NUNCA CDN) ---- */
--font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo,
Consolas, "Liberation Mono", monospace;
/* ---- Escala tipografica ---- */
--fs-body: 14px; /* UI base · lh 1.45 */
--fs-prose: 15px; /* prosa larga · lh 1.6 · max-width 68ch */
--fs-small: 13.5px; /* nav links, botones */
--fs-micro: 11.5px; /* wordmark, eyebrows */
--fs-mono-label: 10.5px; /* h4 footer, base legal · mono UPPERCASE */
--fs-hero: clamp(34px, 5vw, 60px); /* w800 · lh .98 · ls -.035em */
--fs-section: clamp(28px, 3.6vw, 44px); /* lh 1.05 · ls -.025em */
/* ---- Tracking mono (voz secundaria de la casa) ---- */
--track-eyebrow: .18em;
--track-label: .12em;
--track-legal: .1em;
/* ---- Layout ---- */
--container: 1240px;
--pad-x: 32px; /* 20px en mobile, ver media query abajo */
--grid-col: 96px;
--grid-gap: 24px;
/* ---- Espaciado (escala usada por los sitios vivos) ---- */
--space-1: 8px; --space-2: 12px; --space-3: 16px; --space-4: 24px;
--space-5: 32px; --space-6: 40px; --space-7: 48px; --space-8: 56px;
/* ---- Radios: geometria recta. 0 en superficies; 6px SOLO controles;
999px solo pills (chip usuario, login) ---- */
--radius: 0;
--radius-ctl: 6px;
--radius-pill: 999px;
/* ---- Sombras: casi ninguna; jerarquia por bordes y fondos ---- */
--shadow: none;
--shadow-modal: 0 24px 60px rgba(0, 0, 0, .5); /* solo login-card / modal */
/* ---- Transiciones ---- */
--t-fast: .12s;
--t-base: .15s;
--t-slow: .2s;
color-scheme: light;
}
/* ---- Dark: automatico por sistema (si no hay override explicito) ---- */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--ink: #f3f1ea;
--ink-muted: #a9a69d;
--ink-soft: #6b6863;
--paper: #0a0a0a;
--paper-raised: #111110;
--line: #2a2a27;
--line-strong: #eaeae4;
--accent: #7fc598;
--accent-soft: #12261a;
--surface-inverse: #17171a;
--on-inverse: #d4d0c5;
color-scheme: dark;
}
}
/* ---- Dark: explicito via toggle (theme.js estampa data-theme) ---- */
:root[data-theme="dark"] {
--ink: #f3f1ea;
--ink-muted: #a9a69d;
--ink-soft: #6b6863;
--paper: #0a0a0a;
--paper-raised: #111110;
--line: #2a2a27;
--line-strong: #eaeae4;
--accent: #7fc598;
--accent-soft: #12261a;
--surface-inverse: #17171a;
--on-inverse: #d4d0c5;
color-scheme: dark;
}
/* ============================ Base minima ================================= */
* { box-sizing: border-box; }
body {
margin: 0;
background: var(--paper);
color: var(--ink);
font-family: var(--font-sans);
font-size: var(--fs-body);
line-height: 1.45;
-webkit-font-smoothing: antialiased;
text-rendering: optimizelegibility;
font-feature-settings: "ss01", "ss02", "tnum", "cv11";
min-height: 100vh;
display: flex;
flex-direction: column;
}
/* Links en prosa: subrayado fino. Links de chrome definen lo suyo. */
a {
color: inherit;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 2px;
}
/* Enfasis en titulares: por color, no cursiva */
h1 em, h2 em, h3 em { color: var(--accent); font-style: normal; }
/* Prosa larga */
.prose { font-size: var(--fs-prose); line-height: 1.6; max-width: 68ch; }
/* Contenedor canonico */
.container {
max-width: var(--container);
margin: 0 auto;
padding-left: var(--pad-x);
padding-right: var(--pad-x);
}
/* Eyebrow / kicker: patron firma del grupo (mono uppercase con tracking) */
.eyebrow {
display: inline-flex;
gap: 10px;
font-family: var(--font-mono);
font-size: var(--fs-micro);
letter-spacing: var(--track-eyebrow);
text-transform: uppercase;
color: var(--accent);
}
.eyebrow--muted { color: var(--ink-muted); }
@media (max-width: 640px) {
:root { --pad-x: 20px; }
}