/* ShopperzKey — generated from tokens.json */
:root, [data-theme="light"] {
  --bg: #f2f2f2;
  --bg-raised: #ffffff;
  --bg-soft: #f7f7f7;
  --line: #e1e1e1;
  --fg: #111111;
  --fg-muted: #555555;
  --accent: #b6142c;
  --accent-fill: #d01f3f;
  --accent-fill-deep: #b6142c;
  --on-accent: #ffffff;
  --accent-soft: #fff1f3;
  --focus: #b6142c;
  --pure-black: #000000;
  --ink: #111111;
  --ink-soft: #141414;
  --charcoal: #222222;
  --surface-dark: #333333;
  --muted: #555555;
  --subtle: #888888;
  --border: #e1e1e1;
  --frame: #eeeeee;
  --canvas: #f2f2f2;
  --soft-white: #f7f7f7;
  --pure-white: #ffffff;
  --action: #007cff;
  --danger: #f84f65;
  --brand: var(--charcoal);
  --brand-fg: var(--pure-white);
  --crimson-50: #fff1f3;
  --crimson-100: #ffe3e7;
  --crimson-200: #fecbd3;
  --crimson-300: #fca3b2;
  --crimson-400: #f76d85;
  --crimson-500: #ea3d5c;
  --crimson-600: #d01f3f;
  --crimson-700: #b6142c;
  --crimson-800: #971428;
  --crimson-900: #7e1526;
  --crimson-950: #460611;
  --logo-ink: #231f20;
  --shadow-card: 0 2px 20px rgba(0, 0, 0, 0.03);
  --shadow-card-hover: 0 12px 30px rgba(0, 0, 0, 0.08);
  --shadow-cta: 0 2px 16px rgba(0, 0, 0, 0.2);
  --shadow-accent: 0 10px 28px -10px rgba(182, 20, 44, 0.6);
}
[data-theme="dark"] {
  --bg: #000000;
  --bg-raised: #141414;
  --bg-soft: #222222;
  --line: #333333;
  --fg: #f7f7f7;
  --fg-muted: #a3a3a3;
  --accent: #f76d85;
  --accent-fill: #d01f3f;
  --accent-fill-deep: #b6142c;
  --on-accent: #ffffff;
  --accent-soft: #460611;
  --focus: #f76d85;
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-20: 80px;
  --space-24: 96px;
  --radius-xs: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-pill: 999px;
  --blur-nav: 50px;
  --blur-glass: 40px;
  --max-width-site: 1440px;
  --height-hero-sm: 85vh;
  --height-hero-md: 90vh;
  --font-display: "Inter Tight", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --ease-fluid: cubic-bezier(0.2, 1, 1, 1);
  --ease-standard: cubic-bezier(0.4, 0.4, 0, 1);
  --ease-snappy: cubic-bezier(0, 0.5, 0.22, 1);
  --ease-drop: cubic-bezier(0, 1, 0.5, 1);
}
.display-1 { font-family: var(--font-display); font-size: 80px; line-height: 1; font-weight: 600; letter-spacing: -0.04em; }
.display-2 { font-family: var(--font-display); font-size: 72px; line-height: 1; font-weight: 600; letter-spacing: -0.04em; }
.display-md { font-family: var(--font-display); font-size: 60px; line-height: 1; font-weight: 600; letter-spacing: -0.04em; }
.display-sm { font-family: var(--font-display); font-size: 40px; line-height: 1; font-weight: 600; letter-spacing: -0.04em; }
.heading-1 { font-family: var(--font-display); font-size: 64px; line-height: 1.3; font-weight: 700; letter-spacing: -0.04em; }
.heading-2 { font-family: var(--font-display); font-size: 48px; line-height: 1.1; font-weight: 700; letter-spacing: -0.04em; }
.statement { font-family: var(--font-display); font-size: 28px; line-height: 1.25; font-weight: 600; letter-spacing: -0.04em; }
.body-lg { font-family: var(--font-body); font-size: 20px; line-height: 1.4; font-weight: 500; letter-spacing: -0.04em; }
.body-md { font-family: var(--font-body); font-size: 17px; line-height: 1.2; font-weight: 500; letter-spacing: -0.04em; }
.body { font-family: var(--font-body); font-size: 16px; line-height: 1.4; font-weight: 400; }
.ui { font-family: var(--font-body); font-size: 15px; line-height: 1.4; font-weight: 500; }
.caption { font-family: var(--font-body); font-size: 12px; line-height: 1.4; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }