@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("./fonts/space-grotesk-latin-variable.woff2") format("woff2");
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("./fonts/inter-latin-variable.woff2") format("woff2");
}

:root {
  /* brand */
  --ew-pine-950: #082a24;
  --ew-pine-900: #0e3b33;
  --ew-pine-700: #14584c;
  --ew-pine-100: #deede7;
  --ew-sun-600: #dd8f05;
  --ew-sun-500: #f6a81c;
  --ew-sun-100: #fdeecb;

  /* neutrals */
  --ew-ink-900: #16211f;
  --ew-ink-600: #4c5a56;
  --ew-ink-400: #7d8a86;
  --ew-paper: #faf8f3;
  --ew-card: #ffffff;
  --ew-line: #e3dfd6;
  --ew-line-strong: #c9c3b5;

  /* semantics */
  --ew-positive: #0a7d4f;
  --ew-caution: #b25e00;
  --ew-danger: #b3261e;
  --ew-info: #0b5fd7;
  --ew-unknown: #6b7280;

  /* elevation and shape */
  --ew-radius-card: 12px;
  --ew-radius-button: 8px;
  --ew-radius-input: 6px;
  --ew-radius-pill: 999px;
  --ew-shadow-hover: 0 4px 14px rgba(22, 33, 31, 0.1);
  --ew-shadow-raised: 0 8px 28px rgba(22, 33, 31, 0.14);

  /* motion */
  --ew-ease: cubic-bezier(0.2, 0, 0, 1);
  --ew-fast: 120ms;
  --ew-slow: 240ms;

  /* typography */
  --ew-font-display: "Space Grotesk", system-ui, "Segoe UI", Arial, sans-serif;
  --ew-font-text: Inter, system-ui, "Segoe UI", Arial, sans-serif;
  --t-hero: clamp(2.1rem, 4.6vw, 3.4rem);
  --t-h1: clamp(1.8rem, 3.4vw, 2.5rem);
  --t-h2: clamp(1.4rem, 2.4vw, 1.85rem);
  --t-h3: 1.2rem;
  --t-body: 1rem;
  --t-small: 0.875rem;
  --t-price: 1.5rem;
  --t-cta: 1rem;
}

:root[data-theme="dark"] {
  --ew-paper: #0d1614;
  --ew-card: #14211e;
  --ew-ink-900: #f2f7f5;
  --ew-ink-600: #b7c4c0;
  --ew-ink-400: #7d8a86;
  --ew-line: #2f4942;
  --ew-line-strong: #3d5a52;
  --ew-pine-100: #16352e;
  --ew-sun-500: #ffc24d;
  --ew-sun-600: #f6a81c;
  --ew-sun-100: #33290f;
  --ew-positive: #56cf96;
  --ew-caution: #ffbd66;
  --ew-danger: #ff8a80;
  --ew-info: #75a8ff;
}