:root {
  --background-color: white;

  /* fonts */
  --body-font-family: 'din-2014', sans-serif;
  --heading-font-family: 'brandon-grotesque', sans-serif;

  /* body sizes - based on https://www.figma.com/design/qwYubbFJC6FVIjO4rcdFdA/TimberTech-WordPress-Design-System-2025--WIP-?node-id=0-1 */
  --body-font-size-xl: 24px;
  --body-font-size-l: 20px;
  --body-font-size-m: 18px;
  --body-font-size-ms: 16px;
  --body-font-size-s: 14px;
  --body-font-size-xs: 12px;

  /* heading sizes - @deprecated - see typography.css */
  --heading-font-size-3xl: 62px;
  --heading-font-size-xxl: 46px;
  --heading-font-size-xl: 38px;
  --heading-font-size-l: 32px;
  --heading-font-size-m: 26px;
  --heading-font-size-ms: 24px;
  --heading-font-size-s: 20px;
  --heading-font-size-xs: 16px;

  /* nav heights */
  --nav-height: 56px;
  --cta-height: 58px;
  --header-height: calc(var(--nav-height));

  /* colors - based on https://www.figma.com/design/qwYubbFJC6FVIjO4rcdFdA/TimberTech-WordPress-Design-System-2025--WIP-?node-id=11-351 */
  --color-air: #fff;
  --color-black: #000;
  --color-coal: #373a37;
  --color-earth: #836140;
  --color-pebble: #f6f6f6;
  --color-ocean: #475063;
  --color-forest: #475c58;
  --color-board-blue: #415464;
  --color-neutral-900: #0c0907;
  --color-neutral-800: var(--color-coal);
  --color-neutral-700: #4f4c4d;
  --color-neutral-600: #6b6b6b;
  --color-neutral-400: #b5b4b4;
  --color-neutral-300: #d1d1d1;
  --color-neutral-200: #e6e6e6;
  --color-neutral-100: var(--color-air);
  --color-footer-background: #2d2a26;

  /* CTA - based on https://www.figma.com/design/qwYubbFJC6FVIjO4rcdFdA/TimberTech-WordPress-Design-System-2025--WIP-?node-id=7-96 */
  --color-cta-primary-text: var(--color-air);
  --color-cta-secondary-text: var(--color-coal);
  --color-cta-secondary-text-hover: var(--color-air);
  --color-cta-secondary-text-disabled: var(--color-neutral-300);
  --color-cta-tertiary-text: var(--color-coal);
  --color-cta-tertiary-text-hover: var(--color-earth);
  --color-cta-tertiary-text-disabled: var(--color-neutral-300);
  --color-cta-primary-background: var(--color-coal);
  --color-cta-primary-background-hover: var(--color-neutral-700);
  --color-cta-primary-background-disabled: var(--color-neutral-300);
  --color-cta-secondary-background: var(--color-air);
  --color-cta-secondary-background-hover: var(--color-neutral-700);
  --color-cta-secondary-background-disabled: var(--color-air);
}