/* ================================================ BRAND BUSINESS — DESIGN TOKENS (LIGHT THEME) ──────────────────────────────────────────────── Single source of truth de todo el sistema visual. Si vas a sumar un color, sombra, espaciado o motion nuevo en cualquier página, declarálo PRIMERO acá y referenciálo desde donde lo necesites. No hardcodear valores en componentes ni en páginas. ──────────────────────────────────────────────── Secciones: 1. Palette — Brand Business (matriz) 2. Palette — Marcas hijas (Cocodinus / Dubtech / Viajante) 3. Accent dinámico (data-brand) 4. Palette — Partners (DHL, Pagopar) 5. Status colors (success / warning / error / info) 6. Tipografía 7. Espaciado 8. Sombras 9. Motion (easing + duraciones) 10. Forms 11. Radii 12. Z-index scale ================================================ */ :root { /* ════════════════════════════════════════════════ 1. PALETTE — Brand Business (matriz) ════════════════════════════════════════════════ */ --bb-bg: #ffffff; --bb-bg-soft: #faf8f4; /* off-white cálido */ --bb-bg-warm: #f4efe6; /* crema más cálido */ --bb-bg-dark: #0f0f0f; /* alias semántico de --bb-ink para fondos */ --bb-ink: #0f0f0f; --bb-ink-soft: #2a2a2a; --bb-ink-muted: #6b6b6b; --bb-ink-faint: #a0a0a0; /* placeholders, helper text muy sutiles */ --bb-ink-invert: #ffffff; /* texto sobre fondo dark */ --bb-gold-light: #d4b06a; /* sobre dark */ --bb-gold: #b08d3f; /* base sobre claro */ --bb-gold-dark: #8a6a26; /* italics editoriales, eyebrows */ --bb-copper: #8b5a2b; --bb-bronze: #4a2c17; --bb-line: rgba(15, 15, 15, 0.08); --bb-line-strong: rgba(15, 15, 15, 0.18); --bb-line-dark: rgba(255, 255, 255, 0.18); /* sobre fondos oscuros */ --bb-line-faint: rgba(255, 255, 255, 0.06); /* ════════════════════════════════════════════════ 2. PALETTE — Marcas hijas Cada marca: base + dark (hover/text) + soft (fondos sutiles) ════════════════════════════════════════════════ */ --cocodinus: #e8632a; --cocodinus-dark: #b84818; --cocodinus-soft: #fdf3ee; --dubtech: #6b3fa0; --dubtech-dark: #452866; --dubtech-soft: #f5f1fa; --viajante: #2bb8d4; --viajante-dark: #1a8aa0; --viajante-soft: #ecf8fb; /* ════════════════════════════════════════════════ 3. ACCENT DINÁMICO Default = identidad Brand Business (negro + dorado). Se sobreescribe abajo con body[data-brand="..."] para teñir la página de la marca correspondiente. ════════════════════════════════════════════════ */ --bb-accent: var(--bb-ink); --bb-accent-dark: var(--bb-gold-dark); --bb-accent-soft: var(--bb-bg-soft); --bb-accent-text: #ffffff; /* texto sobre el accent fill */ /* ════════════════════════════════════════════════ 4. PALETTE — Partners ════════════════════════════════════════════════ */ --dhl-red: #d40511; --dhl-yellow: #ffcc00; --pagopar-ink: var(--bb-gold-dark); /* matchea identidad institucional */ /* ════════════════════════════════════════════════ 5. STATUS COLORS — feedback semántico Usar para: timeline tracking, alerts, form validation, badges de estado de pedido, mensajes de éxito/error. ════════════════════════════════════════════════ */ --bb-success: #2e7d59; --bb-success-soft: #e8f4ed; --bb-warning: #b67c1f; --bb-warning-soft: #fdf3e0; --bb-error: #b8341c; --bb-error-soft: #fbeae6; --bb-info: #2a6ca8; --bb-info-soft: #e8f0f7; --bb-star: #c8a04b; /* rating estrellas activas */ /* ════════════════════════════════════════════════ 6. TIPOGRAFÍA ════════════════════════════════════════════════ */ --font-display: 'Cormorant Garamond', 'Times New Roman', serif; --font-body: 'Manrope', -apple-system, sans-serif; --fs-eyebrow: 0.7rem; --fs-body: 1rem; --fs-small: 0.85rem; --fs-tiny: 0.7rem; --ls-uppercase: 0.22em; /* el "espaciado editorial" estándar */ --ls-tight: -0.02em; /* para títulos display grandes */ /* ════════════════════════════════════════════════ 7. ESPACIADO ════════════════════════════════════════════════ */ --section-y: clamp(4rem, 8vw, 7rem); --container-pad: 1.25rem; --gap-card: 1.5rem; /* gap estándar entre cards en grid */ /* ════════════════════════════════════════════════ 8. SOMBRAS Escala consistente. Si necesitás otra sombra, considerá si una existente sirve antes de crear nueva. ════════════════════════════════════════════════ */ --bb-shadow-sm: 0 4px 12px -4px rgba(15, 15, 15, 0.08); --bb-shadow: 0 10px 30px -10px rgba(15, 15, 15, 0.15); --bb-shadow-md: 0 14px 32px -12px rgba(15, 15, 15, 0.18); --bb-shadow-lg: 0 20px 40px -20px rgba(15, 15, 15, 0.18); --bb-shadow-xl: 0 30px 60px -30px rgba(15, 15, 15, 0.22); --bb-shadow-cta: 0 10px 28px -10px rgba(15, 15, 15, 0.22); --bb-shadow-cta-hover: 0 16px 36px -12px rgba(15, 15, 15, 0.32); --bb-shadow-modal: 0 40px 80px -20px rgba(15, 15, 15, 0.4); /* ════════════════════════════════════════════════ 9. MOTION ════════════════════════════════════════════════ */ --bb-ease: cubic-bezier(0.4, 0, 0.2, 1); --bb-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 0.2s; --dur: 0.3s; --dur-slow: 0.6s; --dur-xslow: 0.8s; /* ════════════════════════════════════════════════ 10. FORMS Boxed style con bordes claros para mejor legibilidad en formularios con muchos campos apilados. (El estilo editorial border-bottom-only sobrevive en inputs hero — search, newsletter, tracking, coupon — que tienen sus propias reglas en components.css.) ════════════════════════════════════════════════ */ --bb-input-bg: #ffffff; --bb-input-bg-disabled: var(--bb-bg-soft); --bb-input-border: var(--bb-line-strong); --bb-input-border-hover:var(--bb-ink-muted); --bb-input-border-on: var(--bb-ink); /* focus */ --bb-input-border-error:var(--bb-error); --bb-input-text: var(--bb-ink); --bb-input-placeholder: var(--bb-ink-faint); --bb-input-padding: 0.85rem 1rem; /* boxed siempre */ --bb-input-radius: 0; /* esquinas vivas */ --bb-focus-ring: 0 0 0 3px rgba(176, 141, 63, 0.18); /* dorado sutil */ --bb-focus-ring-error: 0 0 0 3px rgba(184, 52, 28, 0.18); --bb-label-text: var(--bb-ink); /* más contraste que muted */ --bb-label-size: 0.72rem; --bb-label-weight: 700; --bb-checkbox-size: 20px; /* un poquito más grande */ --bb-checkbox-border: var(--bb-ink); /* ════════════════════════════════════════════════ 11. RADII El proyecto es de "esquinas vivas" (editorial, no SaaS). Solo elementos circulares (avatar, dot, pill) usan radius. ════════════════════════════════════════════════ */ --bb-radius: 0; --bb-radius-pill: 999px; --bb-radius-circle: 50%; /* ════════════════════════════════════════════════ 12. Z-INDEX SCALE Mantener consistente para evitar guerras de z-index. ════════════════════════════════════════════════ */ --bb-z-base: 1; --bb-z-dropdown: 1000; --bb-z-sticky: 1020; --bb-z-navbar: 1030; --bb-z-fixed: 1040; --bb-z-modal: 1050; --bb-z-popover: 1070; --bb-z-toast: 1080; } /* ════════════════════════════════════════════════ ACCENT THEMING — body[data-brand="..."] Sobreescribe --bb-accent* con la paleta de la marca. Cualquier componente que use var(--bb-accent) se va a teñir automáticamente sin lógica adicional. ════════════════════════════════════════════════ */ body[data-brand="cocodinus"] { --bb-accent: var(--cocodinus); --bb-accent-dark: var(--cocodinus-dark); --bb-accent-soft: var(--cocodinus-soft); --bb-accent-text: #ffffff; } body[data-brand="dubtech"] { --bb-accent: var(--dubtech); --bb-accent-dark: var(--dubtech-dark); --bb-accent-soft: var(--dubtech-soft); --bb-accent-text: #ffffff; } body[data-brand="viajante"] { --bb-accent: var(--viajante); --bb-accent-dark: var(--viajante-dark); --bb-accent-soft: var(--viajante-soft); --bb-accent-text: #ffffff; }