/* ============================================================================ TELOS - Design Tokens Identidad: Neomorfismo oscuro + Liquid Glass, luz dual oro/violeta. Paleta extraida por muestreo de pixeles de los assets oficiales. Fuente de verdad. No hardcodear colores fuera de este archivo. ========================================================================== */ :root { /* ---------- 1. TINTA / SUPERFICIES (azul-noche, nunca negro puro) ------- */ --tl-void: #07080C; /* fondo absoluto, fuera de tarjeta */ --tl-ink-900: #0B0E13; /* fondo de pagina */ --tl-ink-800: #0D1117; /* superficie base (dominante en el lockup) */ --tl-ink-700: #111721; --tl-ink-600: #151922; /* superficie elevada / neumorfismo base */ --tl-ink-500: #1A2233; /* superficie hundida / inset */ --tl-ink-400: #262833; --tl-ink-300: #2D3247; /* bordes solidos, divisores fuertes */ --tl-ink-200: #363F5B; /* divisores suaves */ --tl-ink-100: #504D56; /* texto deshabilitado */ /* ---------- 2. ORO - acento primario, luz superior-izquierda ----------- */ --tl-gold-core: #FCA70C; /* nucleo del rim light (maxima saturacion) */ --tl-gold-600: #E9A947; --tl-gold-500: #EFB644; /* acento UI por defecto */ --tl-gold-400: #F5D48A; --tl-gold-300: #FBEDBD; /* champan: texto sobre oscuro */ --tl-gold-200: #FCF3D4; /* perla del logotipo */ --tl-gold-100: #FEF8DA; /* highlight especular */ /* ---------- 3. VIOLETA - acento secundario, luz inferior-derecha ------- */ --tl-violet-core: #6214EC; /* nucleo del glow violeta */ --tl-violet-600: #7C3CEA; --tl-violet-500: #8882F5; /* acento UI */ --tl-violet-400: #A78BFA; --tl-violet-300: #C4B5FD; /* ---------- 4. INDIGO - puente entre los dos polos --------------------- */ --tl-indigo-700: #3E3E98; --tl-indigo-500: #6566B5; --tl-indigo-400: #767BE4; /* ---------- 5. TEXTO --------------------------------------------------- */ --tl-text-hi: #FEF8DA; /* titulos (champan, no blanco puro) */ --tl-text: #E4E7EF; /* cuerpo */ --tl-text-mid: #A9B0C4; /* secundario */ --tl-text-low: #6F7789; /* terciario / captions */ --tl-text-on-gold:#1A1204; /* texto sobre relleno oro */ /* Marfil: texto del sitio sobre obsidiana (brief: "negro obsidiana, marfil") */ --tl-ivory: #EFEAD9; /* cuerpo */ --tl-ivory-dim: #B4AE9E; /* secundario, eyebrows */ --tl-ivory-low: #7E7A70; /* notas, numeros, footer */ /* ---------- 6. SEMANTICOS (derivados, misma temperatura) --------------- */ --tl-success: #48D1A0; --tl-warning: var(--tl-gold-500); --tl-danger: #FF6B7A; --tl-info: var(--tl-violet-500); /* ---------- 7. RIM LIGHT DUAL - la firma de la marca ------------------- Todo borde luminoso va de ORO (135deg arriba-izq) a VIOLETA (abajo-der). */ --tl-rim: linear-gradient(135deg, var(--tl-gold-core) 0%, var(--tl-gold-400) 18%, #6E6BD6 52%, var(--tl-violet-core) 82%, #2A1560 100%); --tl-rim-soft: linear-gradient(135deg, rgba(252,167,12,.85) 0%, rgba(245,212,138,.35) 30%, rgba(136,130,245,.35) 70%, rgba(98,20,236,.85) 100%); --tl-eclipse: radial-gradient(120% 120% at 22% 12%, rgba(252,167,12,.20) 0%, rgba(252,167,12,0) 42%), radial-gradient(120% 120% at 82% 92%, rgba(98,20,236,.26) 0%, rgba(98,20,236,0) 46%); /* ---------- 8. LIQUID GLASS ------------------------------------------- */ --tl-glass-bg: linear-gradient(160deg, rgba(35,42,62,.58) 0%, rgba(13,17,23,.72) 55%, rgba(22,20,46,.66) 100%); --tl-glass-blur: blur(22px) saturate(165%); --tl-glass-blur-lg:blur(40px) saturate(180%); --tl-glass-border: rgba(255,255,255,.10); /* Menisco: brillo interno arriba + sombra interna abajo = grosor de vidrio */ --tl-glass-inset: inset 0 1px 0 0 rgba(255,255,255,.46), inset 0 -1px 0 0 rgba(98,20,236,.28), inset 0 16px 30px -18px rgba(255,255,255,.34), inset 0 -18px 34px -22px rgba(98,20,236,.36); --tl-specular: linear-gradient(105deg, rgba(255,255,255,0) 28%, rgba(255,255,255,.26) 44%, rgba(255,255,255,.06) 52%, rgba(255,255,255,0) 60%); /* ---------- 9. NEUMORFISMO OSCURO -------------------------------------- Luz a 135deg: claro arriba-izq, oscuro abajo-der. Base NUNCA #000. */ --tl-neu-bg: linear-gradient(145deg, #171C28 0%, #0E1219 100%); --tl-neu-bg-pressed: linear-gradient(145deg, #0C0F16 0%, #141925 100%); --tl-neu-thumb: linear-gradient(145deg, #232A3A 0%, #141924 100%); --tl-neu-light: rgba(255,255,255,.055); --tl-neu-shadow: rgba(0,0,0,.78); --tl-neu-raised: -8px -8px 18px var(--tl-neu-light), 10px 10px 24px var(--tl-neu-shadow); --tl-neu-raised-sm: -4px -4px 10px var(--tl-neu-light), 5px 5px 12px var(--tl-neu-shadow); --tl-neu-pressed: inset -6px -6px 14px rgba(255,255,255,.045), inset 7px 7px 16px rgba(0,0,0,.80); --tl-neu-flat: -2px -2px 6px rgba(255,255,255,.04), 3px 3px 8px rgba(0,0,0,.55); /* ---------- 10. GLOWS / ELEVACION -------------------------------------- */ --tl-glow-gold: 0 0 0 1px rgba(252,167,12,.28), 0 8px 34px -8px rgba(252,167,12,.42); --tl-glow-violet: 0 0 0 1px rgba(98,20,236,.34), 0 8px 34px -8px rgba(98,20,236,.52); --tl-glow-dual: -10px -10px 44px -14px rgba(252,167,12,.40), 12px 14px 48px -14px rgba(98,20,236,.52); --tl-shadow-1: 0 2px 8px rgba(0,0,0,.45); --tl-shadow-2: 0 10px 30px -10px rgba(0,0,0,.65); --tl-shadow-3: 0 26px 60px -20px rgba(0,0,0,.80); /* ---------- 11. RADIOS - squircle, siempre generoso -------------------- */ --tl-r-xs: 8px; --tl-r-sm: 12px; --tl-r-md: 18px; --tl-r-lg: 26px; --tl-r-xl: 34px; /* tarjetas grandes, igual que el icono */ --tl-r-pill: 999px; /* ---------- 12. TIPOGRAFIA --------------------------------------------- */ --tl-font-display: "Outfit", "Jost", "Futura", system-ui, sans-serif; --tl-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --tl-font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", monospace; /* Logotipo: ligero + tracking muy abierto. Es la firma tipografica. */ --tl-track-logo: .30em; --tl-track-tag: .22em; /* tagline */ --tl-track-eyebrow:.14em; --tl-fs-hero: clamp(2.6rem, 7vw, 5.5rem); --tl-fs-h1: clamp(2rem, 4.4vw, 3.4rem); --tl-fs-h2: clamp(1.5rem, 3vw, 2.2rem); --tl-fs-h3: 1.25rem; --tl-fs-body: 1rem; --tl-fs-sm: .875rem; --tl-fs-xs: .75rem; /* ---------- 13. ESPACIO / MOVIMIENTO ----------------------------------- */ --tl-sp-1: 4px; --tl-sp-2: 8px; --tl-sp-3: 12px; --tl-sp-4: 16px; --tl-sp-5: 24px; --tl-sp-6: 32px; --tl-sp-7: 48px; --tl-sp-8: 64px; --tl-sp-9: 96px; --tl-ease: cubic-bezier(.22,.61,.36,1); --tl-ease-glass: cubic-bezier(.34,1.36,.42,1); /* rebote liquido */ --tl-dur-fast: 140ms; --tl-dur: 260ms; --tl-dur-slow: 520ms; } /* ---------- Modo claro: "Daylight Glass" (opcional, secundario) --------- */ :root[data-theme="light"] { --tl-void: #EEEFF4; --tl-ink-900: #F4F5F8; --tl-ink-800: #FFFFFF; --tl-ink-700: #F0F2F7; --tl-ink-600: #EAECF2; --tl-ink-500: #E1E4EC; --tl-ink-400: #D7DBE5; --tl-ink-300: #CDD2DE; --tl-ink-200: #BFC5D4; --tl-text-hi: #14171F; --tl-text: #2A2F3B; --tl-text-mid:#5B6273; --tl-text-low:#8A91A1; --tl-ivory: #2B2A26; --tl-ivory-dim:#66625A; --tl-ivory-low:#8F8A80; --tl-glass-bg: linear-gradient(160deg, rgba(255,255,255,.78), rgba(240,242,248,.62)); --tl-glass-border: rgba(255,255,255,.85); --tl-glass-inset: inset 0 1px 0 0 rgba(255,255,255,.95), inset 0 -1px 0 0 rgba(98,20,236,.10), inset 0 16px 30px -20px rgba(255,255,255,.9); --tl-neu-bg: linear-gradient(145deg, #FFFFFF 0%, #E6E9F0 100%); --tl-neu-bg-pressed: linear-gradient(145deg, #E3E6EE 0%, #F3F4F8 100%); --tl-neu-thumb: linear-gradient(145deg, #FFFFFF 0%, #E9ECF3 100%); --tl-neu-light: rgba(255,255,255,.95); --tl-neu-shadow: rgba(23,27,40,.16); --tl-text-on-gold: #1A1204; }