/* ============================================================================ SEAMOSS PURE — Storefront design tokens v1.0 · 2026-07-23 · S0 del MACROPLAN-STOREFRONT Arquitectura de tres niveles, siguiendo el mecanismo de seed.com: Nivel 1 · PRIMITIVAS — valores crudos. NO se usan en componentes. Nivel 2 · SEMÁNTICO — lo que se usa: fill, text, outline, radius, spacing. Nivel 3 · ESTADO — state layers de opacidad para hover/pressed/focus. Traducción Seed → SEAMOSS PURE: seed-green #1c3a13 → olive #55603F fondos de sección, botones snow-white #fcfcf7 → cream #F5F1E8 fondo de página (nunca blanco puro) bright-green #d3fa99 → sage #8A9B6E barra de anuncio, badges faded-green → stone #D8D3C4 superficies elevadas Lo que copiamos de Seed es el MECANISMO, no la estética ni sus verbos. Ver 02-Marca/referencias/seed/README.md § "Qué copiar y qué no". ============================================================================ */ @theme { /* ========================================================================== NIVEL 1 · PRIMITIVAS ========================================================================== */ /* ---- Color base · PRUEBA v2 (2026-07-24) -------------------------------- Los pálidos anteriores (crema/piedra/salvia) hacían el sitio genérico: todo flotaba en el mismo rango tonal y nada empujaba. Esta versión sube el contraste tomando los valores REALES de la referencia, extraídos de sus tokens capturados y no a ojo. El eje es un verde MUY oscuro contra un lima brillante, con ocre de apoyo — que es de donde sale la tensión ocre/verde. Lo pálido pasa a ser fondo, no protagonista. ⚠️ Es una prueba de dirección: se mira, se ajusta y se decide. Los nombres de token no cambian, así que revertir es cambiar estos valores y ya. ------------------------------------------------------------------------ */ /* Fondos: blanco cálido y verdes pálidos, ya no beige */ --color-cream: #fcfcf7; /* fondo de página */ --color-stone: #eff1e4; /* superficie elevada, verdosa */ --color-mist: #e9f0ca; /* verde pálido, un paso más saturado */ /* El acento que da el golpe: lima brillante */ --color-lime: #d3fa99; /* Verdes de marca: el oscuro es MUCHO más oscuro que antes */ --color-olive: #1c3a13; /* era #55603f — el salto de contraste */ --color-olive-deep: #14290d; --color-moss: #3d5b34; /* verde medio, para superficies */ --color-sage: #778971; /* verde grisáceo apagado */ /* Ocre: el contraste cálido contra tanto verde */ --color-ochre: #ebb057; --color-carbon: #14180f; /* casi negro, con verde dentro */ --color-slate: #5d6b57; /* texto secundario, verdoso */ --color-white: #ffffff; --color-brick: #a63a2b; /* error */ /* ---- Escalas de opacidad ------------------------------------------------ 11 pasos de oscuro y 11 de claro. La disciplina de Seed: NUNCA se inventa un rgba() sobre la marcha — se toma de aquí. ------------------------------------------------------------------------ */ --color-dark-opacity-00: rgb(20 24 15 / 0); --color-dark-opacity-08: rgb(20 24 15 / 0.08); --color-dark-opacity-10: rgb(20 24 15 / 0.1); --color-dark-opacity-12: rgb(20 24 15 / 0.12); --color-dark-opacity-16: rgb(20 24 15 / 0.16); --color-dark-opacity-20: rgb(20 24 15 / 0.2); --color-dark-opacity-30: rgb(20 24 15 / 0.3); --color-dark-opacity-40: rgb(20 24 15 / 0.4); --color-dark-opacity-50: rgb(20 24 15 / 0.5); --color-dark-opacity-70: rgb(20 24 15 / 0.7); --color-dark-opacity-100: rgb(20 24 15 / 1); --color-light-opacity-00: rgb(252 252 247 / 0); --color-light-opacity-08: rgb(252 252 247 / 0.08); --color-light-opacity-10: rgb(252 252 247 / 0.1); --color-light-opacity-12: rgb(252 252 247 / 0.12); --color-light-opacity-16: rgb(252 252 247 / 0.16); --color-light-opacity-20: rgb(252 252 247 / 0.2); --color-light-opacity-30: rgb(252 252 247 / 0.3); --color-light-opacity-40: rgb(252 252 247 / 0.4); --color-light-opacity-50: rgb(252 252 247 / 0.5); --color-light-opacity-70: rgb(252 252 247 / 0.7); --color-light-opacity-100: rgb(252 252 247 / 1); /* ---- Escala de tamaño · base 4px --------------------------------------- Todo el espaciado, los radios y las medidas derivan de aquí. ------------------------------------------------------------------------ */ --size-00: 0; --size-025: 0.0625rem; /* 1px — hairline */ --size-050: 0.125rem; /* 2px */ --size-100: 0.25rem; /* 4px — base */ --size-200: 0.5rem; /* 8px */ --size-300: 0.75rem; /* 12px */ --size-400: 1rem; /* 16px */ --size-500: 1.25rem; /* 20px */ --size-600: 1.5rem; /* 24px */ --size-800: 2rem; /* 32px */ --size-1000: 2.5rem; /* 40px */ --size-1200: 3rem; /* 48px */ --size-1400: 3.5rem; /* 56px */ --size-1600: 4rem; /* 64px */ --size-1800: 4.5rem; /* 72px */ --size-2000: 5rem; /* 80px */ --size-2500: 6.25rem; /* 100px */ --size-3000: 7.5rem; /* 120px */ --size-25000: 62.5rem; /* 1000px — solo para radius-full */ /* ---- Escala tipográfica · nombrada por peso visual ---------------------- Con HUECOS a propósito (no existen 700, 900, 1100, 1300–1500). El hueco obliga a elegir de la escala en vez de inventar un tamaño. ------------------------------------------------------------------------ */ --font-size-250: 0.625rem; /* 10px */ --font-size-300: 0.75rem; /* 12px */ --font-size-350: 0.875rem; /* 14px */ --font-size-400: 1rem; /* 16px — base, nunca menos en móvil */ --font-size-450: 1.125rem; /* 18px */ --font-size-500: 1.25rem; /* 20px */ --font-size-600: 1.5rem; /* 24px — mínimo para Cormorant */ --font-size-800: 2rem; /* 32px */ --font-size-1000: 2.5rem; /* 40px */ --font-size-1200: 3rem; /* 48px */ --font-size-1600: 4rem; /* 64px */ /* ---- Familias ----------------------------------------------------------- Cormorant NUNCA por debajo de 24px (--font-size-600). Todo lo funcional — precios, botones, fichas, Supplement Facts — Montserrat. ------------------------------------------------------------------------ */ /* PRUEBA v2: la web pasa a sans redonda; el logo conserva la serif. */ --font-display: "Outfit", "Segoe UI", system-ui, sans-serif; --font-serif: "Cormorant Garamond", "Times New Roman", serif; /* El peso del display vive en un token porque cambia con la familia: la serif pedía 500, la geométrica necesita 600 para tener presencia. Estaba repetido en 15 declaraciones — ahora se cambia en un sitio. */ --weight-display: 600; --font-body: "Montserrat", system-ui, -apple-system, sans-serif; /* ========================================================================== NIVEL 2 · SEMÁNTICO — esto es lo que se usa en los componentes ========================================================================== */ /* ---- Superficies -------------------------------------------------------- */ --color-fill-primary: var(--color-cream); /* fondo de página */ --color-fill-secondary: var(--color-stone); /* superficie elevada */ --color-fill-tertiary: var(--color-white); /* tarjetas */ --color-fill-brand: var(--color-olive); /* secciones de marca, botones */ --color-fill-brand-subtle: var(--color-olive-deep); --color-fill-accent: var(--color-lime); /* barra de anuncio, badges */ --color-fill-warm: var(--color-ochre); /* el contrapunto cálido */ --color-fill-inverse: var(--color-carbon); /* secciones oscuras */ /* ---- Texto -------------------------------------------------------------- Las variantes `inverse` son imprescindibles: la home alterna fondos claro / oliva sección a sección. ------------------------------------------------------------------------ */ --color-text-primary: var(--color-carbon); /* 12.60:1 sobre cream */ --color-text-secondary: var(--color-slate); /* 4.83:1 sobre cream */ --color-text-brand: var(--color-olive); /* 5.95:1 sobre cream */ --color-text-disabled: var(--color-slate); --color-text-inverse-primary: var(--color-cream); /* 5.95:1 sobre brand */ --color-text-inverse-secondary: var(--color-stone); --color-text-on-accent: var(--color-olive); /* verde profundo sobre lima */ --color-text-error: var(--color-brick); /* ---- Bordes: color y grosor separados ---------------------------------- */ --color-outline-neutral: var(--color-stone); --color-outline-primary: var(--color-olive); --color-outline-light: var(--color-light-opacity-20); --color-outline-error: var(--color-brick); --stroke-default: var(--size-025); /* 1px */ --stroke-active: 0.09375rem; /* 1.5px */ /* ---- Velos y vidrios (overlays sobre fotografía) ----------------------- */ --scrim-dark-20: var(--color-dark-opacity-20); --scrim-dark-50: var(--color-dark-opacity-50); --scrim-glass-light-10: var(--color-light-opacity-10); --scrim-glass-light-20: var(--color-light-opacity-20); /* ---- Radios · apuntan a la escala de tamaño ---------------------------- */ --radius-xs: var(--size-100); /* 4px */ --radius-sm: var(--size-200); /* 8px */ --radius-md: var(--size-400); /* 16px */ --radius-lg: var(--size-600); /* 24px */ --radius-xl: var(--size-800); /* 32px */ --radius-2xl: var(--size-1200); /* 48px — tarjetas grandes y vidrios */ --radius-3xl: var(--size-1600); /* 64px — secciones que se solapan */ --radius-full: var(--size-25000); /* ---- Espaciado semántico · apunta a la escala, nunca a un valor crudo -- */ --gutter-none: var(--size-00); --gutter-small: var(--size-200); --gutter-medium: var(--size-400); --gutter-large: var(--size-800); --margin-none: var(--size-00); --margin-small: var(--size-400); --margin-medium: var(--size-800); --margin-large: var(--size-1600); --margin-giant: var(--size-3000); /* ---- Rejilla de página -------------------------------------------------- */ --page-grid-column: var(--size-200); --page-grid-gutter: var(--size-400); --page-grid-margin: var(--size-400); --page-max-width: 90rem; /* 1440px */ --page-reading-width: 68ch; /* ---- Alias tipográficos · legibles, apuntan a la escala ---------------- */ --text-display: var(--font-size-1600); --text-h1: var(--font-size-1200); --text-h2: var(--font-size-800); --text-h3: var(--font-size-600); --text-lead: var(--font-size-450); --text-body: var(--font-size-400); --text-small: var(--font-size-350); --text-eyebrow: var(--font-size-300); --leading-display: 1.05; --leading-heading: 1.18; --leading-body: 1.6; --tracking-display: -0.035em; --tracking-body: 0em; --tracking-eyebrow: 0.16em; /* ---- Movimiento · contenido, nada rebota ------------------------------- */ --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --duration-fast: 160ms; --duration-base: 240ms; --duration-slow: 400ms; /* ---- Elevación · esta marca separa con filetes, no con sombras --------- */ --shadow-overlay: 0 8px 32px var(--color-dark-opacity-12); } /* ============================================================================ NIVEL 3 · STATE LAYERS El mecanismo de Seed: en vez de definir un color de hover por componente, se superpone una capa de opacidad predefinida. Un botón oliva en hover = oliva + 8% de oscuro encima. Un sistema, no cien decisiones. ============================================================================ */ :root { --state-layer-dark-enabled: var(--color-dark-opacity-00); --state-layer-dark-hovered: var(--color-dark-opacity-08); --state-layer-dark-focused: var(--color-dark-opacity-12); --state-layer-dark-pressed: var(--color-dark-opacity-16); --state-layer-dark-disabled: var(--color-dark-opacity-40); --state-layer-light-enabled: var(--color-light-opacity-00); --state-layer-light-hovered: var(--color-light-opacity-08); --state-layer-light-focused: var(--color-light-opacity-12); --state-layer-light-pressed: var(--color-light-opacity-16); --state-layer-light-disabled: var(--color-light-opacity-40); } /* Utilidad: cualquier elemento con .state-layer recibe el mecanismo completo. */ @layer components { .state-layer { position: relative; isolation: isolate; } .state-layer::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--state-layer-dark-enabled); transition: background var(--duration-fast) var(--ease-out); pointer-events: none; z-index: 1; } .state-layer:hover::after { background: var(--state-layer-dark-hovered); } .state-layer:active::after { background: var(--state-layer-dark-pressed); } .state-layer:focus-visible::after { background: var(--state-layer-dark-focused); } /* Sobre superficies oscuras se invierte la capa. */ .state-layer--on-dark::after { background: var(--state-layer-light-enabled); } .state-layer--on-dark:hover::after { background: var(--state-layer-light-hovered); } .state-layer--on-dark:active::after { background: var(--state-layer-light-pressed); } .state-layer--on-dark:focus-visible::after { background: var(--state-layer-light-focused); } }