/* ════════════════════════════════════════════════════════════════════
GRK TOKENS — Capa 1 universal del DS Rikolver 8.7
════════════════════════════════════════════════════════════════════
URL canónica: https://assets.rikolver.com/css/grk-tokens.css
Fichero local: assets.rikolver.com:/css/grk-tokens.css
Versión: v1.0 (2026-05-04)
ALCANCE — qué vive aquí:
· Tokens de color base (4 pilares + secundarios + Mineral 12)
· Webfonts @font-face apuntando al CDN
· Escala tipográfica fluida + familias canónicas
· Spacing, layout, radios, z-index
· Easing y duraciones de animación
FUERA DE ALCANCE — qué NO vive aquí:
· Paletas semánticas .fondo-* (capa 2, cada consumidor las define)
· Componentes (header, hero, form, ...)
· Reglas específicas WordPress, configurador o email
DOCTRINA DE 3 CAPAS:
1. Tokens base (este fichero) — hex literales, valores absolutos.
2. Paletas semánticas — solo var(--color-*-base), redefinen variables
semánticas (--color-fondo, --color-texto-principal, --color-acento)
según fondo de sección. Viven en cada consumidor.
3. Componentes — solo var(--color-semántico-*). Jamás hex, jamás
tokens base directos.
CONSUMO — quién carga este fichero:
· WordPress themes línea Rikolver: enqueue antes que cualquier CSS
local del theme (functions.php).
· HTML standalone: en .
· Configurador v5.1+: al CDN en export modo standalone.
· Email transaccional: NO (R email — webfonts vía @font-face inline,
no @import; este fichero solo para web).
· Línea Dinesan/parking: NO (R66 — aislamiento marca).
PRECEDENCIA SOBRE 01-tokens.css:
Si un theme carga 01-tokens.css local DESPUÉS de este, sus valores
ganan (cascada normal). Si lo carga ANTES, este sobreescribe. Orden
recomendado en functions.php: grk-tokens (CDN) → 02-paletas (local)
→ resto de DS local. Ver §3.18.1 MD.
REFACTOR PENDIENTE COORDINADO:
Naming canónico futuro de assets (logo con sufijo _gris/_azul/_negro,
PNGs igual) — ver DECISION-PEND-REFACTOR-CDN. Mientras tanto, las
URLs de logo no figuran en este fichero (no se referencian desde CSS,
solo desde HTML directo).
════════════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════════════
1. WEBFONTS — Atipo Foundry, servidas desde assets.rikolver.com
════════════════════════════════════════════════════════════════════
Naming actual del CDN: PascalCase (Archia-Regular.woff2). Refactor
coordinado pendiente — ver DECISION-PEND-REFACTOR-CDN.
font-display: swap — render inmediato con fallback, sustituye al
cargar. Aceptable para web, no para email (que ignora @font-face).
════════════════════════════════════════════════════════════════════ */
/* ── ARCHIA — sans-serif, cuerpo y UI ────────────────────────────── */
/* 4 pesos canónicos (DS oficial). SemiBold y Bold subidos al CDN para
disponibilidad futura, NO declarados aquí — el DS no los reconoce. */
@font-face {
font-family: 'Archia';
src: url('https://assets.rikolver.com/fonts/Archia-Thin.woff2') format('woff2');
font-weight: 100;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Archia';
src: url('https://assets.rikolver.com/fonts/Archia-Light.woff2') format('woff2');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Archia';
src: url('https://assets.rikolver.com/fonts/Archia-Regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Archia';
src: url('https://assets.rikolver.com/fonts/Archia-Medium.woff2') format('woff2');
font-weight: 500;
font-style: normal;
font-display: swap;
}
/* ── ARGESTA DISPLAY — serif, títulos hero y portadas ────────────── */
@font-face {
font-family: 'ArgestaDisplay';
src: url('https://assets.rikolver.com/fonts/ArgestaDisplay-Regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'ArgestaDisplay';
src: url('https://assets.rikolver.com/fonts/ArgestaDisplay-RegularItalic.woff2') format('woff2');
font-weight: 400;
font-style: italic;
font-display: swap;
}
/* ── ARGESTA HEADLINE — serif, peso medio, títulos secundarios ───── */
@font-face {
font-family: 'ArgestaHeadline';
src: url('https://assets.rikolver.com/fonts/ArgestaHeadline-Regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'ArgestaHeadline';
src: url('https://assets.rikolver.com/fonts/ArgestaHeadline-RegularItalic.woff2') format('woff2');
font-weight: 400;
font-style: italic;
font-display: swap;
}
/* ── ARGESTA HAIRLINE — serif extrafino, stats y números grandes ─── */
@font-face {
font-family: 'ArgestaHairline';
src: url('https://assets.rikolver.com/fonts/ArgestaHairline-Regular.woff2') format('woff2');
font-weight: 100;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'ArgestaHairline';
src: url('https://assets.rikolver.com/fonts/ArgestaHairline-RegularItalic.woff2') format('woff2');
font-weight: 100;
font-style: italic;
font-display: swap;
}
/* ── ARGESTA TEXT — serif para cuerpo largo, citas, blockquotes ──── */
@font-face {
font-family: 'ArgestaText';
src: url('https://assets.rikolver.com/fonts/ArgestaText-Regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'ArgestaText';
src: url('https://assets.rikolver.com/fonts/ArgestaText-RegularItalic.woff2') format('woff2');
font-weight: 400;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'ArgestaText';
src: url('https://assets.rikolver.com/fonts/ArgestaText-Bold.woff2') format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
}
/* ════════════════════════════════════════════════════════════════════
2. TOKENS BASE — :root
════════════════════════════════════════════════════════════════════ */
:root {
/* ────────────────────────────────────────────────────────────────
2.1 COLORES PRIMARIOS — 4 pilares invariables del DS Rikolver
Hex literales SOLO aquí. Componentes jamás los usan directos.
──────────────────────────────────────────────────────────────── */
--color-azul-oxford: #1B1E27; /* Fondo dominante línea Rikolver */
--color-marron-cedar: #493B32; /* Acento corporativo */
--color-gris-koala: #94969A; /* Fondo intermedio + texto sobre oscuro */
--color-blanco: #FFFFFF; /* Fondo claro */
/* ────────────────────────────────────────────────────────────────
2.2 COLORES SECUNDARIOS — uso interno restringido
NO usar como fondo de sección (R fondos: solo los 4 primarios).
Permitidos para: gradientes, sombras, hover sutiles, citas,
metadatos, separadores.
──────────────────────────────────────────────────────────────── */
--color-oxford-profundo: #13151C; /* Gradientes, sombras profundas */
--color-oxford-medio: #222737; /* Hover sutiles, cards sobre Oxford */
--color-arena: #D6D2CC; /* Gris cálido para citas, metadatos */
--color-marfil: #F5F3EF; /* Fondo claro alternativo, no canónico */
--color-koala-claro: #C8C9CC; /* Variante clara Koala */
--color-cedar-profundo: #362A23; /* Variante profunda Cedar */
/* ────────────────────────────────────────────────────────────────
2.3 TRANSLÚCIDOS — derivados con color-mix (Safari 16.4+, 99% audiencia)
Sustituye rgba() hardcoded de versiones previas del DS.
──────────────────────────────────────────────────────────────── */
--color-azul-oxford-t: color-mix(in srgb, var(--color-azul-oxford) 85%, transparent);
--color-marron-cedar-t: color-mix(in srgb, var(--color-marron-cedar) 85%, transparent);
--color-gris-koala-t: color-mix(in srgb, var(--color-gris-koala) 80%, transparent);
--color-blanco-t: color-mix(in srgb, var(--color-blanco) 80%, transparent);
/* ────────────────────────────────────────────────────────────────
2.4 PALETA MINERAL — 12 colores invariantes para data viz
Charts, badges semánticos, alerts. NUNCA como fondo de sección.
Los mismos colores sobre cualquier background.
Mapping a Excel/PPTX/PDF: ver DS Charts §6 + skill rikolver-ds.
──────────────────────────────────────────────────────────────── */
--ch-1: #4E6070; /* Piedra azul — serie primaria */
--ch-2: #5E7D65; /* Liquen — positivo, disponible, EBITDA */
--ch-3: #928060; /* Piedra dorada — neutro, warning */
--ch-4: #8A5D4A; /* Arcilla — costes, alerta */
--ch-5: #5E6070; /* Grafito — secundario, no disponible */
--ch-6: #8B4A4A; /* Óxido — negativo, alerta */
--ch-7: #507872; /* Turmalina — deuda */
--ch-8: #7A7A5A; /* Líquen seco — ocupación */
--ch-9: #8A7050; /* Miel roble — próximamente, canon */
--ch-10: #505060; /* Antracita — amortización */
--ch-11: #705A4A; /* Cedro claro — OPEX */
--ch-12: #50645A; /* Bosque — subvención */
/* ────────────────────────────────────────────────────────────────
2.5 ACENTO DE PROYECTO — overrideable por consumidor
Default: Cedar (corporativo). Cada theme/configurador override
en su propio :root con var() al token apropiado:
Centralis: --color-acento-proyecto: var(--color-oxido-noche);
Peduer: --color-acento-proyecto: var(--color-crema-peduer);
GMS6: (NO consume este fichero, línea aislada)
PMC: --color-acento-proyecto: var(--color-marron-cedar);
Tokens proyecto-específicos (Óxido Noche, Óxido Peduer, Crema
Peduer, etc.) se declaran localmente en el theme/configurador
del proyecto. NO viven en este fichero porque cambian por
proyecto y `grk-tokens.css` debe ser invariante del grupo.
──────────────────────────────────────────────────────────────── */
--color-acento-proyecto: var(--color-marron-cedar);
/* ────────────────────────────────────────────────────────────────
2.6 PLANOS — token fijo invariante (visor de planos)
Highlight de elemento seleccionado: CH2 Liquen siempre, no
depende del acento de proyecto.
──────────────────────────────────────────────────────────────── */
--color-highlight-plano: var(--ch-2);
/* ────────────────────────────────────────────────────────────────
3. TIPOGRAFÍA
5 familias canónicas. Stacks con fallback Georgia/sans-serif.
──────────────────────────────────────────────────────────────── */
/* 3.1 Familias — variables semánticas */
--fuente-display: 'ArgestaDisplay', 'ArgestaHeadline', Georgia, serif;
--fuente-headline: 'ArgestaHeadline', 'ArgestaDisplay', Georgia, serif;
--fuente-hairline: 'ArgestaHairline', 'ArgestaHeadline', Georgia, serif;
--fuente-text: 'ArgestaText', Georgia, serif;
--fuente-ui: 'Archia', system-ui, -apple-system, sans-serif;
--fuente-base: var(--fuente-ui);
/* 3.2 Escala fluida — base 16px, sin hack 62.5% */
--t-label: clamp(.688rem, .3vw + .58rem, .813rem); /* Etiquetas, eyebrows */
--t-xs: clamp(.75rem, .5vw + .56rem, .938rem); /* Texto secundario */
--t-sm: clamp(.938rem, .5vw + .75rem, 1.125rem); /* Texto cuerpo pequeño */
--t-md: clamp(1rem, .4vw + .85rem, 1.188rem); /* Texto cuerpo */
--t-lg: clamp(1.125rem,1.2vw + .75rem,1.625rem); /* Texto destacado */
--t-xl: clamp(1.5rem, 2vw + .75rem, 2.75rem); /* H3, .sl-num, .sl-nombre */
--t-2xl: clamp(2rem, 4vw + .5rem, 4.25rem); /* H2 secciones */
--t-3xl: clamp(2.8rem, 8vw, 6.5rem); /* H1 hero */
--t-stat: clamp(1.75rem, 3.5vw + .4rem, 4rem); /* Hairline stats */
/* ────────────────────────────────────────────────────────────────
4. ESPACIADO — escala 8px
──────────────────────────────────────────────────────────────── */
--sp-1: 8px;
--sp-2: 16px;
--sp-3: 24px;
--sp-4: 32px;
--sp-5: 40px;
--sp-6: 56px;
--sp-7: 72px;
--sp-8: 96px;
/* Paddings sección — fluidos */
--pad-v: clamp(3rem, 6vw, 6.5rem);
--pad-v-sm: clamp(2rem, 4vw, 4rem);
--pad-v-lg: clamp(4rem, 8vw, 8rem);
--gutter: clamp(1rem, 4.5vw, 4.5rem);
--gap-grid: clamp(1.5rem, 3vw, 3.5rem);
/* ────────────────────────────────────────────────────────────────
5. LAYOUT
──────────────────────────────────────────────────────────────── */
--max-w: 1100px; /* Contenedor estándar */
--max-w-wide: 1280px; /* Contenedor amplio (DS 8.6 alineado) */
--max-w-text: 720px; /* Cuerpo largo legal/editorial */
--radio-btn: 3px; /* Botones */
--radio-card: 4px; /* Cards */
--header-h: 64px;
--header-h-slim: 48px;
--z-header: 100;
--z-overlay: 200;
--z-toast: 300;
--z-modal: 400;
/* ────────────────────────────────────────────────────────────────
6. ANIMACIÓN — easing y duraciones
──────────────────────────────────────────────────────────────── */
--ease-expo: cubic-bezier(.16, 1, .3, 1); /* Entradas suaves */
--ease-quart: cubic-bezier(.25, 1, .5, 1); /* Header, hovers */
--ease-inout: cubic-bezier(.65, 0, .35, 1); /* Transiciones generales */
--ease-spring: cubic-bezier(.34, 1.56, .64, 1); /* Spring controlado */
--dur-fast: 200ms;
--dur-med: 450ms;
--dur-slow: 1400ms;
--dur-xslow: 1600ms;
--dur-enter: 2000ms;
}
/* ════════════════════════════════════════════════════════════════════
7. RESET TIPOGRÁFICO MÍNIMO — opcional, SOLO body si nadie más lo hace
════════════════════════════════════════════════════════════════════
Comentado por defecto. Si un consumidor quiere aplicarlo
automáticamente, descomentar en su CSS local. NO se aplica desde
este fichero para no pelear con themes/consumidores que tienen
reset propio.
──────────────────────────────────────────────────────────────────── */
/*
body {
font-family: var(--fuente-ui);
font-size: var(--t-md);
font-weight: 300;
line-height: 1.6;
}
*/
/* ──── EOF ─────────────────────────────────────────────────────────── */