/* ============================================================ SAMER AUTOMATE — Design System Tokens Fuente única de verdad. No usar valores fuera de este archivo. ============================================================ */ :root { /* ---------------------------------------------------------- SPACING — escala base 4px ---------------------------------------------------------- Nombres: space-{n} donde n es el multiplicador de 4px Semánticos: xs(8) sm(12) md(16) lg(24) xl(32) 2xl(48) 3xl(64) 4xl(96) 5xl(128) ---------------------------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; /* Alias semánticos */ --space-xs: var(--space-2); /* 8px */ --space-sm: var(--space-3); /* 12px */ --space-md: var(--space-4); /* 16px */ --space-lg: var(--space-5); /* 24px */ --space-xl: var(--space-6); /* 32px */ --space-2xl: var(--space-7); /* 48px */ --space-3xl: var(--space-8); /* 64px */ --space-4xl: var(--space-9); /* 96px */ --space-5xl: var(--space-10); /* 128px */ /* ---------------------------------------------------------- LAYOUT ---------------------------------------------------------- */ --container: 1360px; /* ancho máximo contenido principal */ --container-text: 1100px; /* ancho máximo bloques de texto amplios */ --frame-gap: 12px; /* margen entre secciones enmarcadas y viewport */ --section-pad-v: var(--space-4xl); /* 96px — ritmo vertical entre secciones */ --section-pad-h: clamp(var(--space-lg), 4vw, var(--space-5xl)); /* 24–128px horizontal */ /* ---------------------------------------------------------- TIPOGRAFÍA Escala: 8 niveles. Headings con clamp para fluidez. line-height y tracking definidos por rol. ---------------------------------------------------------- */ --font-sans: 'Host Grotesk', -apple-system, BlinkMacSystemFont, sans-serif; /* Tamaños */ --text-micro: 11px; /* nav, botones, pills, tags UI */ --text-caption: 12px; /* métricas small, legal */ --text-body: 16px; /* cuerpo base */ --text-lead: 18px; /* párrafos destacados, hero-sub */ --text-subtitle: clamp(20px, 2vw, 28px); /* h3 — card titles, process */ --text-heading: clamp(28px, 3.5vw, 52px); /* h2 — sección heads, footer */ --text-display: clamp(36px, 5vw, 74px); /* h2 grande — framed headings */ --text-hero: clamp(48px, 8vw, 110px); /* h1 — hero único */ /* Pesos */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; /* Line-heights */ --leading-tight: 1.0; /* hero, display — letras grandes */ --leading-snug: 1.15; /* headings */ --leading-normal: 1.5; /* body base */ --leading-relaxed: 1.7; /* párrafos largos */ /* Tracking (letter-spacing) */ --tracking-tight: -0.03em; /* hero, display */ --tracking-snug: -0.02em; /* headings */ --tracking-normal: 0em; /* body */ --tracking-wide: 0.08em; /* UI pequeño (botones, nav) */ --tracking-wider: 0.12em; /* labels, tags */ /* ---------------------------------------------------------- COLOR — paleta base ---------------------------------------------------------- */ /* Neutros */ --color-bg: #E8E6DF; /* cream — fondo principal */ --color-bg-subtle: #EEECE5; /* cream-soft — fondo de card sobre cream */ --color-surface: #1C2622; /* dark — secciones oscuras */ --color-surface-mid: #232D28; /* dark-2 — card oscura media */ --color-surface-raised: #2B3530; /* dark-3 — card oscura elevada / hover */ /* Texto */ --color-text: #1C2622; /* texto primario sobre cream */ --color-text-inverse: #F3F0E6; /* texto primario sobre dark */ --color-text-muted: rgba(28, 38, 34, 0.50); /* secundario sobre cream */ --color-text-muted-inv: rgba(243, 240, 230, 0.50); /* secundario sobre dark */ --color-text-dim: rgba(28, 38, 34, 0.28); /* terciario / labels sobre cream */ --color-text-dim-inv: rgba(243, 240, 230, 0.38); /* terciario / labels sobre dark */ /* Marca */ --color-brand: #C8F06A; /* lima — acento principal */ --color-brand-hover: #D8F491; /* lima hover */ --color-brand-10: rgba(200, 240, 106, 0.10); /* lima low-opacity bg */ --color-brand-40: rgba(200, 240, 106, 0.40); /* lima border */ /* Bordes */ --color-border: rgba(28, 38, 34, 0.12); /* borde sobre cream */ --color-border-inv: rgba(243, 240, 230, 0.14); /* borde sobre dark */ --color-border-strong: rgba(28, 38, 34, 0.25); /* borde énfasis sobre cream */ --color-border-strong-inv: rgba(243, 240, 230, 0.28); /* borde énfasis sobre dark */ /* Superficies alpha (para overlays y fondos semi-transparentes) */ --color-surface-alpha-50: rgba(28, 38, 34, 0.50); --color-surface-alpha-60: rgba(28, 38, 34, 0.60); --color-surface-alpha-90: rgba(43, 53, 48, 0.90); /* featured card */ /* Hover states */ --color-hover-light: rgba(28, 38, 34, 0.05); /* hover sobre cream */ --color-hover-dark: rgba(243, 240, 230, 0.08); /* hover sobre dark */ /* ---------------------------------------------------------- BORDER RADIUS ---------------------------------------------------------- */ --radius-xs: 4px; /* badges compactos */ --radius-sm: 6px; /* nav items, plan-btn */ --radius-md: 8px; /* botones, inputs, elementos UI */ --radius-lg: 12px; /* logo, nav-pill, card-arrow — consolida 10px y 14px */ --radius-xl: 16px; /* secciones enmarcadas, hero, footer */ --radius-pill: 999px; /* eyebrow-pill, step-pill */ /* ---------------------------------------------------------- SOMBRAS ---------------------------------------------------------- */ --shadow-sm: 0 2px 8px rgba(28, 38, 34, 0.08); --shadow-md: 0 4px 16px rgba(28, 38, 34, 0.12); --shadow-lg: 0 8px 32px rgba(28, 38, 34, 0.16); /* ---------------------------------------------------------- BREAKPOINTS (referencia — usar en @media manualmente) --bp-sm: 640px mobile landscape --bp-md: 768px tablet portrait --bp-lg: 1024px tablet landscape / small desktop --bp-xl: 1280px desktop ---------------------------------------------------------- */ /* ---------------------------------------------------------- Z-INDEX ---------------------------------------------------------- */ --z-base: 1; --z-above: 2; --z-overlay: 10; --z-nav: 100; /* ---------------------------------------------------------- TRANSICIONES ---------------------------------------------------------- */ --transition-fast: 0.15s ease; --transition-base: 0.20s ease; --transition-slow: 0.35s ease; /* ---------------------------------------------------------- COMPONENTES ESPECÍFICOS (compuestos de tokens primitivos, no valores mágicos) ---------------------------------------------------------- */ /* Frame — secciones redondeadas con margen */ --frame-radius: var(--radius-xl); --frame-margin: var(--frame-gap); /* Botón */ --btn-radius: var(--radius-md); --btn-pad-v: var(--space-4); /* 16px */ --btn-pad-h: var(--space-5); /* 24px */ --btn-arrow-w: 52px; --btn-font-size: var(--text-micro); /* Nav */ --nav-pad-v: var(--space-3); /* 12px */ --nav-pad-h: var(--section-pad-h); --nav-pill-pad: var(--space-2); /* 8px */ --nav-link-pad-v: var(--space-2); /* 8px */ --nav-link-pad-h: var(--space-4); /* 16px */ --nav-radius: var(--radius-lg); /* 12px — logo + pill */ --nav-item-radius: var(--radius-sm);/* 6px — links + cta */ /* Card */ --card-radius: var(--radius-xl); /* 16px — unifica con frame */ --card-pad: var(--space-5); /* 24px */ --card-gap: var(--space-4); /* 16px — cases-grid gap */ /* Notch (esquina inferior derecha de case-cards) */ --notch-w: 76px; --notch-h: 60px; --notch-corner: 14px; --notch-arrow-w: 56px; --notch-arrow-h: 44px; --notch-radius: var(--radius-lg); /* 12px */ }