/* Lulabytes® — Design Tokens (Colors) Centraliza todos los colores importantes de la web. Modo de uso: - Importa este archivo primero en todas las páginas. - Usa SIEMPRE las variables semánticas (ej. var(--color-bg)) en lugar de las "rampas" directas. - Tema oscuro por defecto. Para tema claro añade [data-theme="light"] al . */ /* ============================= 0) Base ============================= */ :root { /* Tipografías */ --font-title: 'Orbitron', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; --font-body: 'Open Sans', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; /* Radii, sombras y bordes */ --radius-1: 8px; --radius-2: 12px; --radius-3: 16px; --shadow-1: 0 6px 24px rgba(0,0,0,.25); --border-1: 1px solid var(--color-grid); /* Escala de espaciado */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 56px; --space-10: 72px; } /* ============================= 1) Paleta (rampas) Nota: evita usar directamente estas rampas en componentes; usa los tokens semánticos de la sección 2. ============================= */ :root { /* Neutrales (oscuro por defecto) */ --neutral-950: #0e0f12; /* fondo principal */ --neutral-900: #10131a; --neutral-850: #0f1116; --neutral-800: #14161b; --neutral-750: #1a1d23; --neutral-700: #20242c; --neutral-650: #23262d; /* grid/bordes */ --neutral-600: #2b303a; --neutral-500: #3b4251; --neutral-400: #586072; --neutral-300: #76809a; --neutral-200: #9aa3b2; /* muted */ --neutral-100: #dfe7f3; --neutral-050: #eaecef; /* ink */ /* Marca (azules cian) */ --brand-100: #e5f7ff; --brand-300: #bfe8ff; --brand-500: #8fd3ff; /* brand principal */ --brand-700: #3d9cff; /* foco/hover */ --brand-900: #1c2735; /* Acento (verde menta) */ --accent-100: #e8fff6; --accent-300: #c2ffe6; --accent-500: #59ffa9; /* acento */ --accent-700: #11c877; --accent-900: #0c5b3b; /* Estado/alerta */ --danger-100: #ffe9ea; --danger-300: #ffc2c5; --danger-500: #ff6b6b; /* error */ --danger-700: #d64545; --danger-900: #5a1e1e; } /* ============================= 2) Tokens semánticos (usa estos) ============================= */ :root { /* Fondos y superficies */ --color-bg: var(--neutral-950); --color-surface: var(--neutral-800); --color-surface-2: var(--neutral-850); --color-grid: var(--neutral-650); /* Texto */ --color-text: var(--neutral-050); --color-muted: var(--neutral-200); --color-inverse: #0c0d10; /* Marca y acciones */ --color-brand: var(--brand-500); --color-brand-strong: var(--brand-700); --color-accent: var(--accent-500); --color-danger: var(--danger-500); /* Componentes comunes */ --btn-bg: linear-gradient(180deg, #1a1e26, #14161b); --btn-border: var(--brand-700); --card-bg: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)); } /* ============================= 3) Tema claro (opcional) Actívalo con: ============================= */ :root[data-theme="light"] { /* Neutrales para claro */ --neutral-050: #0f1320; /* se usa sólo como referencia inversa */ --neutral-100: #202433; --neutral-200: #2e3445; --neutral-300: #4a5368; --neutral-400: #616c86; --neutral-500: #7d89a6; --neutral-600: #aab4c8; --neutral-650: #c7d0de; /* grid claro */ --neutral-700: #d7deea; --neutral-750: #e6ebf3; --neutral-800: #eef2f8; --neutral-850: #f6f8fb; --neutral-900: #fafcff; --neutral-950: #ffffff; /* Reasignación semántica */ --color-bg: var(--neutral-950); --color-surface: #ffffff; --color-surface-2: #f6f8fb; --color-grid: var(--neutral-650); --color-text: #223; --color-muted: #5c6378; --color-inverse: #ffffff; --btn-bg: linear-gradient(180deg, #f9fbff, #eff3fa); --card-bg: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.01)); } /* ============================= 4) Helpers opcionales ============================= */ .lula-bg { background: var(--color-bg); color: var(--color-text); } .lula-surface { background: var(--color-surface); border: var(--border-1); border-radius: var(--radius-3); box-shadow: var(--shadow-1); } .lula-grid { border-color: var(--color-grid); } .lula-muted { color: var(--color-muted); } .lula-brand { color: var(--color-brand); } .lula-accent { color: var(--color-accent); } .lula-danger { color: var(--color-danger); } /* ============================= 5) Ejemplo de aplicación (no obligatorio) ============================= */ body { background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); } h1,h2,h3 { font-family: var(--font-title); } .card { background: var(--card-bg); border: var(--border-1); border-radius: var(--radius-3); } .button { background: var(--btn-bg); border: 1px solid var(--color-grid); color: var(--color-text); border-radius: var(--radius-2); padding: 10px 14px; } .button.primary { border-color: var(--btn-border); }