:root {
  --msk-deep-green: #1F4D3A;
  --leaf-green: #2F7D5B;
  --golden-oil: #D9A441;
  --coconut-cream: #FAF5EC;
  --pure-white: #FFFFFF;
  --soft-sand: #E9DFCE;
  --coconut-brown: #5A3423;
  --ink-charcoal: #1E2420;
  --hero-blue: #0BA3D4;
  --palm-light: #DCEDE3;
  --surface-0: #F7F1E5;
  --surface-1: #FFFDF9;
  --surface-2: #F3EBDC;
  --surface-3: #EAE0CC;
  --gold-soft: #F9EBC8;
  --emerald-dark: #133326;
  --shadow-card: 0 12px 32px -8px rgba(30, 36, 32, 0.08), 0 4px 12px -2px rgba(30, 36, 32, 0.04);
  --shadow-lifted: 0 18px 38px -10px rgba(31, 77, 58, 0.22), 0 6px 16px -4px rgba(30, 36, 32, 0.08);
  --shadow-pill: 0 4px 12px rgba(31, 77, 58, 0.18);

  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --radius-card: 28px;
  --radius-inner: 18px;
  --radius-button: 16px;
  --radius-button-pressed: 28px;
  --radius-pill: 999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 22px;
  --space-6: 28px;
  --space-8: 40px;

  --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-squish: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 150ms;
  --duration-med: 240ms;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  background-color: var(--surface-0);
  color: var(--ink-charcoal);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

body {
  background-color: var(--surface-0);
  color: var(--ink-charcoal);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

.nowrap {
  white-space: nowrap;
}

:focus-visible {
  outline: 2.5px solid var(--leaf-green);
  outline-offset: 2px;
}

.skip-to-order {
  position: absolute;
  top: -60px;
  left: var(--space-4);
  background: var(--msk-deep-green);
  color: var(--pure-white);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-inner);
  font-weight: 700;
  text-decoration: none;
  z-index: 999;
}

.skip-to-order:focus {
  top: var(--space-3);
}

.svg-icon {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  flex-shrink: 0;
}

.svg-icon.icon-sm {
  width: 17px;
  height: 17px;
}

.svg-icon.icon-xs {
  width: 14px;
  height: 14px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}