/* ================================================================ tokens.css — Design system Con Motivo v4 "Ink & Signal" Paleta: Ink (deep navy) + Paper (off-white) + Signal (cobalt) + Gold. Tipografia: Instrument Serif (display) + Syne (body) + JetBrains Mono. Sin radius (0 default), sin shadows decorativas, sin gradientes. Aliases legacy (--c-emerald-*, --c-slate-*, --c-blue-*, --c-night-*, --c-ice-*, --c-ink-*, --c-persimmon-*) remapeados a la paleta nueva para no romper sections.css/components.css mientras se migran. ================================================================ */ :root { /* ============================================================ * BASE — los 5 tokens canónicos de la marca Con Motivo * ============================================================ */ --c-ink: #0E1622; /* tinta — texto primario, dark bg */ --c-ink-mid: #3D4757; /* tinta media — borders, secundario */ --c-signal: #1B4FF1; /* signal blue — CTAs, links, foco */ --c-gold: #C28612; /* gold ámbar — badges, warning, highlight */ --c-paper: #F1F2F4; /* paper off-white — bg primario light */ /* ============================================================ * INK — Dark mode primario (hero, vivencias, pricing, CTAs) * ============================================================ */ --c-bg-deep: var(--c-ink); /* #0E1622 — bg dark primario */ --c-bg-deep-alt: #18222F; /* surface lifted (cards sobre dark) */ --c-bg-deep-edge: var(--c-ink-mid); /* #3D4757 — hover/border on dark */ --c-on-deep: var(--c-paper); /* #F1F2F4 — texto sobre dark */ --c-on-deep-soft: #A4ADBC; /* gris frío — secundario sobre dark */ --c-on-deep-faint: #6B7484; /* gris frío oscuro — terciario sobre dark */ /* ============================================================ * PAPER — Light mode alterno (comparativa, FAQ, blog body, cobertura) * ============================================================ */ --c-bg: var(--c-paper); /* #F1F2F4 — bg light */ --c-bg-alt: #E5E7EC; /* paper lifted — cards, surfaces light */ --c-bg-edge: #D1D5DB; /* divider frío — light */ /* --c-ink ya declarado arriba como base */ --c-ink-soft: var(--c-ink-mid); /* #3D4757 — secundario sobre paper */ --c-ink-faint: #8893A3; /* terciario, placeholder */ /* ============================================================ * SIGNAL — Acento primario (cobalt blue, atención disciplinada) * Uso disciplinado <5% superficie. * ============================================================ */ --c-accent: var(--c-signal); /* #1B4FF1 — CTAs principales */ --c-accent-hover: #1640C8; /* signal deep — hover */ --c-accent-press: #112FA0; /* signal dark — press/active */ --c-accent-soft: #C7D4FB; /* signal light — badges, tints */ --c-accent-on-dark: var(--c-paper); /* paper — texto sobre CTA */ --c-accent-text: #112FA0; /* signal dark para text sobre paper con AA */ /* ============================================================ * ESTADOS (Gold como warning canónico, resto desaturados) * ============================================================ */ --c-success: #4D7A52; /* moss verde */ --c-success-soft: #DCE7DC; --c-warning: var(--c-gold); /* gold #C28612 */ --c-warning-soft: #F4E3BD; --c-danger: #A6342C; /* terracotta deep */ --c-danger-soft: #F0D8D2; /* ============================================================ * ALIASES LEGACY — para que components/sections.css no exploten * mientras se migran. Apuntan a la paleta nueva. * ============================================================ */ --c-emerald-50: var(--c-accent-soft); --c-emerald-100: var(--c-accent-soft); --c-emerald-200: var(--c-accent-soft); --c-emerald-300: var(--c-accent-on-dark); --c-emerald-400: var(--c-accent); --c-emerald-500: var(--c-accent); --c-emerald-600: var(--c-accent-hover); --c-emerald-700: var(--c-accent-press); --c-emerald-800: var(--c-accent-text); --c-emerald-900: var(--c-accent-press); --c-persimmon-50: var(--c-accent-soft); --c-persimmon-100: var(--c-accent-soft); --c-persimmon-200: var(--c-accent-on-dark); --c-persimmon-300: var(--c-accent-on-dark); --c-persimmon-400: var(--c-accent); --c-persimmon-500: var(--c-accent); --c-persimmon-600: var(--c-accent-hover); --c-persimmon-700: var(--c-accent-text); --c-persimmon-800: var(--c-accent-text); --c-persimmon-900: var(--c-accent-press); --c-teal-300: var(--c-bg-edge); --c-teal-400: var(--c-ink-faint); --c-teal-500: var(--c-ink-soft); --c-teal-600: var(--c-ink-soft); --c-teal-700: var(--c-ink); --c-slate-50: var(--c-bg-alt); --c-slate-100: var(--c-bg-edge); --c-slate-200: var(--c-bg-edge); --c-slate-300: var(--c-ink-faint); --c-slate-400: var(--c-ink-faint); --c-slate-500: var(--c-ink-soft); --c-slate-600: var(--c-ink-soft); --c-slate-700: var(--c-ink); --c-slate-800: var(--c-ink); --c-slate-900: var(--c-bg-deep); --c-slate-950: var(--c-bg-deep); --c-mint-50: var(--c-bg); --c-mint-100: var(--c-bg-alt); --c-paper: var(--c-bg); --c-sand: var(--c-bg-alt); --c-charcoal: var(--c-bg-deep); --c-blue-50: var(--c-accent-soft); --c-blue-100: var(--c-accent-soft); --c-blue-200: var(--c-accent-soft); --c-blue-300: var(--c-accent-on-dark); --c-blue-400: var(--c-accent); --c-blue-500: var(--c-accent); --c-blue-600: var(--c-accent-hover); --c-blue-700: var(--c-accent-press); --c-blue-800: var(--c-accent-text); --c-blue-900: var(--c-accent-press); --c-night-700: var(--c-bg-deep-edge); --c-night-800: var(--c-bg-deep-alt); --c-night-900: var(--c-bg-deep); --c-night-950: var(--c-bg-deep); --c-ice-50: var(--c-bg); --c-ice-100: var(--c-bg-alt); --c-ice-200: var(--c-bg-edge); --c-ice-300: var(--c-bg-edge); --c-ice-400: var(--c-ink-faint); --c-black: var(--c-bg-deep); --c-ink-900: var(--c-ink); --c-ink-800: var(--c-ink); --c-ink-700: var(--c-ink-soft); --c-ink-600: var(--c-ink-soft); --c-ink-500: var(--c-ink-soft); --c-ink-400: var(--c-ink-faint); --c-ink-300: var(--c-ink-faint); --c-ink-200: var(--c-bg-edge); --c-ink-100: var(--c-bg-edge); --c-ink-50: var(--c-bg-alt); /* ============================================================ * SEMÁNTICOS (los componentes existentes los usan) * ============================================================ */ --c-bg-soft: var(--c-bg-alt); --c-bg-warm: var(--c-bg-alt); --c-text: var(--c-ink); --c-text-soft: var(--c-ink-soft); --c-text-strong: var(--c-ink); --c-text-mono: var(--c-ink-soft); --c-border: var(--c-bg-edge); --c-border-soft: var(--c-bg-alt); --c-border-strong: var(--c-ink-faint); --c-rule: var(--c-bg-edge); --c-on-accent: var(--c-bg-deep); /* ============================================================ * TIPOGRAFÍA — Instrument Serif display + Syne body + JetBrains Mono * ============================================================ */ --f-display: 'Instrument Serif', 'Newsreader', Georgia, 'Times New Roman', serif; --f-sans: 'Syne', 'Inter', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif; --f-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Escala fluida tipográfica (display más grande para placas masivas) */ --t-2xs: clamp(0.6875rem, 0.66rem + 0.05vw, 0.75rem); --t-xs: clamp(0.75rem, 0.72rem + 0.10vw, 0.8125rem); --t-sm: clamp(0.875rem, 0.85rem + 0.10vw, 0.9375rem); --t-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem); --t-lg: clamp(1.125rem, 1.08rem + 0.25vw, 1.25rem); --t-xl: clamp(1.25rem, 1.18rem + 0.35vw, 1.5rem); --t-2xl: clamp(1.5rem, 1.40rem + 0.50vw, 1.875rem); --t-3xl: clamp(1.75rem, 1.55rem + 1.00vw, 2.5rem); --t-4xl: clamp(2rem, 1.65rem + 1.75vw, 3.25rem); --t-5xl: clamp(2.5rem, 2.00rem + 2.50vw, 4.5rem); --t-display: clamp(3rem, 2.10rem + 4.50vw, 6rem); --t-mega: clamp(4rem, 2.50rem + 7.50vw, 10rem); /* placas masivas de números */ /* Line-heights */ --lh-tight: 1.02; /* placas masivas */ --lh-snug: 1.1; /* display */ --lh-base: 1.5; /* body */ --lh-relaxed: 1.6; --lh-prose: 1.65; /* blog body */ /* Letter-spacing — Fraunces no necesita tracking negativo agresivo como Cabinet */ --tracking-tighter: -0.02em; --tracking-tight: -0.012em; --tracking-snug: -0.005em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-wider: 0.08em; --tracking-mono: 0.05em; /* JetBrains Mono labels */ /* ============================================================ * SPACING 4pt grid * ============================================================ */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --s-11: 160px; --s-12: 240px; /* Section padding (más generoso que v1) */ --section-y: clamp(96px, 14vw, 200px); --section-y-tight: clamp(64px, 9vw, 120px); --hero-y: clamp(120px, 16vw, 240px); /* ============================================================ * CONTAINER + grid system * ============================================================ */ --container-max: 1320px; --container-narrow: 880px; --container-prose: 680px; --container-pad: clamp(1.25rem, 4vw, 3rem); /* ============================================================ * RADII — Hard edges. Default 0. Solo 2px excepcional. * ============================================================ */ --r-xs: 0; --r-sm: 0; --r-md: 0; --r-lg: 0; --r-xl: 2px; /* solo para visual de producto del hero */ --r-2xl: 2px; --r-pill: 0; /* sin pills nunca */ /* ============================================================ * BORDERS (1px ash, visible) * ============================================================ */ --border-thin: 1px solid var(--c-bg-edge); --border-strong: 1px solid var(--c-ink-soft); --border-on-deep: 1px solid var(--c-on-deep-faint); /* ============================================================ * SHADOWS — Eliminadas (decorativas). shadow-xs solo para casos puntuales. * ============================================================ */ --shadow-xs: 0 1px 0 var(--c-bg-edge); --shadow-sm: none; --shadow-md: none; --shadow-lg: none; --shadow-xl: none; --shadow-2xl: none; --shadow-emerald: none; --shadow-blue: none; --shadow-diffusion: none; /* ============================================================ * MOTION * ============================================================ */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-out-quart: var(--ease-out); --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1); --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.32, 0.64, 1); --ease-out-back: cubic-bezier(0.34, 1.32, 0.64, 1); --dur-instant: 80ms; --dur-fast: 160ms; --dur-base: 240ms; --dur-slow: 420ms; --dur-slower: 720ms; --dur-extra: var(--dur-slower); /* ============================================================ * FOCUS RING — signal sobre cualquier fondo * ============================================================ */ --focus-ring: 0 0 0 3px rgba(27, 79, 241, 0.45); --focus-ring-light: 0 0 0 3px rgba(27, 79, 241, 0.30); /* ============================================================ * Z-index * ============================================================ */ --z-base: 1; --z-sticky: 50; --z-overlay: 100; --z-modal: 200; --z-toast: 300; --z-cookies: 250; } @media (prefers-reduced-motion: reduce) { :root { --dur-instant: 0ms; --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 150ms; --dur-slower: 0ms; --dur-extra: 0ms; } } ::selection { background: var(--c-accent); color: var(--c-paper); }