/* ============================================================ ReCoIn · Design Tokens v1.0 Remote Control Intelligence ------------------------------------------------------------ Extraído de la webapp en producción (app.recoin.es) y unificado con la superficie de marca (recoin.es). Uso: Todo componente ReCoIn debe consumir estas variables. Nunca escribir un hex literal fuera de este archivo. ============================================================ */ :root { /* --------------------------------------------------------- 1 · SUPERFICIE SIGNAL (app, kiosk, paneles operativos) Negro puro. La pantalla es un instrumento, no un folleto. --------------------------------------------------------- */ --rc-bg: #0A0A0A; /* lienzo de la app */ --rc-surface: #111111; /* card / fila */ --rc-surface-2: #161616; /* card elevada / hover */ --rc-surface-3: #1C1C1C; /* input / control pulsado */ --rc-line: #252525; /* borde visible */ --rc-line-soft: #1A1A1A; /* separador interno */ /* --------------------------------------------------------- 2 · SUPERFICIE BRAND (web comercial, dossier, propuestas) Verde-petróleo casi negro. Misma familia, más cálida. --------------------------------------------------------- */ --rc-brand-bg: #111A1D; --rc-brand-surface: #162226; --rc-brand-line: #24333A; /* --------------------------------------------------------- 3 · TEXTO --------------------------------------------------------- */ --rc-text: #F0F0F0; /* titulares y valores 17.4:1 AAA */ --rc-text-2: #8B8B8B; /* descripción, subtítulo 5.8:1 AA */ --rc-text-3: #818181; /* labels 11px 4.6:1 AA */ --rc-text-4: #6E6E6E; /* metadato decorativo 3.9:1 */ --rc-text-off: #4B4B4B; /* deshabilitado, apagado */ --rc-cream: #FFFDF4; /* texto/logo sobre oscuro 19.4:1 AAA*/ /* --------------------------------------------------------- 3b · INK — color del logotipo Solo sobre fondo claro. Sobre #0A0A0A da 1.74:1: invisible. Sobre Signal o Brand el logo va SIEMPRE en --rc-cream. --------------------------------------------------------- */ --rc-ink: #2F3C42; /* logo sobre claro 11.4:1 AAA */ /* --------------------------------------------------------- 4 · SIGNAL GREEN — "está vivo y funciona" Estado OK, conexión, energía, ingresos, elemento activo. Nunca se usa para dinero cobrado ni para decorar. --------------------------------------------------------- */ --rc-signal: #00E5A0; --rc-signal-hi: #4DFFC4; /* hover / foco */ --rc-signal-mid: #0D8F65; /* iconografía secundaria */ --rc-signal-line: #0D664B; /* borde de badge activo */ --rc-signal-bg: #132F26; /* relleno de badge activo */ --rc-signal-wash: #09251C; /* fondo de bloque destacado */ /* --------------------------------------------------------- 5 · CREDIT AMBER — "aquí hay dinero o hay que mirar" Crédito, precio, coste, tarifa, puerta abierta, pendiente. Es el color comercial de ReCoIn en la web de marca. --------------------------------------------------------- */ --rc-amber: #F5A623; --rc-amber-hi: #FFC061; --rc-amber-mid: #B87616; --rc-amber-line: #766329; --rc-amber-bg: #2A2317; --rc-amber-wash: #1A1813; /* --------------------------------------------------------- 6 · ALERT RED — "algo va mal o es irreversible" Fugas, humo, fallo de máquina, borrar cuenta. --------------------------------------------------------- */ --rc-alert: #EF4444; --rc-alert-hi: #FF7070; --rc-alert-line: #8F1A1B; --rc-alert-bg: #251111; --rc-alert-wash: #1A0C0C; /* --------------------------------------------------------- 7 · TIPOGRAFÍA 3 roles. Ninguna cuarta familia entra en el sistema. --------------------------------------------------------- */ --rc-font-display: 'Bebas Neue', 'Barlow Condensed', sans-serif; --rc-font-ui: 'Barlow', -apple-system, 'Segoe UI', sans-serif; --rc-font-data: 'JetBrains Mono', 'SF Mono', 'Consolas', monospace; /* Escala — el salto 11 → 15 → 32 es intencional: etiqueta, objeto, magnitud. Nada vive entre medias. */ --rc-fs-micro: 10px; --rc-fs-label: 11px; --rc-fs-sm: 13px; --rc-fs-body: 15px; --rc-fs-lg: 18px; --rc-fs-data: 22px; --rc-fs-hero: 32px; --rc-fs-mega: 48px; --rc-fs-giga: 72px; --rc-lh-tight: 1.1; --rc-lh-ui: 1.35; --rc-lh-read: 1.6; --rc-ls-label: 0.14em; /* labels uppercase mono */ --rc-ls-micro: 0.18em; /* eyebrow de sección */ --rc-ls-display:0.02em; --rc-fw-normal: 400; --rc-fw-med: 500; --rc-fw-semi: 600; /* --------------------------------------------------------- 8 · GEOMETRÍA — base 4px --------------------------------------------------------- */ --rc-sp-1: 4px; --rc-sp-2: 8px; --rc-sp-3: 12px; --rc-sp-4: 16px; --rc-sp-5: 24px; --rc-sp-6: 32px; --rc-sp-7: 48px; --rc-sp-8: 64px; --rc-r-sm: 4px; /* botón compacto, chip de estado */ --rc-r-md: 6px; /* botón, input */ --rc-r-lg: 8px; /* card, fila de máquina */ --rc-r-xl: 12px; /* módulo de la web de marca */ --rc-r-pill: 999px; /* filtro, tab de contabilidad */ --rc-bw: 1px; --rc-row-h: 56px; /* alto mínimo de fila de máquina */ --rc-nav-h: 64px; /* barra inferior */ --rc-tap: 44px; /* área táctil mínima */ --rc-max-w: 1200px; /* --------------------------------------------------------- 9 · ELEVACIÓN Y LUZ La única "sombra" del sistema es un halo de color: en un fondo negro puro, la luz viene del propio estado. --------------------------------------------------------- */ --rc-glow-signal: 0 0 0 1px var(--rc-signal-line), 0 0 24px -6px rgba(0,229,160,.45); --rc-glow-amber: 0 0 0 1px var(--rc-amber-line), 0 0 24px -6px rgba(245,166,35,.40); --rc-glow-alert: 0 0 0 1px var(--rc-alert-line), 0 0 24px -6px rgba(239,68,68,.40); --rc-focus: 0 0 0 2px var(--rc-bg), 0 0 0 4px var(--rc-signal); /* --------------------------------------------------------- 10 · MOVIMIENTO Rápido y seco. Una máquina responde, no se desliza. --------------------------------------------------------- */ --rc-t-fast: 120ms cubic-bezier(.4,0,.2,1); --rc-t-base: 180ms cubic-bezier(.4,0,.2,1); --rc-t-slow: 320ms cubic-bezier(.2,0,0,1); } /* ============================================================ PRIMITIVAS ============================================================ */ /* --- Label / eyebrow: el conector de todo el sistema ------- */ .rc-label { font-family: var(--rc-font-data); font-size: var(--rc-fs-label); font-weight: var(--rc-fw-med); letter-spacing: var(--rc-ls-label); text-transform: uppercase; color: var(--rc-text-3); } /* --- Cifra: siempre tabular, nunca "salta" al actualizarse -- */ .rc-data { font-family: var(--rc-font-data); font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; letter-spacing: -0.01em; } /* --- Logotipo: monocromo siempre -------------------------- Nunca verde señal, nunca ámbar, nunca degradado ni sombra. Si hay que indicar que el sistema está vivo, el punto verde va AL LADO del logo, nunca dentro. Área de respeto: X = altura de caja / 4, un módulo por lado. Mínimos: isotipo 32px · wordmark 28px de alto de caja. Por debajo de 32px se usa el monograma R. */ .rc-logo { display:block; height:auto; } .rc-logo--min-iso { min-height: 32px; } .rc-logo--min-word { min-height: 28px; } .rc-logo-lockup { display:inline-flex; align-items:center; gap:12px; } /* --- Scanline: textura de marca, opcional y muy sutil ------ */ .rc-scanline { position: relative; } .rc-scanline::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient( to bottom, rgba(255,255,255,.020) 0 1px, transparent 1px 3px ); } /* --- Punto de estado vivo (elemento firma) ----------------- */ .rc-pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--rc-signal); box-shadow: 0 0 8px var(--rc-signal); animation: rc-breathe 2.4s ease-in-out infinite; } @keyframes rc-breathe { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.82); } } @media (prefers-reduced-motion: reduce) { .rc-pulse { animation: none; } * { transition-duration: 1ms !important; } } /* --- Foco visible: obligatorio en todo control ------------- */ .rc-focusable:focus-visible { outline: none; box-shadow: var(--rc-focus); }