/* ========================================================================== Kamaleon – tokens.css Propósito: sistema de diseño global (colores, tipografías, ritmos, sombras) Se importa primero en todas las páginas. ========================================================================== */ /* ----------------------------- 1) Variables de color (logo + fondo negro) ----------------------------- */ :root { /* Base */ --bg: #0a0a0a; /* fondo negro */ --surface: #101214; /* superficies (tarjetas/nav) */ --surface-2: #0d0f10; /* superficies profundas */ --border: #1a1f23; /* bordes sutiles */ --text: #e8f1ea; /* texto principal claro con tinte verdoso */ --muted: #a5b1aa; /* texto secundario */ /* Paleta verde (inspirada en el logo) */ --green-300: #92e48f; --green-400: #5ed66d; --green-500: #2fb24c; /* principal */ --green-600: #239043; --accent: #8df5c0; /* destellos/gradientes suaves */ /* Estados */ --info: #4db2ff; --warning: #f0b429; --danger: #f85f6a; /* Sombras y bordes */ --shadow: 0 10px 30px rgba(0,0,0,.35); --r-sm: 10px; --r: 16px; --r-lg: 22px; /* Tipografía y ritmo */ --font: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, sans-serif; --step--1: 0.875rem; --step-0: 1rem; --step-1: 1.125rem; --step-2: 1.375rem; --step-3: 1.75rem; --step-4: 2.25rem; /* Layout */ --max: 1200px; /* ancho de contenido */ --gap: 16px; /* separación estándar */ --gap-lg: 28px; /* Transiciones */ --ease: cubic-bezier(.22,1,.36,1); --speed: .2s; } /* ----------------------------- 2) Reset mínimo y bases tipográficas ----------------------------- */ * { box-sizing: border-box; } html, body { height: 100%; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: var(--step-0); line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, svg, video, canvas { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } a:hover { opacity: .95; } button, input, select, textarea { font: inherit; color: inherit; background: none; border: none; outline: none; } /* ----------------------------- 3) Utilidades globales ----------------------------- */ .container { max-width: var(--max); margin: 0 auto; padding: 0 20px; } .hide { display: none !important; } .muted { color: var(--muted); } .border { border: 1px solid var(--border); border-radius: var(--r); } .surface { background: var(--surface); border: 1px solid var(--border); } /* Tipos rápidos */ .h1 { font-size: var(--step-4); font-weight: 700; } .h2 { font-size: var(--step-3); font-weight: 700; } .h3 { font-size: var(--step-2); font-weight: 600; } /* ----------------------------- 4) Preferencias de usuario (accesibilidad) ----------------------------- */ @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } /* ----------------------------- 5) Notas - Cargar Google Fonts (Poppins) en el de los HTML. - Los colores se refinan luego si el cliente pide variantes. ----------------------------- */