/* ============================================================================ BYRO — Design Tokens v1.0 ============================================================================ Fuente de verdad visual de BYRO. Identidad: tech-premium · acento índigo · dark-first · glow sutil. REGLA DE ORO (ADR-018): NADA de color/medida se escribe a mano en los componentes. Todo lee estas variables. Esto permite: 1. Consistencia total (un cambio aquí se propaga a todo BYRO) 2. Theming por tenant (el acento se inyecta desde organizaciones.color_primario) 3. Light/dark mode con un solo árbol de tokens La tipografía es un token reemplazable: cambiar --font-sans = cambiar toda la tipografía de BYRO en 1 línea. Default: Geist. ============================================================================ */ :root { /* ---- Acento (DEFAULT BYRO; inyectable por tenant en Pro/Enterprise) ---- */ --byro-accent: #6366f1; --byro-accent-2: #818cf8; --byro-accent-rgb: 99, 102, 241; --byro-accent-hover: #5457e5; --byro-accent-press: #4649d4; /* ---- Neutros — escala oscura (dark-first) ---- */ --byro-bg: #0a0a0e; --byro-bg-elev: #101015; --byro-surface: #131318; --byro-surface-2: #17171e; --byro-surface-3: #1d1d26; --byro-border: #23232c; --byro-border-strong:#2e2e38; --byro-text: #ececf0; --byro-text-2: #b4b4c0; --byro-text-3: #86868f; --byro-text-disabled:#55555e; /* ---- Semánticos ---- */ --byro-ok: #34d399; --byro-ok-bg: rgba(52, 211, 153, .14); --byro-warn: #fbbf24; --byro-warn-bg: rgba(251, 191, 36, .14); --byro-danger: #f87171; --byro-danger-bg: rgba(248, 113, 113, .14); --byro-info: var(--byro-accent); --byro-info-bg: rgba(var(--byro-accent-rgb), .14); /* ---- Tipografía (token reemplazable) ---- */ --byro-font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --byro-font-mono: 'Geist Mono', 'SF Mono', ui-monospace, monospace; --byro-fs-xs: 11px; --byro-fs-sm: 12.5px; --byro-fs-base: 14px; --byro-fs-md: 15px; --byro-fs-lg: 18px; --byro-fs-xl: 22px; --byro-fs-2xl: 28px; --byro-fs-3xl: 36px; --byro-fw-light: 300; --byro-fw-regular: 400; --byro-fw-medium: 500; --byro-fw-semibold: 600; --byro-lh-tight: 1.15; --byro-lh-normal: 1.5; --byro-lh-relaxed: 1.7; /* ---- Espaciado (grid 4px) ---- */ --byro-sp-1: 4px; --byro-sp-2: 8px; --byro-sp-3: 12px; --byro-sp-4: 16px; --byro-sp-5: 20px; --byro-sp-6: 24px; --byro-sp-8: 32px; --byro-sp-10: 40px; --byro-sp-12: 48px; --byro-sp-16: 64px; /* ---- Radios ---- */ --byro-r-sm: 6px; --byro-r-md: 9px; --byro-r-lg: 13px; --byro-r-xl: 18px; --byro-r-full: 999px; /* ---- Sombras / profundidad ---- */ --byro-sh-sm: 0 1px 2px rgba(0, 0, 0, .3); --byro-sh-md: 0 4px 12px rgba(0, 0, 0, .35); --byro-sh-lg: 0 12px 32px rgba(0, 0, 0, .45); --byro-glow: 0 4px 20px rgba(var(--byro-accent-rgb), .4); /* ---- Transiciones ---- */ --byro-t-fast: .12s ease; --byro-t-base: .18s ease; } /* ============================================================================ LIGHT MODE ============================================================================ Se activa con o .theme-light en un contenedor. Solo redefine los neutros; el acento y el resto de tokens se heredan. El default de BYRO es oscuro (sin atributo). El usuario/tenant puede optar por claro. ============================================================================ */ [data-theme="light"], .theme-light { --byro-bg: #fbfbfd; --byro-bg-elev: #ffffff; --byro-surface: #ffffff; --byro-surface-2: #f4f4f7; --byro-surface-3: #ececf0; --byro-border: #e9e9ef; --byro-border-strong:#d7d7df; --byro-text: #16161c; --byro-text-2: #44444e; --byro-text-3: #71717a; --byro-text-disabled:#a8a8b0; --byro-sh-sm: 0 1px 2px rgba(0, 0, 0, .06); --byro-sh-md: 0 4px 12px rgba(0, 0, 0, .08); --byro-sh-lg: 0 12px 32px rgba(0, 0, 0, .12); --byro-glow: 0 4px 16px rgba(var(--byro-accent-rgb), .3); } /* ============================================================================ RESET MÍNIMO + BASE ============================================================================ */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; } body { background: var(--byro-bg); color: var(--byro-text); font-family: var(--byro-font-sans); font-size: var(--byro-fs-base); line-height: var(--byro-lh-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: var(--byro-accent-2); text-decoration: none; } a:hover { color: var(--byro-accent); } /* Datos numéricos, montos, IDs */ .byro-mono { font-family: var(--byro-font-mono); }