/* ============================================================ KIRU — Design tokens v1.0 Fuente única para landing y aplicación. Uso: (o "light") ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Chivo:wght@400;600;700;900&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap'); :root { /* ---- Marca (no cambian entre temas) ---- */ --kiru-teal: #307468; --kiru-teal-hover: #3A8A7B; --kiru-bone: #F3EEE0; --kiru-signal: #2FD39B; --kiru-signal-hover: #4AE0AD; --kiru-signal-ink: #06110C; /* texto sobre verde señal */ --kiru-black: #070A09; /* ---- Neutrales oscuros ---- */ --kiru-n900: #070A09; --kiru-n800: #0C1110; --kiru-n700: #121917; --kiru-n600: #1E2624; --kiru-n500: #2F3A37; --kiru-n300: #8B9894; --kiru-n200: #A9B5B1; --kiru-n100: #E8EDEB; /* ---- Neutrales claros ---- */ --kiru-l000: #FFFFFF; --kiru-l050: #FAF8F3; --kiru-l200: #E5E0D4; --kiru-l500: #6C7672; --kiru-l900: #101615; /* ---- Semánticos ---- */ --kiru-critical: #EF4B44; --kiru-critical-soft: rgba(239, 75, 68, 0.12); --kiru-critical-line: rgba(239, 75, 68, 0.30); --kiru-warning: #E5A13C; --kiru-warning-soft: rgba(229, 161, 60, 0.12); --kiru-warning-line: rgba(229, 161, 60, 0.30); --kiru-success: #2FD39B; --kiru-success-soft: rgba(47, 211, 155, 0.12); --kiru-success-line: rgba(47, 211, 155, 0.30); --kiru-info: #4B93D8; --kiru-info-soft: rgba(75, 147, 216, 0.12); --kiru-info-line: rgba(75, 147, 216, 0.30); /* ---- Series de data viz (en orden de uso) ---- */ --kiru-series-1: #2FD39B; --kiru-series-2: #307468; --kiru-series-3: #4B93D8; --kiru-series-4: #E5A13C; --kiru-series-5: #8B9894; /* ---- Tipografía ---- */ --kiru-font-display: 'Chivo', system-ui, sans-serif; --kiru-font-sans: 'IBM Plex Sans', system-ui, sans-serif; --kiru-font-mono: 'IBM Plex Mono', ui-monospace, monospace; --kiru-text-display: 900 3.5rem/1 var(--kiru-font-display); /* 56 */ --kiru-text-h1: 700 2.125rem/1.1 var(--kiru-font-display); /* 34 */ --kiru-text-h2: 600 1.375rem/1.25 var(--kiru-font-sans); /* 22 */ --kiru-text-h3: 600 1.0625rem/1.35 var(--kiru-font-sans); /* 17 */ --kiru-text-body: 400 0.9375rem/1.55 var(--kiru-font-sans); /* 15 */ --kiru-text-small: 400 0.875rem/1.5 var(--kiru-font-sans); /* 14 */ --kiru-text-metric: 500 0.9375rem/1.4 var(--kiru-font-mono); /* 15 */ --kiru-text-eyebrow: 400 0.6875rem/1.4 var(--kiru-font-mono); /* 11 */ --kiru-tracking-display: -0.035em; --kiru-tracking-head: -0.022em; --kiru-tracking-eyebrow: 0.14em; /* ---- Espaciado (rejilla de 8) ---- */ --kiru-space-1: 4px; --kiru-space-2: 8px; --kiru-space-3: 12px; --kiru-space-4: 16px; --kiru-space-5: 24px; --kiru-space-6: 32px; --kiru-space-7: 48px; --kiru-space-8: 72px; /* ---- Forma ---- */ --kiru-radius-sm: 3px; --kiru-radius: 4px; --kiru-radius-pill: 999px; --kiru-border-width: 1px; --kiru-control-h: 40px; /* escritorio */ --kiru-control-h-lg: 48px; /* táctil / CTA */ --kiru-content-max: 1180px; /* ---- Movimiento ---- */ --kiru-ease: cubic-bezier(0.2, 0, 0.2, 1); --kiru-dur-fast: 120ms; --kiru-dur: 200ms; } /* ---- Tema oscuro (por defecto) ---- */ :root, [data-theme="dark"] { --kiru-bg: var(--kiru-n900); --kiru-surface: var(--kiru-n800); --kiru-surface-2: var(--kiru-n700); --kiru-surface-hover: #0F1514; --kiru-border: var(--kiru-n600); --kiru-border-strong: var(--kiru-n500); --kiru-text: var(--kiru-n100); --kiru-text-strong: var(--kiru-bone); --kiru-text-muted: var(--kiru-n300); --kiru-text-subtle: var(--kiru-n200); --kiru-primary: var(--kiru-signal); --kiru-primary-hover: var(--kiru-signal-hover); --kiru-primary-ink: var(--kiru-signal-ink); --kiru-link: var(--kiru-signal); --kiru-logo: url('/assets/logo/kiru-lockup-color-400.png'); } /* ---- Tema claro ---- */ [data-theme="light"] { --kiru-bg: var(--kiru-l050); --kiru-surface: var(--kiru-l000); --kiru-surface-2: var(--kiru-l050); --kiru-surface-hover: #F4F1E9; --kiru-border: var(--kiru-l200); --kiru-border-strong: #CFC9B9; --kiru-text: var(--kiru-l900); --kiru-text-strong: var(--kiru-l900); --kiru-text-muted: var(--kiru-l500); --kiru-text-subtle: var(--kiru-l500); /* el verde señal no alcanza contraste sobre blanco: el primario pasa a teal */ --kiru-primary: var(--kiru-teal); --kiru-primary-hover: var(--kiru-teal-hover); --kiru-primary-ink: var(--kiru-bone); --kiru-link: #1F6E57; --kiru-success: #1F6E57; --kiru-logo: url('/assets/logo/kiru-lockup-teal-400.png'); } /* ============================================================ Primitivas mínimas — opcional, borrables si usan otra capa ============================================================ */ body { margin: 0; background: var(--kiru-bg); color: var(--kiru-text); font: var(--kiru-text-body); -webkit-font-smoothing: antialiased; } a { color: var(--kiru-link); text-decoration: none; } a:hover { color: var(--kiru-text-strong); } .kiru-eyebrow { font: var(--kiru-text-eyebrow); letter-spacing: var(--kiru-tracking-eyebrow); text-transform: uppercase; color: var(--kiru-text-muted); } .kiru-metric { font: var(--kiru-text-metric); font-variant-numeric: tabular-nums; } .kiru-display { font: var(--kiru-text-display); letter-spacing: var(--kiru-tracking-display); color: var(--kiru-text-strong); } .kiru-card { background: var(--kiru-surface); border: var(--kiru-border-width) solid var(--kiru-border); border-radius: var(--kiru-radius); } .kiru-btn { font-family: var(--kiru-font-sans); font-size: 0.875rem; font-weight: 600; height: var(--kiru-control-h); padding: 0 18px; border-radius: var(--kiru-radius); border: var(--kiru-border-width) solid transparent; cursor: pointer; transition: background var(--kiru-dur-fast) var(--kiru-ease), border-color var(--kiru-dur-fast) var(--kiru-ease), color var(--kiru-dur-fast) var(--kiru-ease); } .kiru-btn--primary { background: var(--kiru-primary); color: var(--kiru-primary-ink); } .kiru-btn--primary:hover { background: var(--kiru-primary-hover); } .kiru-btn--ghost { background: transparent; color: var(--kiru-text); border-color: var(--kiru-border-strong); } .kiru-btn--ghost:hover { border-color: var(--kiru-primary); color: var(--kiru-primary); } .kiru-btn--danger { background: transparent; color: var(--kiru-critical); border-color: var(--kiru-critical-line); } .kiru-btn--danger:hover { background: var(--kiru-critical-soft); } .kiru-btn:disabled { background: var(--kiru-surface-2); color: var(--kiru-text-muted); border-color: var(--kiru-border); cursor: not-allowed; } .kiru-input { font-family: var(--kiru-font-mono); font-size: 0.875rem; color: var(--kiru-text); background: var(--kiru-bg); border: var(--kiru-border-width) solid var(--kiru-border-strong); border-radius: var(--kiru-radius); height: var(--kiru-control-h); padding: 0 12px; width: 100%; box-sizing: border-box; } .kiru-input:focus { border-color: var(--kiru-primary); outline: none; } .kiru-input[aria-invalid="true"] { border-color: var(--kiru-critical); } .kiru-badge { font-family: var(--kiru-font-sans); font-size: 0.75rem; font-weight: 600; border-radius: var(--kiru-radius-sm); padding: 4px 10px; border: var(--kiru-border-width) solid transparent; } .kiru-badge--high { color: var(--kiru-critical); background: var(--kiru-critical-soft); border-color: var(--kiru-critical-line); } .kiru-badge--mid { color: var(--kiru-warning); background: var(--kiru-warning-soft); border-color: var(--kiru-warning-line); } .kiru-badge--ok { color: var(--kiru-success); background: var(--kiru-success-soft); border-color: var(--kiru-success-line); } .kiru-badge--off { color: var(--kiru-text-muted); background: var(--kiru-surface-2); border-color: var(--kiru-border); } /* Ítem activo de navegación: barra de 2px, nunca fondo de acento */ .kiru-nav-item { padding: 11px 16px; font-size: 0.875rem; color: var(--kiru-text-subtle); border-left: 2px solid transparent; } .kiru-nav-item:hover { background: var(--kiru-surface); color: var(--kiru-text-strong); } .kiru-nav-item[aria-current="page"] { background: var(--kiru-surface-2); color: var(--kiru-text-strong); font-weight: 600; border-left-color: var(--kiru-primary); } @media (prefers-reduced-motion: reduce) { * { transition-duration: 0ms !important; animation-duration: 0ms !important; } }