/* ============================================================ STOREFRONT V2 — DESIGN TOKENS (Sprint UX-1, §4 design doc) ------------------------------------------------------------ Single source of truth de variables CSS del storefront cross-vertical. Las tokens del config por tenant (StorefrontConfig.color_primario / color_secundario) se exponen como vars `--tenant-color-*` desde base_storefront.html y se mapean aqui como `--sf-color-primary`. Naming: kebab-case con prefijo `--sf-` para distinguir del resto del proyecto (core/ui usa `--cu-`, design-system usa `--ds-`). Convencion estable: NO renombrar variables ya referenciadas por templates. Dark mode: activa via `.dark` class en (anti-FOUC init en base_storefront.html lee localStorage `sf-theme`) o via `prefers-color-scheme: dark` (fallback OS). ============================================================ */ :root { /* === Brand colors (sobrescribibles por StorefrontConfig) === */ /* --tenant-color-primary lo inyecta base_storefront.html desde storefront_cfg.color_primario. Fallback al brand default del storefront (sky-600). */ --sf-color-primary: var(--tenant-color-primary, #0ea5e9); --sf-color-primary-fg: #ffffff; --sf-color-primary-50: #f0f9ff; --sf-color-primary-100: #e0f2fe; --sf-color-primary-500: #0ea5e9; --sf-color-primary-600: #0284c7; --sf-color-primary-700: #0369a1; --sf-color-primary-900: #0c4a6e; --sf-color-secondary: var(--tenant-color-secondary, #0f172a); --sf-color-accent: #f59e0b; /* === Semantic colors === */ --sf-color-success: #16a34a; --sf-color-warning: #f59e0b; --sf-color-danger: #e11d48; --sf-color-info: #2563eb; /* === Surface (light) === */ --sf-color-bg: #ffffff; --sf-color-bg-elevated: #f8fafc; --sf-color-bg-subtle: #f1f5f9; --sf-color-text: #0f172a; --sf-color-text-muted: #475569; --sf-color-border: #e2e8f0; /* === Typography family === */ --sf-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --sf-font-display: "Poppins", var(--sf-font-sans); --sf-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* === Typography scale (Display / H1-H6 / Body L-M-S / Caption / Overline) === */ --sf-font-display-size: 3rem; /* 48px */ --sf-font-h1: 2.25rem; /* 36px */ --sf-font-h2: 1.875rem; /* 30px */ --sf-font-h3: 1.5rem; /* 24px */ --sf-font-h4: 1.25rem; /* 20px */ --sf-font-h5: 1.125rem; /* 18px */ --sf-font-h6: 1rem; /* 16px */ --sf-font-body-lg: 1.125rem; /* 18px */ --sf-font-body: 1rem; /* 16px */ --sf-font-body-sm: 0.875rem; /* 14px */ --sf-font-caption: 0.75rem; /* 12px */ --sf-font-overline: 0.625rem; /* 10px */ /* === Line-height === */ --sf-leading-tight: 1.1; --sf-leading-snug: 1.25; --sf-leading-normal: 1.5; --sf-leading-relaxed: 1.65; /* === Letter-spacing === */ --sf-tracking-tight: -0.02em; --sf-tracking-normal: 0; --sf-tracking-wide: 0.025em; --sf-tracking-wider: 0.12em; /* === Spacing (4-base) === */ --sf-space-1: 0.25rem; /* 4px */ --sf-space-2: 0.5rem; /* 8px */ --sf-space-3: 0.75rem; /* 12px */ --sf-space-4: 1rem; /* 16px */ --sf-space-6: 1.5rem; /* 24px */ --sf-space-8: 2rem; /* 32px */ --sf-space-12: 3rem; /* 48px */ --sf-space-16: 4rem; /* 64px */ --sf-space-24: 6rem; /* 96px */ /* === Radius === */ --sf-radius-sm: 0.25rem; /* 4px */ --sf-radius-md: 0.5rem; /* 8px */ --sf-radius-lg: 0.75rem; /* 12px */ --sf-radius-xl: 1rem; /* 16px */ --sf-radius-2xl: 1.5rem; /* 24px */ --sf-radius-full: 9999px; /* === Shadows === */ --sf-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --sf-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --sf-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --sf-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); --sf-shadow-focus: 0 0 0 3px rgb(14 165 233 / 0.25); /* === Motion === */ --sf-motion-snap: 75ms; --sf-motion-fast: 150ms; --sf-motion-standard: 300ms; --sf-motion-slow: 500ms; --sf-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --sf-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --sf-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* === Z-index scale (compatible con el ya usado por sf-toast/sf-slider) === */ --sf-z-base: 1; --sf-z-dropdown: 1000; --sf-z-sticky: 1020; --sf-z-fixed: 1030; --sf-z-backdrop: 1040; --sf-z-overlay: 1040; --sf-z-modal: 1050; --sf-z-popover: 1060; --sf-z-toast: 1070; --sf-z-tooltip: 1080; /* === Breakpoints (Tailwind default, expuestos como tokens) === */ --sf-breakpoint-sm: 640px; --sf-breakpoint-md: 768px; --sf-breakpoint-lg: 1024px; --sf-breakpoint-xl: 1280px; --sf-breakpoint-2xl: 1536px; } /* === Dark mode via prefers-color-scheme (cuando el usuario nunca eligio) === */ @media (prefers-color-scheme: dark) { :root:not(.light):not([data-theme="light"]) { --sf-color-bg: #0f172a; --sf-color-bg-elevated: #1e293b; --sf-color-bg-subtle: #334155; --sf-color-text: #f1f5f9; --sf-color-text-muted: #94a3b8; --sf-color-border: #334155; } } /* === Dark mode explicit (class `dark` sobre , set por anti-FOUC init) === */ .dark, [data-theme="dark"] { --sf-color-bg: #0f172a; --sf-color-bg-elevated: #1e293b; --sf-color-bg-subtle: #334155; --sf-color-text: #f1f5f9; --sf-color-text-muted: #94a3b8; --sf-color-border: #334155; --sf-shadow-focus: 0 0 0 3px rgb(56 189 248 / 0.35); }