/* tulnk brand tokens - v1 Fuente unica de design tokens: --tulnk-ink, --tulnk-acid, etc. Cargado en render_shell() antes que app.css. */ :root { --tulnk-ink: #080A0F; --tulnk-graphite: #151923; --tulnk-slate: #525866; --tulnk-bone: #F7F3E8; --tulnk-fog: #E7E2D7; --tulnk-acid: #C9FF3D; --tulnk-cyan: #16E6D0; --tulnk-blue: #3B5BFF; --tulnk-coral: #FF5A66; --tulnk-radius-sm: 14px; --tulnk-radius-md: 22px; --tulnk-radius-lg: 34px; --tulnk-shadow: 0 22px 70px rgba(8, 10, 15, .18); --tulnk-gradient-signal: linear-gradient(135deg, var(--tulnk-acid), var(--tulnk-cyan) 52%, var(--tulnk-blue)); --tulnk-gradient-night: radial-gradient(circle at 20% 20%, rgba(201,255,61,.18), transparent 28%), radial-gradient(circle at 82% 18%, rgba(59,91,255,.28), transparent 34%), #080A0F; --tulnk-font-display: 'Space Grotesk', 'Manrope', system-ui, sans-serif; --tulnk-font-ui: 'Manrope', Inter, system-ui, sans-serif; --tulnk-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --tulnk-display: var(--tulnk-font-display); --tulnk-ui: var(--tulnk-font-ui); --tulnk-mono: var(--tulnk-font-mono); } /* Modo claro opcional del panel de admin/app (no afecta perfiles publicos). Se activa con o via preferencia del sistema cuando el usuario no ha elegido tema. */ :root[data-theme="light"] { --tulnk-ink: #F7F3E8; --tulnk-graphite: #EFE9DC; --tulnk-slate: #676159; --tulnk-bone: #080A0F; --tulnk-fog: #151923; --tulnk-acid: #C9FF3D; --tulnk-cyan: #08D4C4; --tulnk-blue: #2847FF; --tulnk-coral: #FF5A66; --tulnk-shadow: 0 22px 70px rgba(247, 243, 232, .20); } @media (prefers-color-scheme: light) { :root:not([data-theme]) { --tulnk-ink: #F7F3E8; --tulnk-graphite: #EFE9DC; --tulnk-slate: #676159; --tulnk-bone: #080A0F; --tulnk-fog: #151923; --tulnk-shadow: 0 22px 70px rgba(247, 243, 232, .20); } } * { box-sizing: border-box; } body { margin: 0; background: var(--tulnk-bone); color: var(--tulnk-ink); font-family: var(--tulnk-font-ui); } .tulnk-button { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 24px; border: 0; border-radius: 999px; background: var(--tulnk-acid); color: var(--tulnk-ink); font-weight: 800; letter-spacing: -.01em; box-shadow: 0 14px 34px rgba(201,255,61,.25); cursor: pointer; } .tulnk-button--dark { background: var(--tulnk-ink); color: var(--tulnk-bone); box-shadow: var(--tulnk-shadow); } .tulnk-button--ghost { background: transparent; color: currentColor; border: 1px solid rgba(8,10,15,.16); box-shadow: none; } .tulnk-card { border: 1px solid rgba(8,10,15,.10); border-radius: var(--tulnk-radius-lg); background: rgba(255,255,255,.55); box-shadow: var(--tulnk-shadow); } .tulnk-link-card { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 62px; padding: 12px 14px; border-radius: 20px; background: #fff; border: 1px solid rgba(8,10,15,.08); color: var(--tulnk-ink); font-weight: 800; text-decoration: none; } .tulnk-dot { width: 12px; height: 12px; border-radius: 999px; background: var(--tulnk-gradient-signal); } .tulnk-kicker { font-family: var(--tulnk-font-mono); font-weight: 600; text-transform: uppercase; letter-spacing: .10em; color: var(--tulnk-slate); } .tulnk-display { font-family: var(--tulnk-font-display); letter-spacing: -.07em; line-height: .91; }