/* ============================================================================ BIF — Design System · Tokens ---------------------------------------------------------------------------- Variables CSS centralizadas: paleta, tipografía, espaciado, sombras, bordes, easings y z-index. Cualquier cambio de marca se hace aquí. ============================================================================ */ :root { /* ──────────── COLOR · Base oscura ──────────── */ --bif-black: #0A0A0A; /* Fondo principal del sitio */ --bif-charcoal: #141414; /* Fondo de cards / secciones */ --bif-graphite: #1F1F1F; /* Bordes y divisores */ --bif-iron: #2A2A2A; /* Hover de elementos oscuros */ /* ──────────── COLOR · Acento sangre / impacto ──────────── */ --bif-blood: #C1121F; /* Rojo sangre principal */ --bif-crimson: #8B0000; /* Rojo oscuro hover */ --bif-fire: #E63946; /* Rojo brillante para CTAs */ --bif-ember: #FF4757; /* Rojo glow effect */ /* ──────────── COLOR · Metálicos ──────────── */ --bif-gold: #D4AF37; /* Dorado campeón */ --bif-gold-light: #E8C254; /* Dorado hover */ --bif-silver: #C0C0C0; /* Plata accent */ /* ──────────── COLOR · Texto ──────────── */ --bif-white: #FFFFFF; --bif-bone: #E8E8E8; /* Texto principal sobre oscuro */ --bif-ash: #8A8A8A; /* Texto secundario / muted */ --bif-smoke: #4A4A4A; /* Texto deshabilitado */ /* ──────────── COLOR · Estados ──────────── */ --bif-success: #00C853; --bif-success-glow: rgba(0, 200, 83, 0.4); --bif-warning: #FFAB00; --bif-warning-glow: rgba(255, 171, 0, 0.4); --bif-danger: #FF1744; --bif-danger-glow: rgba(255, 23, 68, 0.4); /* ──────────── COLOR · Alphas / overlays ──────────── */ --bif-overlay-60: rgba(10, 10, 10, 0.6); --bif-overlay-80: rgba(10, 10, 10, 0.8); --bif-overlay-90: rgba(10, 10, 10, 0.92); /* ──────────── COLOR · Glows (sombras rojas brillantes) ──────────── */ --bif-glow-red-sm: 0 0 12px rgba(230, 57, 70, 0.4); --bif-glow-red: 0 0 24px rgba(230, 57, 70, 0.55); --bif-glow-red-lg: 0 0 48px rgba(230, 57, 70, 0.65); --bif-glow-gold: 0 0 24px rgba(212, 175, 55, 0.5); /* ──────────── TIPOGRAFÍA · Familias ──────────── */ --font-display: 'Bebas Neue', 'Anton', 'Oswald', 'Impact', sans-serif; --font-body: 'Inter', 'DM Sans', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', 'Space Mono', 'SF Mono', monospace; /* ──────────── TIPOGRAFÍA · Escala fluida (clamp) ──────────── */ /* Cada escalón crece de móvil a desktop sin breakpoints */ --fs-xs: clamp(0.72rem, 0.7rem + 0.1vw, 0.78rem); --fs-sm: clamp(0.82rem, 0.78rem + 0.2vw, 0.92rem); --fs-base: clamp(0.95rem, 0.9rem + 0.25vw, 1.05rem); --fs-lg: clamp(1.1rem, 1rem + 0.5vw, 1.25rem); --fs-xl: clamp(1.35rem, 1.15rem + 1vw, 1.6rem); --fs-2xl: clamp(1.75rem, 1.4rem + 1.75vw, 2.4rem); --fs-3xl: clamp(2.4rem, 1.8rem + 3vw, 3.6rem); --fs-4xl: clamp(3.2rem, 2.4rem + 4vw, 5rem); --fs-display: clamp(4rem, 3rem + 8vw, 9.5rem); --fs-mega: clamp(5rem, 3.5rem + 12vw, 14rem); /* ──────────── TIPOGRAFÍA · Pesos ──────────── */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 900; /* ──────────── TIPOGRAFÍA · Letter spacing ──────────── */ --ls-tight: -0.02em; --ls-normal: 0; --ls-wide: 0.05em; --ls-wider: 0.12em; --ls-widest: 0.25em; /* ──────────── TIPOGRAFÍA · Line height ──────────── */ --lh-tight: 1; --lh-snug: 1.15; --lh-normal: 1.5; --lh-relaxed: 1.65; /* ──────────── ESPACIADO · Escala base 4px ──────────── */ --sp-1: 0.25rem; /* 4px */ --sp-2: 0.5rem; /* 8px */ --sp-3: 0.75rem; /* 12px */ --sp-4: 1rem; /* 16px */ --sp-5: 1.5rem; /* 24px */ --sp-6: 2rem; /* 32px */ --sp-7: 2.5rem; /* 40px */ --sp-8: 3rem; /* 48px */ --sp-9: 4rem; /* 64px */ --sp-10: 6rem; /* 96px */ --sp-11: 8rem; /* 128px */ --sp-12: 10rem; /* 160px */ /* ──────────── LAYOUT ──────────── */ --container-max: 1440px; --container-pad: clamp(1.25rem, 4vw, 4rem); --section-y: clamp(4rem, 10vh, 8rem); /* ──────────── BORDER RADIUS ──────────── */ /* BIF es angular: radios chicos o cero. Las cards usan clip-path. */ --radius-none: 0; --radius-xs: 2px; --radius-sm: 4px; --radius-md: 8px; --radius-full: 9999px; /* ──────────── BORDES ──────────── */ --border-thin: 1px solid var(--bif-graphite); --border-base: 2px solid var(--bif-graphite); --border-strong: 2px solid var(--bif-bone); --border-blood: 2px solid var(--bif-blood); --border-gold: 2px solid var(--bif-gold); /* ──────────── SHADOWS ──────────── */ --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.4); --shadow-md: 0 8px 16px rgba(0, 0, 0, 0.5); --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.7); --shadow-xl: 0 32px 64px rgba(0, 0, 0, 0.8); /* ──────────── EASINGS / DURACIONES ──────────── */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-impact: cubic-bezier(0.85, 0, 0.15, 1); /* hits / golpes */ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* bounce sutil */ --dur-instant: 80ms; --dur-fast: 150ms; --dur-base: 260ms; --dur-slow: 420ms; --dur-slower: 700ms; /* ──────────── Z-INDEX ──────────── */ --z-base: 1; --z-content: 10; --z-header: 100; --z-overlay: 900; --z-modal: 1000; --z-toast: 1100; --z-scanner: 9999; /* ──────────── TEXTURA (grano CSS) ──────────── */ /* Ruido SVG inline. Se baja la alpha (0.18) para usarlo directamente como background-image sin necesidad de mix-blend-mode (que es muy caro). */ --grain-svg: url("data:image/svg+xml;utf8,"); }