@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Figtree";
  src: url("/fonts/figtree-var-latin.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-paper: oklch(97.4% 0.005 215);
  --color-paper-2: oklch(94.6% 0.007 215);
  --color-surface: oklch(99.4% 0.002 215);
  --color-line: oklch(88.5% 0.009 215);
  --color-line-strong: oklch(80% 0.012 215);
  --color-grid: oklch(89% 0.012 215 / 0.55);
  --color-grid-strong: oklch(83% 0.018 215 / 0.55);

  --color-ink: oklch(22% 0.012 235);
  --color-ink-2: oklch(38% 0.014 235);
  --color-ink-3: oklch(50% 0.012 235);

  --color-dark: oklch(26% 0.014 235);
  --color-dark-2: oklch(31% 0.014 235);
  --color-dark-line: oklch(40% 0.014 235);
  --color-on-dark: oklch(96% 0.004 215);
  --color-on-dark-2: oklch(79% 0.01 215);

  --color-cyan: oklch(84.8% 0.1 210);
  --color-cyan-strong: oklch(76% 0.105 211);
  --color-cyan-soft: oklch(94.5% 0.035 210);
  --color-cyan-ink: oklch(48% 0.09 220);
  --color-magenta: oklch(60% 0.245 355);
  --color-yellow: oklch(91% 0.185 102);
  --color-error: oklch(52% 0.19 25);
  --color-success: oklch(52% 0.13 160);

  --color-whatsapp: oklch(74% 0.19 150);
  --color-whatsapp-ink: oklch(24% 0.05 160);
  --color-paypal: oklch(33% 0.13 262);
  --color-visa: oklch(40% 0.2 265);
  --color-mc-red: oklch(58% 0.23 27);
  --color-mc-orange: oklch(76% 0.17 65);

  --color-scrim: oklch(18% 0.014 235 / 0.86);
  --color-scrim-soft: oklch(18% 0.014 235 / 0);
  --color-shadow: oklch(22% 0.02 235 / 0.16);
  --color-shadow-strong: oklch(22% 0.02 235 / 0.28);
  --color-lightbox: oklch(15% 0.012 235 / 0.96);
  --color-tape: oklch(91% 0.05 210 / 0.78);
  --color-steel-hi: oklch(98% 0.003 230);
  --color-steel: oklch(84% 0.01 230);
  --color-steel-edge: oklch(56% 0.012 230);
  --color-thread: oklch(56% 0.22 355);
  --color-thread-hi: oklch(69% 0.19 355);
  --color-thread-lo: oklch(42% 0.17 355);
  --color-slate: oklch(34% 0.012 240);
  --color-magenta-glow: oklch(60% 0.245 355 / 0.55);
  --color-foil-1: oklch(93% 0.008 230);
  --color-foil-2: oklch(75% 0.016 230);
  --color-foil-3: oklch(99% 0.002 230);
  --color-foil-4: oklch(55% 0.02 235);

  --font-display: "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --text-xs: 0.78rem;
  --text-sm: 0.9rem;
  --text-base: 1.0625rem;
  --text-lg: 1.2rem;
  --text-xl: clamp(1.35rem, 1.15rem + 0.7vw, 1.65rem);
  --text-2xl: clamp(1.6rem, 1.25rem + 1.2vw, 2.05rem);
  --text-3xl: clamp(2.05rem, 1.35rem + 2.9vw, 3.5rem);
  --text-display: clamp(2.55rem, 1.35rem + 5vw, 5.05rem);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-section: clamp(4rem, 3rem + 4.5vw, 6.75rem);
  --gutter: clamp(1rem, 0.6rem + 2.4vw, 2.5rem);
  --wrap: 1240px;

  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px var(--color-shadow);
  --shadow-md: 0 10px 28px -12px var(--color-shadow-strong);
  --shadow-lg: 0 28px 60px -28px var(--color-shadow-strong);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.55, 0, 1, 0.45);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-short: 180ms;
  --dur-med: 320ms;
  --dur-long: 720ms;

  --z-base: 1;
  --z-raised: 10;
  --z-float: 40;
  --z-sticky: 60;
  --z-overlay: 80;
  --z-modal: 100;

  --header-h: 4rem;
}