/* ═══════════════════════════════════════════════════
variables.css
═══════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Kantumruy+Pro:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,300;1,400&display=swap');

:root {
  /* palette */
  --saffron: #c8820a;
  --saffron-lt: #e9a93c;
  --saffron-pale: #fdf3df;
  --saffron-deep: #8c5a06;

  --teak: #3b2f1e;
  /* deepest dark wood */
  --teak-mid: #5c4833;
  --teak-warm: #7a6350;

  --jade: #4a7c68;
  /* forest green */
  --jade-lt: #78a896;
  --jade-pale: #d8ece5;
  --jade-deep: #2f5244;

  --lotus: #b5604a;
  /* terracotta lotus */
  --lotus-lt: #d4896e;
  --lotus-pale: #f8ebe5;

  --cream: #faf6ef;
  --linen: #f0e9dc;
  --parchment: #e5dccf;
  --stone: #9a8f82;
  --fog: #c5b9ac;

  /* yypography */
  --font: 'Kantumruy Pro', sans-serif;

  /* spacing */
  --space-sm: 1rem;
  --space-md: 2.5rem;
  --space-lg: 5rem;
  --space-xl: 8rem;

  /* radius */
  --r-sm: 3px;
  --r-md: 10px;
  --r-lg: 20px;
  --r-pill: 999px;

  /* transitions */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --fast: 180ms;
  --med: 360ms;
  --slow: 600ms;

  /* shadows */
  --sh-sm: 0 2px 12px rgba(59, 47, 30, .08);
  --sh-md: 0 8px 36px rgba(59, 47, 30, .12);
  --sh-lg: 0 24px 80px rgba(59, 47, 30, .18);
  --sh-gold: 0 4px 24px rgba(200, 130, 10, .22);

  /* layout */
  --max: 1160px;
}

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font);
  background: var(--cream);
  color: var(--teak);
  line-height: 1.75;
  overflow-x: hidden;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font: inherit;
}

::selection {
  background: var(--jade-pale);
  color: var(--teak);
}