Global

1@import url('https://fonts.googleapis.com/css2?family=Wix+Madefor+Text:wght@400;500;600;700;800&display=swap');
2@import 'tailwindcss';
3
4/* ─── THE design system ─────────────────────────────────────────────────────────────────
5   Theme the entire store by editing THIS @theme block (same token family as the official
6   Wix headless templates). Every shipped component styles itself from these via Tailwind
7   utilities (bg-primary, text-muted-foreground, rounded-lg, …) — change a token, everything
8   follows. A dark theme is just flipped values (dark background/foreground, adjusted
9   secondary/border). Don't restyle shipped component markup; restyle the tokens.
10
11   Choosing values: argue polarity from the business — light is not "cheap" (wellness/food
12   usually read better light); never dark-by-default for "premium". Palette: one dominant +
13   accents from ADJACENT hues (~30° arc), 2-4 colors total. Every background/foreground pair
14   you set must hit WCAG 4.5:1 (3:1 for text ≥24px); body copy never below 16px/1.5. Derive
15   from THIS brand — a look repeated across projects is a failure, not a shortcut. The user's
16   explicit direction beats all of this except the contrast floor. */
17@theme {
18  --color-background: hsl(0 0% 100%);
19  --color-foreground: hsl(230 24% 14%);
20  --color-primary: hsl(230 24% 14%);
21  --color-primary-foreground: hsl(0 0% 100%);
22  --color-secondary: hsl(228 24% 96%);
23  --color-secondary-foreground: hsl(230 24% 14%);
24  --color-muted-foreground: hsl(228 8% 46%);
25  --color-border: hsl(220 14% 90%);
26
27  --radius-lg: 12px;
28  --radius-md: 8px;
29  --radius-sm: 6px;
30
31  --font-sans: 'Wix Madefor Text', system-ui, sans-serif;
32}
33
34@layer base {
35  body {
36    background-color: var(--color-background);
37    color: var(--color-foreground);
38    font-family: var(--font-sans);
39    -webkit-font-smoothing: antialiased;
40    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
41  }
42}
43
44@layer utilities {
45  .eyebrow {
46    font-size: 0.8125rem;
47    font-weight: 600;
48    letter-spacing: 0.1em;
49    text-transform: uppercase;
50    color: var(--color-muted-foreground);
51  }
52}