/* GENERADO por `npm run portada` desde krmen/.jos/_template/tokens/aurora.css — NO EDITAR AQUÍ */ /* ============================================================ * KRMEN Aurora Design Tokens v1.1.0 (Ultra Premium Minimalist) * Auto-generated from aurora.json — DO NOT EDIT DIRECTLY * ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap'); :root { /* ── Colors (Elegant Dark) ────────────────────────────── */ --krmen-bg: #050507; --krmen-bg-elevated: #0a0a0e; --krmen-surface: rgba(18, 18, 24, 0.6); --krmen-surface-alt: rgba(12, 12, 16, 0.4); --krmen-glass: rgba(255, 255, 255, 0.02); --krmen-glass-hover: rgba(255, 255, 255, 0.05); --krmen-glass-purple: rgba(108, 58, 237, 0.05); --krmen-border: rgba(255, 255, 255, 0.05); --krmen-border-purple: rgba(108, 58, 237, 0.15); --krmen-text: rgba(255, 255, 255, 0.95); --krmen-text-muted: rgba(255, 255, 255, 0.5); --krmen-text-slate: #8B949E; --krmen-accent-cyan: #00d4aa; --krmen-accent-purple: #6C3AED; --krmen-accent-purple-light: #8b5cf6; --krmen-accent-purple-glow: #a78bfa; --krmen-accent-gold: #C2A878; --krmen-accent-cyan-glow: #22D3EE; --krmen-danger: #EF4444; --krmen-success: #10B981; --krmen-success-light: #4ade80; /* ── Gradients (Subtle) ────────────────────────────────── */ --krmen-gradient: linear-gradient(135deg, #00d4aa, #6C3AED); --krmen-gradient-alt: linear-gradient(135deg, #00d4aa, #8b5cf6); --krmen-gradient-gold: linear-gradient(135deg, #C2A878, #997a00); --krmen-gradient-stripe: linear-gradient(135deg, rgba(255,255,255,0.05), transparent); --krmen-gradient-checkout: linear-gradient(180deg, rgba(20,25,30,0.98), rgba(10,12,16,0.98)); --krmen-aurora-top: radial-gradient(ellipse 100% 80% at 50% -30%, rgba(0,212,170,0.08), transparent 60%); --krmen-aurora-right: radial-gradient(ellipse 80% 60% at 100% 20%, rgba(139,92,246,0.08), transparent 50%); --krmen-aurora-left: radial-gradient(ellipse 60% 40% at 0% 80%, rgba(59,130,246,0.05), transparent 40%); /* ── Typography (Refined) ──────────────────────────────── */ --krmen-font-sans: 'Inter', system-ui, -apple-system, sans-serif; --krmen-font-mono: 'JetBrains Mono', 'Fira Code', monospace; /* ── Spacing (Airy) ────────────────────────────────────── */ --krmen-space-xs: 0.25rem; --krmen-space-sm: 0.75rem; --krmen-space-md: 1.5rem; --krmen-space-lg: 2rem; --krmen-space-xl: 3rem; --krmen-space-2xl: 5rem; /* ── Border Radii (Elegant Curves) ─────────────────────── */ --krmen-radius-sm: 4px; --krmen-radius-md: 8px; --krmen-radius-lg: 12px; --krmen-radius-xl: 16px; --krmen-radius-card: 20px; --krmen-radius-card-lg: 24px; --krmen-radius-pill: 9999px; /* ── Shadows & Glows (Soft) ────────────────────────────── */ --krmen-glow-cyan: 0 0 30px rgba(0, 212, 170, 0.08); --krmen-glow-cyan-strong: 0 0 50px rgba(0, 212, 170, 0.15); --krmen-glow-purple: 0 0 30px rgba(108, 58, 237, 0.08); --krmen-glow-gold: 0 0 30px rgba(194, 168, 120, 0.1); --krmen-shadow-card: 0 4px 20px rgba(0, 0, 0, 0.4); --krmen-shadow-card-heavy: 0 20px 40px -10px rgba(0, 0, 0, 0.6); --krmen-shadow-toolbar: 0 -10px 40px rgba(0, 0, 0, 0.5); --krmen-shadow-search: 0 15px 40px rgba(0, 0, 0, 0.4); --krmen-shadow-fab: 0 8px 30px rgba(0, 0, 0, 0.4); /* ── Blur / Backdrop (Deep Glass) ──────────────────────── */ --krmen-blur-glass: blur(24px); --krmen-blur-glass-light: blur(16px); --krmen-blur-glass-heavy: blur(32px); --krmen-blur-modal: blur(12px); --krmen-blur-checkout: blur(16px); --krmen-blur-orb: blur(100px); /* ── Legacy Aliases ────────────────────────────────────── */ --bg: var(--krmen-bg); --bg-elevated: var(--krmen-bg-elevated); --bg-card: var(--krmen-surface); --bg-card-alt: var(--krmen-surface-alt); --glass-bg: var(--krmen-glass); --glass-bg-hover: var(--krmen-glass-hover); --glass-purple: var(--krmen-glass-purple); --border-glass: var(--krmen-border); --border-purple: var(--krmen-border-purple); --text-primary: var(--krmen-text); --text-muted: var(--krmen-text-muted); --text-slate: var(--krmen-text-slate); --cyan: var(--krmen-accent-cyan); --purple: var(--krmen-accent-purple); --purple-light: var(--krmen-accent-purple-light); --purple-glow: var(--krmen-accent-purple-glow); --gold: var(--krmen-accent-gold); --cyan-glow: var(--krmen-accent-cyan-glow); --danger: var(--krmen-danger); --success: var(--krmen-success); --success-light: var(--krmen-success-light); --gradient: var(--krmen-gradient); --gradient-alt: var(--krmen-gradient-alt); --gradient-gold: var(--krmen-gradient-gold); --gradient-stripe: var(--krmen-gradient-stripe); --gradient-checkout: var(--krmen-gradient-checkout); --aurora-top: var(--krmen-aurora-top); --aurora-right: var(--krmen-aurora-right); --aurora-left: var(--krmen-aurora-left); --font-sans: var(--krmen-font-sans); --font-mono: var(--krmen-font-mono); } body { font-family: var(--font-sans); background: var(--bg); color: var(--text-primary); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6 { letter-spacing: -0.02em; font-weight: 700; line-height: 1.2; } h1 { font-size: clamp(2rem, 5vw, 3.5rem); letter-spacing: -0.03em; font-weight: 800; } h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); } h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); } p { font-size: clamp(0.95rem, 1.5vw, 1.1rem); color: var(--text-muted); } /* Elegance Tweaks */ .krmen-card { border: 1px solid var(--border-glass); background: var(--bg-card); backdrop-filter: var(--blur-glass); -webkit-backdrop-filter: var(--blur-glass); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); border-radius: var(--radius-card); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .krmen-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-heavy); border-color: rgba(255,255,255,0.1); }