:root {
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 40px;

  --heading-color: #1e1e1e;
  --paragraph-color: #434343;

  --label-font-size: 16px;
  --label-font-weight: 500;

  --template-color-0: #363636;
  --template-color-1: #5a5540;
  --font-heading: "Open Sans", sans-serif;
  --font-paragraph: "Open Sans", sans-serif;
  --font-navigation: "Open Sans", sans-serif;
  --section-width: 1350px;
  --section-col-start: 6;
  --section-col-end: 46;
  --section-padding-y: 90px;
  --section-radius: 0px;
  --button-radius: 9999px;

  --radius-xs: 8x;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 14px;
  --radius-xl: 32px;
  --radius-2xl: 40px;
  --radius-full: 9999px;
  --radius-input: 8px;

  --heading-1-font-size: 64px;
  --heading-1-font-weight: 600;

  --heading-2-font-size: 32px;
  --heading-2-font-weight: 500;

  --heading-3-font-size: 24px;
  --heading-3-font-weight: 500;

  --heading-4-font-size: 16px;
  --heading-4-font-weight: 500;

  --heading-5-font-size: 16px;
  --heading-5-font-weight: 400;

  --heading-6-font-size: 16px;
  --heading-6-font-weight: 400;

  --paragraph-font-size: 16px;
  --paragraph-font-weight: 300;

  --heading-align: start;

  --paragraph-align: start;

  --primary-button-bg: var(--template-color-0);
  --primary-button-bg-hover: color-mix(in srgb, var(--primary-button-bg), white 20%);
  --primary-button-radius: var(--button-radius);
  --primary-button-font-size: 16px;
  --primary-button-font-weight: 500;
  --primary-button-font-family: "Open Sans", sans-serif;
  --primary-button-padding: var(--spacing-sm) var(--spacing-xl);
  --primary-button-border: none;
  --primary-button-cursor: pointer;
  --primary-button-transition: all 0.3s ease;
  --primary-button-shadow: 2px 2px 5px var(--template-color-0);
  --primary-button-color: white;
  --primary-button-color-hover: white;

  --secondary-button-bg: color-mix(in srgb, white, transparent 30%);
  --secondary-button-bg-hover: var(--template-color-1);
  --secondary-button-radius: var(--button-radius);
  --secondary-button-font-size: 16px;
  --secondary-button-font-weight: 500;
  --secondary-button-font-family: "Open Sans", sans-serif;
  --secondary-button-padding: var(--spacing-sm) var(--spacing-xl);
  --secondary-button-border: 2px solid color-mix(in srgb, var(--template-color-1), black 20%);
  --secondary-button-cursor: pointer;
  --secondary-button-transition: all 0.3s ease;
  --secondary-button-shadow: none;
  --secondary-button-color: var(--template-color-1);
  --secondary-button-color-hover: white;
}
body {
  font-family: var(--font-paragraph);
  color: #161616;
  background-color: #fdf3e7;
  font-weight: 300;
}
