/* ========================================================================== Superium — Palette tokens -------------------------------------------------------------------------- This is the ONLY file that assigns token values. Every other stylesheet consumes them via var(--sp-*). Each homepage carries its palette as a class on , so two palettes can never collide. sp-theme--fresh warm home-1-fresh.html sp-theme--aqua cool home-2-aqua.html sp-theme--graphite neutral home-3-graphite.html Inner pages (market, cart, checkout, profile ...) carry sp-theme--fresh, the house palette. To re-skin the whole shop, change that one class. The selectors are plain classes rather than `body.…`, so a palette can also be applied to a subtree — demo.html uses that to show every component in all three palettes side by side on one page. ========================================================================== */ :root { /* Brand ---------------------------------------------------------------- */ --sp-primary: #f2600c; --sp-primary-strong: #d34e05; --sp-primary-soft: #fff1e7; --sp-on-primary: #ffffff; --sp-accent: #16a34a; --sp-accent-soft: #e8f7ee; /* Semantic ------------------------------------------------------------- */ --sp-success: #16a34a; --sp-danger: #e11d48; --sp-warning: #f59e0b; --sp-info: #2563eb; /* Surfaces & text ------------------------------------------------------ */ --sp-bg: #f4f5f7; --sp-surface: #ffffff; --sp-surface-2: #fafafa; --sp-text: #23262b; --sp-text-soft: #4b5158; --sp-muted: #85898f; --sp-border: #e4e5e8; --sp-border-strong: #cfd1d5; /* Shape & depth -------------------------------------------------------- */ --sp-radius-sm: 6px; --sp-radius: 10px; --sp-radius-lg: 16px; --sp-radius-xl: 24px; --sp-radius-pill: 999px; --sp-shadow: 0 1px 4px rgba(19, 22, 27, 0.07); --sp-shadow-md: 0 4px 14px rgba(19, 22, 27, 0.09); --sp-shadow-lg: 0 12px 32px rgba(19, 22, 27, 0.13); /* Layout --------------------------------------------------------------- */ --sp-container: 1336px; --sp-gutter: 16px; --sp-section-y: clamp(28px, 4vw, 56px); --sp-header-h: 64px; /* Type ----------------------------------------------------------------- */ --sp-font: 'Dana', 'Vazirmatn', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; /* Display face for headings. Rokh carries the Persian glyphs; Dana and Vazirmatn back it up for Latin, which Rokh only partially covers. */ --sp-font-display: 'Rokh', 'Dana', 'Vazirmatn', ui-sans-serif, system-ui, sans-serif; /* Motion --------------------------------------------------------------- */ --sp-ease: cubic-bezier(0.22, 1, 0.36, 1); --sp-dur: 0.25s; } /* ========================================================================== 1 — FRESH · warm · home-1-fresh.html (house palette) Orange primary with a green "fresh produce" accent on a cream ground. ========================================================================== */ .sp-theme--fresh { --sp-primary: #f2600c; --sp-primary-strong: #d34e05; --sp-primary-soft: #fff1e7; --sp-on-primary: #ffffff; --sp-accent: #16a34a; --sp-accent-soft: #e8f7ee; --sp-bg: #fdf7f1; --sp-surface: #ffffff; --sp-surface-2: #fffaf5; --sp-text: #241a12; --sp-text-soft: #55483e; --sp-muted: #8d8177; --sp-border: #ece2d8; --sp-border-strong: #dbcdbf; --sp-radius: 12px; --sp-radius-lg: 20px; } /* ========================================================================== 2 — AQUA · cool · home-2-aqua.html Teal primary, amber accent, crisp white ground. Cooler and more clinical than FRESH: tighter radii, cleaner separation, no cream. ========================================================================== */ .sp-theme--aqua { --sp-primary: #0e7490; --sp-primary-strong: #0a5a70; --sp-primary-soft: #e6f6fa; --sp-on-primary: #ffffff; --sp-accent: #f59e0b; --sp-accent-soft: #fef4e2; --sp-bg: #f1f5f9; --sp-surface: #ffffff; --sp-surface-2: #f8fafc; --sp-text: #0f2530; --sp-text-soft: #3c525e; --sp-muted: #778c98; --sp-border: #dde6ec; --sp-border-strong: #c3d1da; --sp-radius: 8px; --sp-radius-lg: 14px; --sp-shadow: 0 1px 3px rgba(14, 37, 48, 0.08); --sp-shadow-md: 0 4px 12px rgba(14, 37, 48, 0.1); --sp-shadow-lg: 0 14px 34px rgba(14, 37, 48, 0.14); } /* ========================================================================== 3 — GRAPHITE · neutral / dark · home-3-graphite.html Lime signal on graphite. This demo IS the dark design — there is no runtime theme toggle in the package. ========================================================================== */ .sp-theme--graphite { --sp-primary: #a3e635; --sp-primary-strong: #bef264; --sp-primary-soft: #1c2410; --sp-on-primary: #14180d; --sp-accent: #fb923c; --sp-accent-soft: #2a1a0f; --sp-success: #4ade80; --sp-danger: #fb7185; --sp-warning: #fbbf24; --sp-info: #60a5fa; --sp-bg: #0f1115; --sp-surface: #171a20; --sp-surface-2: #1e222a; --sp-text: #f2f4f7; --sp-text-soft: #b9bfc9; --sp-muted: #838b98; --sp-border: #282d36; --sp-border-strong: #3a414d; --sp-radius: 10px; --sp-radius-lg: 18px; --sp-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); --sp-shadow-md: 0 6px 18px rgba(0, 0, 0, 0.55); --sp-shadow-lg: 0 18px 44px rgba(0, 0, 0, 0.6); color-scheme: dark; }