skills/wix-headless-templates/shared/app/styles/global.css

@import url('https://fonts.googleapis.com/css2?family=Wix+Madefor+Text:wght@400;500;600;700;800&display=swap');
@import 'tailwindcss';

/* ─── THE design system ─────────────────────────────────────────────────────────────────
   Theme the entire store by editing THIS @theme block (same token family as the official
   Wix headless templates). Every shipped component styles itself from these via Tailwind
   utilities (bg-primary, text-muted-foreground, text-destructive, rounded-lg, …) — change a token, everything
   follows. A dark theme is just flipped values (dark background/foreground, adjusted
   secondary/border). Don't restyle shipped component markup; restyle the tokens.

   Choosing values: argue polarity from the business — light is not "cheap" (wellness/food
   usually read better light); never dark-by-default for "premium". Palette: one dominant +
   accents from ADJACENT hues (~30° arc), 2-4 colors total. Every background/foreground pair
   you set must hit WCAG 4.5:1 (3:1 for text ≥24px); body copy never below 16px/1.5. Derive
   from THIS brand — a look repeated across projects is a failure, not a shortcut. The user's
   explicit direction beats all of this except the contrast floor. */
@theme {
  --color-background: hsl(0 0% 100%);
  --color-foreground: hsl(230 24% 14%);
  --color-primary: hsl(230 24% 14%);
  --color-primary-foreground: hsl(0 0% 100%);
  --color-secondary: hsl(228 24% 96%);
  --color-secondary-foreground: hsl(230 24% 14%);
  --color-muted-foreground: hsl(228 8% 46%);
  --color-border: hsl(220 14% 90%);
  --color-destructive: hsl(0 72% 51%);

  --radius-lg: 12px;
  --radius-md: 8px;
  --radius-sm: 6px;
  /* Buttons, chips, labels, steppers and the progress bar. Follows --radius-md unless the brand
     wants otherwise: 9999px is the pill, 0 is square. Genuine circles (swatches, avatars, dots)
     stay rounded-full and do not read this. */
  --radius-control: var(--radius-md);

  --font-sans: 'Wix Madefor Text', system-ui, sans-serif;
}

@layer base {
  body {
    background-color: var(--color-background);
    color: var(--color-foreground);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
  }
}

@layer utilities {
  .eyebrow {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-muted-foreground);
  }
}