/** * SISTEMA DE DISEÑO LENGANTO (Design System v1.0) * Arquitectura de tokens en 3 capas: * 1. Primitivos (Primitive) * 2. Semánticos (Semantic) * 3. Componentes y compatibilidad (Component & Aliases) */ :root { /* ═════════════════════════════════════════════════════════════════════════ 1. TOKENS PRIMITIVOS (Primitive Layer - Valores Crudos) ═════════════════════════════════════════════════════════════════════════ */ /* Colores de marca y funcionales */ --primitive-blue-600: #0A6FC4; --primitive-blue-500: #0D7CD9; --primitive-blue-400: #38BDF8; --primitive-petroleo-900: #071A1E; --primitive-petroleo-800: #0A3038; --primitive-petroleo-700: #0D5D7C; --primitive-petroleo-600: #15404A; --primitive-petroleo-500: #1B8A5A; --primitive-petroleo-400: #1F6A58; --primitive-petroleo-300: #257A66; --primitive-violet-500: #7C5CFF; --primitive-amber-500: #E9B13D; --primitive-red-600: #A8231A; --primitive-red-500: #FA3C14; --primitive-red-400: #C5362B; /* Superficies y Neutros (Dark theme) */ --primitive-gray-950: #05080D; --primitive-gray-900: #080D15; --primitive-gray-850: #0C131D; --primitive-gray-800: #10232A; --primitive-gray-100: #EAF2FA; --primitive-white: #FFFFFF; /* Escala de Radio (Border-Radius Modular) */ --primitive-radius-xs: 4px; --primitive-radius-sm: 8px; --primitive-radius-md: 12px; --primitive-radius-lg: 18px; --primitive-radius-xl: 28px; --primitive-radius-pill: 9999px; /* Escala Tipográfica Modular (Minor Third - Base 16px) */ --primitive-text-xs: 0.75rem; /* 12px */ --primitive-text-sm: 0.875rem; /* 14px */ --primitive-text-base: 1.000rem; /* 16px */ --primitive-text-lg: 1.125rem; /* 18px */ --primitive-text-xl: 1.250rem; /* 20px */ --primitive-text-2xl: 1.500rem; /* 24px */ --primitive-text-3xl: 2.000rem; /* 32px */ --primitive-text-4xl: 2.500rem; /* 40px */ --primitive-text-hero: clamp(2.25rem, 5vw, 4.5rem); /* Escala de Espaciado (Base 4/8) */ --primitive-space-1: 4px; --primitive-space-2: 8px; --primitive-space-3: 12px; --primitive-space-4: 16px; --primitive-space-5: 20px; --primitive-space-6: 24px; --primitive-space-8: 32px; --primitive-space-10: 40px; --primitive-space-12: 48px; --primitive-space-16: 64px; /* Curvas de Animación y Transición */ --primitive-ease-smooth: cubic-bezier(0.22, 0.61, 0.36, 1); --primitive-ease-spring: cubic-bezier(0.34, 1.4, 0.44, 1); --primitive-duration-fast: 180ms; --primitive-duration-base: 300ms; --primitive-duration-slow: 600ms; /* ═════════════════════════════════════════════════════════════════════════ 2. TOKENS SEMÁNTICOS (Semantic Layer - Propósito y Roles) ═════════════════════════════════════════════════════════════════════════ */ /* Superficies de Canvas y Tarjetas */ --surface-canvas: var(--primitive-gray-950); --surface-canvas-elevated: var(--primitive-gray-900); --surface-canvas-deep: var(--primitive-gray-850); --surface-portal: var(--primitive-gray-800); --surface-card: rgba(255, 255, 255, 0.055); --surface-card-hover: rgba(255, 255, 255, 0.09); --surface-card-border: rgba(255, 255, 255, 0.10); --surface-glass-tint-top: rgba(255, 255, 255, 0.38); --surface-glass-tint-bottom:rgba(255, 255, 255, 0.54); --surface-glass-edge: rgba(255, 255, 255, 0.34); --surface-glass-blur: blur(38px) saturate(88%) brightness(1.46); /* Texto */ --text-primary: var(--primitive-gray-100); --text-secondary: rgba(234, 242, 250, 0.72); --text-muted: rgba(234, 242, 250, 0.50); --text-glass: var(--primitive-petroleo-800); --text-glass-muted: var(--primitive-petroleo-600); /* Acciones y Estados de Marca */ --action-primary: var(--primitive-blue-600); --action-primary-hover: var(--primitive-blue-500); --action-primary-vibrant: var(--primitive-blue-400); --action-accent: var(--primitive-petroleo-400); --action-accent-hover: var(--primitive-petroleo-300); /* Estados Funcionales */ --color-success: var(--primitive-petroleo-500); --color-danger: var(--primitive-red-600); --color-danger-border: var(--primitive-red-400); --color-warning: var(--primitive-amber-500); --color-accent-violet: var(--primitive-violet-500); /* Bordes */ --border-subtle: rgba(255, 255, 255, 0.10); --border-field: rgba(12, 44, 71, 0.72); --border-field-strong: rgba(12, 44, 71, 0.82); /* Foco */ --focus-ring-blue: 0 0 0 2px var(--primitive-blue-400); --focus-ring-glass: rgba(31, 106, 88, 0.22); /* ═════════════════════════════════════════════════════════════════════════ 3. COMPONENTES Y ALIASES DE COMPATIBILIDAD ═════════════════════════════════════════════════════════════════════════ */ /* Tipografía base */ --font-ui: "Montserrat", Calibri, system-ui, -apple-system, sans-serif; /* Compatibilidad directa con tokens de Landing (index.html) */ --petroleo: var(--primitive-petroleo-700); --azul: var(--primitive-blue-600); --azul-vivo: var(--primitive-blue-400); --violeta: var(--primitive-violet-500); --ladrillo: var(--primitive-red-500); --verde: var(--primitive-petroleo-500); --ambar: var(--primitive-amber-500); --tinta: var(--surface-canvas); --tinta-2: var(--surface-canvas-elevated); --tinta-3: var(--surface-canvas-deep); --vidrio: var(--surface-card); --vidrio-borde: var(--surface-card-border); --texto: var(--text-primary); --texto-2: var(--text-secondary); --texto-3: var(--text-muted); --radio: var(--primitive-radius-lg); --radio-l: var(--primitive-radius-xl); --ancho: 1200px; --nav-alto: 74px; --suave: var(--primitive-ease-smooth); --resorte: var(--primitive-ease-spring); /* Compatibilidad directa con tokens de Portal (style.css) */ --glass-ink: var(--text-glass); --glass-ink-muted: var(--text-glass-muted); --glass-tint-top: var(--surface-glass-tint-top); --glass-tint-bottom: var(--surface-glass-tint-bottom); --glass-blur: var(--surface-glass-blur); --glass-edge: var(--surface-glass-edge); --brand-band: linear-gradient(150deg, #1a4568 0%, #0f3d4e 48%, #061a2e 100%); --accent: var(--action-accent); --accent-hover: var(--action-accent-hover); --field-border: var(--border-field); --field-border-strong: var(--border-field-strong); --field-bg: rgba(255, 255, 255, 0.3); --field-bg-hover: rgba(255, 255, 255, 0.42); --field-bg-focus: rgba(255, 255, 255, 0.66); --danger: var(--color-danger); --danger-border: var(--color-danger-border); --focus-ring: var(--focus-ring-glass); --panel-radius: 14px; --panel-shadow: 0 30px 70px rgba(0, 8, 18, 0.34), 0 8px 24px rgba(0, 8, 18, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(255, 255, 255, 0.12); --panel-width-login: 336px; --panel-width-app: 520px; --stack-width: 520px; --login-bg-overlay: rgba(7, 26, 30, 0.22); --tap: 44px; }