/* ============================================ KORDHUB — tokens.css (Edición Definitiva) Paleta macOS / Zinc Clean — Optimizado para Sidebar & Cards ============================================ */ @import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800&family=IBM+Plex+Mono:wght@400;500;600&display=swap'); :root { /* ---- Acento y Marca (Slate Oscuro de Alto Impacto) ---- */ --accent: #0F172A; --accent-rgb: 15, 23, 42; --accent-hover: #1E293B; --accent-subtle: rgba(15, 23, 42, 0.05); --accent-border: rgba(15, 23, 42, 0.12); /* ---- Marca (Discord Blurple) ---- [FIX] Separado de --accent. --accent es el color de la UI en general (botones, bordes, focus) — ahora slate. --brand es el guiño puntual a "esto es para Discord": logo, eyebrows, charts de datos, badges destacados. Úsalo con intención en pocos lugares, no como reemplazo de --accent. */ --brand: #5865F2; --brand-rgb: 88, 101, 242; --brand-hover: #4752D8; --brand-subtle: rgba(88, 101, 242, 0.10); --brand-border: rgba(88, 101, 242, 0.28); /* ---- Botones de Acción Principal ---- */ --action-primary-bg: #0F172A; --action-primary-text: #FFFFFF; --action-primary-hover: #1E293B; /* ---- Fondo y Superficies (FIX SIDEBAR) ---- */ --bg: #F8F9FA; /* Canvas principal gris neutro muy suave */ --bg-sidebar: #F1F3F5; /* Sidebar sutilmente separada del canvas */ --bg-elevated: #FFFFFF; /* Cards en blanco puro con shadow flotante */ --surface: #FFFFFF; --surface-2: #F8F9FA; --surface-3: #E9ECEF; /* Hover general */ --surface-faint: #FAFAFA; --surface-header: rgba(248, 249, 250, 0.85); /* ---- Tokens Específicos para el ASIDE (Sidebar) ---- Esto es lo que faltaba para darle vida a la barra lateral */ --sidebar-text: #475569; /* Texto inactivo bien legible */ --sidebar-text-hover: #0F172A; /* Texto al pasar el mouse */ --sidebar-item-hover: #E2E8F0; /* Fondo al hacer hover en la sidebar */ /* Item Activo en la Sidebar (Estilo Mac App) */ --sidebar-active-bg: #FFFFFF; /* Tarjeta blanca limpia para el seleccionado */ --sidebar-active-text: #0F172A; /* Texto negro bold */ --sidebar-active-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04); /* ---- Bordes de Precisión (Crisp Lines) ---- */ --hair: rgba(0, 0, 0, 0.07); --border-subtle: rgba(0, 0, 0, 0.04); --border-default: rgba(0, 0, 0, 0.08); --border-strong: rgba(0, 0, 0, 0.16); --border-hover: rgba(0, 0, 0, 0.22); /* ---- Texto Nítido ---- */ --text-primary: #0F172A; /* Slate Oscuro nítido */ --text-secondary: #475569; /* Secundario legible */ --text-muted: #64748B; /* Metadatos / Headers de la sidebar (MAIN MENU) */ --text-muted-rgb: 100, 116, 139; --text-faint: #94A3B8; --text-dim: #CBD5E1; /* ---- Estados Semánticos ---- */ --success: #10B981; --success-rgb: 16, 185, 129; --success-text: #059669; --success-subtle: rgba(16, 185, 129, 0.10); --warning: #F59E0B; --warning-rgb: 245, 158, 11; --warning-text: #D97706; --warning-subtle: rgba(245, 158, 11, 0.10); --danger: #EF4444; --danger-rgb: 239, 68, 68; --danger-text: #DC2626; --danger-subtle: rgba(239, 68, 68, 0.10); /* ---- Colores Oficiales de Plataformas ---- */ --discord: #5865F2; --discord-rgb: 88, 101, 242; --discord-subtle: rgba(88, 101, 242, 0.10); --telegram: #26A5E4; --telegram-rgb: 38, 165, 228; --telegram-subtle: rgba(38, 165, 228, 0.10); --slack: #E01E5A; --slack-rgb: 224, 30, 90; --slack-subtle: rgba(224, 30, 90, 0.10); /* ---- Tipografía ---- [FIX] -apple-system iba PRIMERO en el stack — en cualquier Mac o iPhone (gran parte del tráfico dev/trading) el navegador nunca llegaba a pedir Instrument Sans, mostraba San Francisco del sistema. La fuente "de marca" que se importa arriba estaba siendo invisible en la práctica. Ahora Instrument Sans va primero de verdad, con el sistema como fallback real (fuentes no soportadas / bloqueo de red), no como el que siempre gana. */ --font-body: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif; --font-display: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif; --font-mono: 'IBM Plex Mono', monospace; /* ---- Radios Tipo Mac App ---- */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-pill: 999px; /* ---- Sistema de Sombras en Capas ---- [NEW] Pulido "enterprise": en vez de un solo box-shadow plano, Stripe/Linear apilan 2-3 sombras (una de contacto muy cerca + una difusa más lejos) para simular profundidad real, no un cuadro con blur genérico. Se usan en cards, botones y modales. */ --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 2px 4px rgba(15, 23, 42, 0.04); --shadow-md: 0 2px 4px rgba(15, 23, 42, 0.04), 0 8px 16px -4px rgba(15, 23, 42, 0.07); --shadow-lg: 0 4px 8px rgba(15, 23, 42, 0.04), 0 16px 32px -8px rgba(15, 23, 42, 0.10); --shadow-xl: 0 8px 16px rgba(15, 23, 42, 0.05), 0 28px 56px -12px rgba(15, 23, 42, 0.16); /* Halo de color para elementos sobre fondo de marca (botones, badge activo) */ --shadow-brand-glow: 0 8px 20px -6px rgba(var(--brand-rgb), 0.35); --shadow-accent-glow: 0 8px 24px -8px rgba(var(--accent-rgb), 0.28); /* ---- Gradientes de Marca ---- [NEW] --accent ya no se usa plano en superficies grandes; se reserva un gradiente sutil de 2 stops (mismo tono, distinta luminosidad) para botones primarios, headline destacado y el plan "featured" de precios — la textura que hace que un panel oscuro no se vea como un
. */ --accent-gradient: linear-gradient(180deg, #1E293B 0%, #0B1220 100%); --accent-gradient-hover: linear-gradient(180deg, #263449 0%, #111C2E 100%); --brand-gradient: linear-gradient(135deg, #6872F5 0%, #4F46E5 100%); --surface-gradient: linear-gradient(180deg, #FFFFFF 0%, #FCFCFD 100%); /* ---- Textura de Fondo (grano/grid) ---- [NEW] Stripe nunca deja un fondo 100% liso en secciones grandes — siempre hay una malla o ruido casi imperceptible detrás del gradiente. Un solo tono de línea muy tenue, reusable como background-image en cualquier sección. */ --grid-line: rgba(15, 23, 42, 0.045); --noise-opacity: 0.035; }