/* ═══════════════════════════════════════════════════════════════════════════ FixrOS — TOKENS Única fuente de verdad para color, tipografía, espaciado, radio, sombra y movimiento. Ningún otro fichero declara un valor literal. POR QUÉ CADA DECISIÓN ───────────────────────────────────────────────────────────────────────── TIPOGRAFÍA — Inter Tight (display) + Inter (texto) + JetBrains Mono (datos). Inter es la retina estándar del SaaS B2B serio (Linear, Vercel, Stripe la usan o usan derivadas) porque su altura de x alta se lee bien a 14-15px, que es donde vive el 80 % de esta web. Inter Tight sólo para titulares: su tracking cerrado da autoridad a tamaños grandes sin gritar. Se mantienen las dos porque ya estaban en la CSP y cambiar de familia era riesgo sin retorno. COLOR — un solo tono de marca con DOS roles, no dos azules. Ningún azul pasa AA de texto sobre blanco Y sobre el navy del hero a la vez: #1246FF da 6,28:1 sobre blanco pero 3,09:1 sobre #050D1F. La solución profesional no es inventar un tercer azul, es usar la escala: --brand-600 manda sobre claro, --brand-300 sobre oscuro. Se conserva #1246FF como 600 porque ES la marca; lo que se corrige es que hasta hoy competía con otros siete azules. NEUTROS — escala fría de 10 pasos derivada de #0A0C10. Fría (con azul en la sombra) para que conviva con la marca sin ensuciar. Diez pasos porque con menos acabas inventando valores intermedios, que es exactamente como se llegó a 167 colores. ESPACIADO — base 4, saltos 4/8/12/16/24/32/48/64/96/128. Progresión casi geométrica: da ritmo vertical perceptible sin que haya que decidir nada. Si un espaciado no está aquí, no se usa. RADIOS — tres y una píldora. Había 42. SOMBRAS — tres. Había 118. Todas con el mismo tinte frío del neutro 900, nunca negro puro: el negro puro sobre fondo claro se ve sucio. MOVIMIENTO — dos duraciones y una curva. Había 103 transiciones. ═══════════════════════════════════════════════════════════════════════ */ :root { /* ── TIPOGRAFÍA ───────────────────────────────────────────────────── */ --fx-font-display: 'Inter Tight', 'Inter', system-ui, -apple-system, sans-serif; --fx-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --fx-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace; /* Escala de 8 pasos. Los cuatro primeros son fijos (UI); los cuatro últimos fluidos, porque son los que cambian la sensación entre móvil y escritorio. */ --fx-text-xs: 0.75rem; /* 12px — metadatos, píldoras */ --fx-text-sm: 0.875rem; /* 14px — texto secundario */ --fx-text-md: 1rem; /* 16px — cuerpo por defecto */ --fx-text-lg: 1.125rem; /* 18px — entradilla corta */ --fx-text-xl: clamp(1.25rem, 0.9rem + 0.9vw, 1.5rem); /* 20→24 h4 */ --fx-text-2xl: clamp(1.5rem, 1.1rem + 1.6vw, 2.125rem); /* 24→34 h3 */ --fx-text-3xl: clamp(2rem, 1.3rem + 3.2vw, 3.25rem); /* 32→52 h2 */ --fx-text-4xl: clamp(2.75rem, 1.6rem + 5.4vw, 5.25rem); /* 44→84 h1 */ --fx-weight-regular: 400; --fx-weight-medium: 500; --fx-weight-semi: 600; --fx-weight-bold: 700; --fx-weight-black: 800; --fx-leading-tight: 1.05; /* titulares */ --fx-leading-snug: 1.25; /* subtítulos */ --fx-leading-body: 1.6; /* párrafos */ --fx-tracking-tight: -0.045em; /* display grande */ --fx-tracking-snug: -0.02em; /* display pequeño */ --fx-tracking-wide: 0.12em; /* versalitas, eyebrows */ /* ── MARCA ────────────────────────────────────────────────────────── */ --fx-brand-50: #EEF3FF; --fx-brand-100: #DDE6FF; --fx-brand-200: #C2D2FF; --fx-brand-300: #8FB0FF; /* texto y acento SOBRE OSCURO — 9,06:1 en navy */ --fx-brand-400: #5C86FF; --fx-brand-500: #2E63FF; --fx-brand-600: #1246FF; /* PRIMARIO sobre claro — 6,28:1 en blanco */ --fx-brand-700: #0A35D4; /* hover del primario */ --fx-brand-800: #0828A8; --fx-brand-900: #071E7A; /* ── NEUTROS ──────────────────────────────────────────────────────── */ --fx-white: #FFFFFF; --fx-neutral-25: #FAFBFD; --fx-neutral-50: #F4F6FA; /* fondo de sección alterna */ --fx-neutral-100: #E9EDF5; /* fondo de chip, superficie hundida */ --fx-neutral-200: #DBE1EC; /* bordes de tarjeta */ --fx-neutral-300: #B9C2D2; /* bordes de input */ --fx-neutral-400: #8B94A6; /* iconos secundarios */ --fx-neutral-500: #667085; /* texto terciario — 4,84:1 en blanco */ --fx-neutral-600: #4A5262; /* texto secundario — 8,03:1 */ --fx-neutral-700: #343B49; --fx-neutral-800: #1F2530; --fx-neutral-900: #0A0C10; /* texto principal — 19,3:1 */ --fx-navy: #050D1F; /* superficie oscura (hero, voz IA) */ --fx-navy-2: #0C1E5E; /* fin del degradado oscuro */ /* ── SEMÁNTICOS ───────────────────────────────────────────────────── */ --fx-success: #00875A; --fx-success-bg: #E3F7EE; --fx-warning: #B45309; --fx-warning-bg: #FEF3DC; --fx-danger: #C4321F; --fx-danger-bg: #FDE8E8; --fx-info: var(--fx-brand-600); --fx-info-bg: var(--fx-brand-50); /* ── ROLES (lo que se usa en los componentes) ─────────────────────── */ --fx-bg: var(--fx-white); --fx-bg-alt: var(--fx-neutral-50); --fx-bg-sunken: var(--fx-neutral-100); --fx-surface: var(--fx-white); --fx-text: var(--fx-neutral-900); --fx-text-muted: var(--fx-neutral-600); --fx-text-subtle: var(--fx-neutral-500); --fx-border: var(--fx-neutral-200); --fx-border-strong: var(--fx-neutral-300); --fx-accent: var(--fx-brand-600); --fx-accent-hover: var(--fx-brand-700); --fx-accent-soft: var(--fx-brand-50); /* mismos roles sobre superficie oscura */ --fx-on-dark-text: var(--fx-white); --fx-on-dark-muted: rgba(255, 255, 255, 0.72); --fx-on-dark-subtle: rgba(255, 255, 255, 0.52); --fx-on-dark-border: rgba(255, 255, 255, 0.14); --fx-on-dark-accent: var(--fx-brand-300); /* ── ESPACIADO (base 4) ───────────────────────────────────────────── */ --fx-space-1: 0.25rem; /* 4 */ --fx-space-2: 0.5rem; /* 8 */ --fx-space-3: 0.75rem; /* 12 */ --fx-space-4: 1rem; /* 16 */ --fx-space-6: 1.5rem; /* 24 */ --fx-space-8: 2rem; /* 32 */ --fx-space-12: 3rem; /* 48 */ --fx-space-16: 4rem; /* 64 */ --fx-space-24: 6rem; /* 96 */ --fx-space-32: 8rem; /* 128 */ /* Ritmo vertical de sección: un único valor fluido para TODA la web. Es lo que hace que las páginas se sientan de la misma familia. */ --fx-section-y: clamp(3rem, 1.5rem + 3.4vw, 4.75rem); /* 48 → 76 */ /* Caja de contenido. Igual que la de la barra de navegación para que todo caiga a plomo: logo, hero, secciones y pie sobre la misma vertical. */ --fx-container: 1200px; --fx-gutter: 1.5rem; /* 24px */ /* ── RADIOS ───────────────────────────────────────────────────────── */ --fx-radius-sm: 10px; /* inputs, chips, iconos */ --fx-radius-md: 16px; /* tarjetas, botones grandes */ --fx-radius-lg: 24px; /* superficies grandes, bandas */ --fx-radius-pill: 999px; /* ── SOMBRAS (tinte frío, nunca negro puro) ───────────────────────── */ --fx-shadow-sm: 0 1px 2px rgba(10, 12, 16, 0.04), 0 2px 8px rgba(10, 12, 16, 0.04); --fx-shadow-md: 0 4px 12px rgba(10, 12, 16, 0.06), 0 12px 32px -8px rgba(10, 12, 16, 0.10); --fx-shadow-lg: 0 8px 24px rgba(10, 12, 16, 0.08), 0 32px 64px -24px rgba(10, 12, 16, 0.18); /* Anillo de foco. Uno solo, visible sobre claro y sobre oscuro. */ --fx-ring: 0 0 0 3px rgba(18, 70, 255, 0.35); /* ── MOVIMIENTO ───────────────────────────────────────────────────── */ --fx-ease: cubic-bezier(0.16, 1, 0.3, 1); --fx-dur-fast: 160ms; /* color, fondo, opacidad */ --fx-dur-base: 320ms; /* transformaciones, entradas */ /* ── CAPAS ────────────────────────────────────────────────────────── */ --fx-z-base: 1; --fx-z-sticky: 100; --fx-z-nav: 900; --fx-z-overlay: 950; --fx-z-modal: 1000; } /* Quien pida menos movimiento, no lo recibe. */ @media (prefers-reduced-motion: reduce) { :root { --fx-dur-fast: 1ms; --fx-dur-base: 1ms; } }