/* ═══════════════════════════════════════════════════ BLINQ — Design System v5.0 B&W High Contrast · Brutalist Typography Light/Dark Dual Mode · Purple Accent (#9D00FF) ═══════════════════════════════════════════════════ */ /* ───────────────────────────────────── LIGHT MODE (Default — always, ignoring OS preference) ───────────────────────────────────── */ :root { /* Surfaces */ --bg-deep: #FAFAFA; --bg-card: #FFFFFF; --bg-card-hover: #F5F5F5; --bg-elevated: #EFEFEF; /* Banda hundida: el punto medio de los gradientes de seccion. Estaba hardcodeado (#030308 / #080810) y en modo claro pintaba una franja casi negra atravesando la pagina. */ --bg-sunken: #F0F0F4; --glass: rgba(0, 0, 0, 0.02); --glass-border: rgba(0, 0, 0, 0.08); --border-subtle: rgba(0, 0, 0, 0.06); --border-strong: rgba(0, 0, 0, 0.12); /* Brand — Purple accent for CTAs, hovers, glows only */ --brand-purple: #9D00FF; --brand-purple-dim:rgba(157, 0, 255, 0.06); --brand-purple-mid:rgba(157, 0, 255, 0.12); --glow-purple: rgba(157, 0, 255, 0.18); /* Magenta atenuado para claro: #FF00F5 sobre blanco da 3.20:1 y no alcanza el minimo AA de 4.5:1, ni como texto ni como fondo de boton con texto blanco. #D6008A da 4.97:1 y conserva la identidad. El magenta pleno se restaura en html.dark-mode. */ --brand-magenta: #D6008A; --gradient-brand: linear-gradient(135deg, #9D00FF, #D6008A); --magenta-dim: rgba(255, 0, 245, 0.06); --glow-magenta: rgba(255, 0, 245, 0.1); /* Text — High contrast B&W */ --text-primary: #0A0A0A; --text-secondary: #5A5A6A; --text-dim: #9A9AA8; --text-inverse: #FFFFFF; /* Typography — Brutalist */ --font-display: 'Space Grotesk', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', monospace; /* Spacing scale */ --space-xs: 8px; --space-sm: 16px; --space-md: 24px; --space-lg: 48px; --space-xl: 96px; --section-padding: 120px; --bento-gap: 16px; /* Type scale */ --fs-sm: 0.875rem; --fs-base: 1rem; --fs-lg: 1.25rem; --fs-xl: 1.75rem; --fs-display: clamp(3rem, 8vw, 6rem); /* Radii */ --radius-sm: 8px; --radius-md: 16px; --radius-lg: 24px; --radius-xl: 28px; --radius-full: 50px; /* Shadows */ --shadow-soft: 0 20px 40px rgba(0, 0, 0, 0.08); /* Transitions */ --transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); --transition-fast: 0.2s ease; /* Mode flag */ --color-mode: light; color-scheme: light; } /* @media (prefers-color-scheme: light) block REMOVED (2026-08-11). Light mode is now the unconditional default via :root above. Theme switching is handled exclusively by JS adding .light-mode or .dark-mode to . */ /* Manual light mode override via class. Selector is `html.light-mode` (specificity 0,1,1) rather than `.light-mode` (0,1,0) so it always outranks a plain `:root` block — including one declared in a stylesheet that loads after this file. */ html.light-mode { --bg-deep: #FAFAFA; --bg-card: #FFFFFF; --bg-card-hover: #F5F5F5; --bg-elevated: #EFEFEF; --bg-sunken: #F0F0F4; --glass: rgba(0, 0, 0, 0.02); --glass-border: rgba(0, 0, 0, 0.08); --border-subtle: rgba(0, 0, 0, 0.06); --border-strong: rgba(0, 0, 0, 0.12); --brand-purple-dim:rgba(157, 0, 255, 0.06); --brand-purple-mid:rgba(157, 0, 255, 0.12); --glow-purple: rgba(157, 0, 255, 0.18); --magenta-dim: rgba(255, 0, 245, 0.06); --glow-magenta: rgba(255, 0, 245, 0.1); --text-primary: #0A0A0A; --text-secondary: #5A5A6A; --text-dim: #9A9AA8; --text-inverse: #FFFFFF; --shadow-soft: 0 20px 40px rgba(0, 0, 0, 0.08); --color-mode: light; color-scheme: light; --brand-magenta: #D6008A; --gradient-brand: linear-gradient(135deg, #9D00FF, #D6008A); } /* Explicit dark override — lets JS force dark mode even when the OS prefers light. Same `html.` prefix as above so it outranks any stray `:root`. */ html.dark-mode { --bg-deep: #050505; --bg-card: #0a0a12; --bg-card-hover: #0e0e18; --bg-elevated: #16161F; --bg-sunken: #04040A; --glass: rgba(255, 255, 255, 0.02); --glass-border: rgba(255, 255, 255, 0.06); --border-subtle: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.14); --brand-purple-dim:rgba(157, 0, 255, 0.08); --brand-purple-mid:rgba(157, 0, 255, 0.15); --glow-purple: rgba(157, 0, 255, 0.25); --magenta-dim: rgba(255, 0, 245, 0.08); --glow-magenta: rgba(255, 0, 245, 0.15); --text-primary: #FFFFFF; --text-secondary: #9a9aa8; --text-dim: #6a6a7f; --text-inverse: #050505; --shadow-soft: 0 20px 60px rgba(157, 0, 255, 0.12), 0 4px 24px rgba(0, 0, 0, 0.4); --color-mode: dark; color-scheme: dark; --brand-magenta: #FF00F5; --gradient-brand: linear-gradient(135deg, #9D00FF, #FF00F5); } /* ───────────────────────────────────── BRUTALIST TYPOGRAPHY OVERRIDES ───────────────────────────────────── */ body { font-family: var(--font-body); } /* Massive, clean display headings */ .section-title, .hero-headline { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; } /* Tags stay monospaced */ .section-tag { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; } /* Body text uses Inter for readability */ .section-subtitle, .hero-sub, .bento-desc, .service-desc, .pricing-concept, .guarantee-desc { font-family: var(--font-body); font-weight: 400; }