/* =====================================================================
Core360 Design Tokens v1.0
Brand Kit oficial · Abril 2026
Fuente: Brand Kit.pdf (Marca y Diseño)
Uso:
(o sin atributo → auto por hora Panamá)
No editar valores hex directamente. Si la paleta cambia, actualizar el PDF y regenerar.
===================================================================== */
/* --- Fuentes oficiales --- */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
/* =========================
PALETA BASE (inmutable)
========================= */
:root {
/* Brand core */
--c360-marino: #0D1F7A;
--c360-marino-deep: #0A1650;
--c360-royal: #1E5FDB;
--c360-electric: #2E9BFF;
--c360-cyan: #2FC7E8;
/* Escala neutra */
--c360-ink: #0A0E27;
--c360-graphite: #2A2F4A;
--c360-slate: #5A6178;
--c360-mist: #E6EAF2;
--c360-paper: #FBFCFE;
/* Semánticos base (iguales en ambos modos) */
--c360-success: #10B981;
--c360-warning: #F59E0B;
--c360-danger: #EF4444;
--c360-info: #2E9BFF;
/* Gradiente firma */
--c360-gradient-signature: linear-gradient(135deg, #0D1F7A 0%, #1E5FDB 40%, #2E9BFF 75%, #2FC7E8 100%);
--c360-gradient-hero: linear-gradient(135deg, #0A1650 0%, #0D1F7A 50%, #1E5FDB 100%);
--c360-gradient-accent: linear-gradient(90deg, #2E9BFF 0%, #2FC7E8 100%);
/* Tipografía */
--c360-font-display: 'Space Grotesk', 'Inter', system-ui, -apple-system, sans-serif;
--c360-font-body: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
--c360-font-mono: 'JetBrains Mono', 'Space Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;
/* Escala tipográfica (brand kit page 6) */
--c360-fs-display: clamp(2.5rem, 5vw, 4rem); /* 40-64 */
--c360-fs-h1: clamp(2rem, 4vw, 2.75rem);/* 32-44 */
--c360-fs-h2: clamp(1.5rem, 3vw, 2rem); /* 24-32 */
--c360-fs-h3: 1.25rem; /* 20 */
--c360-fs-body: 0.9375rem;/* 15 */
--c360-fs-small: 0.8125rem;/* 13 */
--c360-fs-mono: 0.8125rem;
--c360-fw-regular: 400;
--c360-fw-medium: 500;
--c360-fw-semibold: 600;
--c360-fw-bold: 700;
--c360-lh-tight: 1.15;
--c360-lh-snug: 1.35;
--c360-lh-normal: 1.55;
--c360-tracking-tight: -0.02em;
--c360-tracking-normal: 0;
--c360-tracking-wide: 0.08em;
--c360-tracking-mono: 0.04em;
/* Radio */
--c360-radius-xs: 4px;
--c360-radius-sm: 8px;
--c360-radius-md: 12px;
--c360-radius-lg: 16px;
--c360-radius-xl: 24px;
--c360-radius-pill: 999px;
/* Espaciado (4px base) */
--c360-space-1: 4px;
--c360-space-2: 8px;
--c360-space-3: 12px;
--c360-space-4: 16px;
--c360-space-5: 20px;
--c360-space-6: 24px;
--c360-space-8: 32px;
--c360-space-10: 40px;
--c360-space-12: 48px;
--c360-space-16: 64px;
/* Timing */
--c360-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--c360-ease-in-out: cubic-bezier(0.83, 0, 0.17, 1);
--c360-duration-fast: 150ms;
--c360-duration-base: 240ms;
--c360-duration-slow: 400ms;
/* Z-index */
--c360-z-dropdown: 1000;
--c360-z-sticky: 1020;
--c360-z-drawer: 1040;
--c360-z-modal: 1050;
--c360-z-popover: 1060;
--c360-z-toast: 1080;
}
/* =========================
TEMA CLARO (default)
========================= */
:root,
[data-theme="light"] {
/* Surfaces */
--c360-bg: var(--c360-paper);
--c360-bg-alt: #F3F5FA;
--c360-surface: #FFFFFF;
--c360-surface-raised: #FFFFFF;
--c360-surface-sunken: var(--c360-mist);
--c360-surface-inverse: var(--c360-marino);
/* Texto */
--c360-text: var(--c360-ink);
--c360-text-secondary: var(--c360-graphite);
--c360-text-muted: var(--c360-slate);
--c360-text-inverse: #FFFFFF;
--c360-text-on-brand: #FFFFFF;
--c360-on-primary: #FFFFFF;
/* Borde */
--c360-border: var(--c360-mist);
--c360-border-strong: #D4DAE6;
--c360-border-focus: var(--c360-electric);
/* Acciones (brand) */
--c360-primary: var(--c360-marino);
--c360-primary-hover: var(--c360-marino-deep);
--c360-primary-active: #07104A;
--c360-primary-subtle: #E8ECFB;
--c360-accent: var(--c360-electric);
--c360-accent-hover: #1A86EE;
--c360-accent-subtle: #E0F1FF;
--c360-signal: var(--c360-cyan);
/* Feedback backgrounds suaves */
--c360-success-subtle: #DCFCE7;
--c360-warning-subtle: #FEF3C7;
--c360-danger-subtle: #FEE2E2;
--c360-info-subtle: #DBEAFE;
/* Navegación (drawer/sidebar) */
--c360-nav-bg: var(--c360-gradient-hero);
--c360-nav-text: rgba(255,255,255,0.92);
--c360-nav-text-active: #FFFFFF;
--c360-nav-item-hover: rgba(255,255,255,0.08);
--c360-nav-item-active: rgba(47,199,232,0.18);
--c360-nav-accent: var(--c360-cyan);
/* Sombras */
--c360-shadow-xs: 0 1px 2px rgba(13, 31, 122, 0.05);
--c360-shadow-sm: 0 2px 4px rgba(13, 31, 122, 0.06), 0 1px 2px rgba(13, 31, 122, 0.04);
--c360-shadow-md: 0 6px 16px rgba(13, 31, 122, 0.08), 0 2px 4px rgba(13, 31, 122, 0.04);
--c360-shadow-lg: 0 16px 32px rgba(13, 31, 122, 0.10), 0 4px 8px rgba(13, 31, 122, 0.05);
--c360-shadow-xl: 0 24px 48px rgba(13, 31, 122, 0.14);
--c360-shadow-focus: 0 0 0 3px rgba(46, 155, 255, 0.25);
/* Overlay/scrim */
--c360-scrim: rgba(10, 14, 39, 0.45);
}
/* =========================
TEMA OSCURO
========================= */
[data-theme="dark"] {
/* Surfaces - derivadas de Tinta */
--c360-bg: #070A1E;
--c360-bg-alt: var(--c360-ink);
--c360-surface: #121838;
--c360-surface-raised: #1A2146;
--c360-surface-sunken: #0B1030;
--c360-surface-inverse: var(--c360-paper);
/* Texto */
--c360-text: var(--c360-paper);
--c360-text-secondary: #C7CEE0;
--c360-text-muted: #8891AC;
--c360-text-inverse: var(--c360-ink);
--c360-text-on-brand: #FFFFFF;
--c360-on-primary: #FFFFFF;
/* Borde */
--c360-border: #262D50;
--c360-border-strong: #353D65;
--c360-border-focus: var(--c360-cyan);
/* Acciones — En dark, el primary interactivo sube a Electric para contraste
(AA ≥ 4.5:1 sobre surface) pero Marino permanece para gradientes y fondos. */
--c360-primary: var(--c360-electric);
--c360-primary-hover: #4DAAFF;
--c360-primary-active: var(--c360-cyan);
--c360-primary-subtle: rgba(46, 155, 255, 0.14);
--c360-accent: var(--c360-cyan);
--c360-accent-hover: #55D4F0;
--c360-accent-subtle: rgba(47, 199, 232, 0.14);
--c360-signal: var(--c360-cyan);
/* Feedback suaves */
--c360-success-subtle: rgba(16, 185, 129, 0.16);
--c360-warning-subtle: rgba(245, 158, 11, 0.16);
--c360-danger-subtle: rgba(239, 68, 68, 0.16);
--c360-info-subtle: rgba(46, 155, 255, 0.16);
/* Navegación */
--c360-nav-bg: linear-gradient(180deg, #0A1030 0%, #070A1E 100%);
--c360-nav-text: rgba(255,255,255,0.78);
--c360-nav-text-active: #FFFFFF;
--c360-nav-item-hover: rgba(47,199,232,0.08);
--c360-nav-item-active: rgba(47,199,232,0.18);
--c360-nav-accent: var(--c360-cyan);
/* Sombras (más profundas en dark) */
--c360-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.24);
--c360-shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.32), 0 1px 2px rgba(0, 0, 0, 0.18);
--c360-shadow-md: 0 8px 18px rgba(0, 0, 0, 0.42), 0 2px 4px rgba(0, 0, 0, 0.24);
--c360-shadow-lg: 0 18px 36px rgba(0, 0, 0, 0.5), 0 4px 8px rgba(0, 0, 0, 0.28);
--c360-shadow-xl: 0 28px 56px rgba(0, 0, 0, 0.6);
--c360-shadow-focus: 0 0 0 3px rgba(47, 199, 232, 0.35);
--c360-scrim: rgba(0, 0, 0, 0.65);
/* En dark el gradiente hero se intensifica */
--c360-gradient-hero: linear-gradient(135deg, #050822 0%, #0A1650 55%, #0D1F7A 100%);
}
/* =========================
Respeto a preferencias OS
cuando NO hay data-theme explícito
========================= */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]):not([data-theme="dark"]) {
color-scheme: dark;
}
}
/* =========================
Reset tipográfico base
========================= */
html {
color-scheme: light dark;
}
body {
font-family: var(--c360-font-body);
font-size: var(--c360-fs-body);
line-height: var(--c360-lh-normal);
color: var(--c360-text);
background: var(--c360-bg);
transition: background-color var(--c360-duration-base) var(--c360-ease-out),
color var(--c360-duration-base) var(--c360-ease-out);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--c360-font-display);
font-weight: var(--c360-fw-bold);
letter-spacing: var(--c360-tracking-tight);
line-height: var(--c360-lh-tight);
color: var(--c360-text);
}
code, kbd, samp, pre, .mono {
font-family: var(--c360-font-mono);
letter-spacing: var(--c360-tracking-mono);
}
/* =========================
Utilidades brand
========================= */
.c360-gradient-text {
background: var(--c360-gradient-accent);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.c360-eyebrow {
font-family: var(--c360-font-mono);
font-size: 0.75rem;
letter-spacing: var(--c360-tracking-wide);
text-transform: uppercase;
color: var(--c360-accent);
}
/* Chip/badge estilo brand */
.c360-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: var(--c360-radius-pill);
background: var(--c360-primary-subtle);
color: var(--c360-primary);
font-family: var(--c360-font-mono);
font-size: 0.75rem;
letter-spacing: var(--c360-tracking-wide);
text-transform: uppercase;
}
/* Grano sutil opcional para fondos hero */
.c360-grain {
position: relative;
isolation: isolate;
}
.c360-grain::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
mix-blend-mode: overlay;
opacity: 0.06;
background-image: url("data:image/svg+xml;utf8,");
z-index: 0;
}