:root {
  --color-graphite: #2c2c2c;
  --color-inverse-surface: #2f3131;
  --color-brass: #b5a642;
  --color-bronze: #4a3728;
  --color-silver: #c0c0c0;
  --color-bg: #f9f9f9;
  --color-surface: #f9f9f9;
  --color-surface-container-low: #f3f3f4;
  --color-on-surface: #1a1c1c;
  --color-on-background: #1a1c1c;
  --color-on-surface-variant: #4a4737;
  --color-outline: #7b7765;
  --color-outline-variant: #ccc6b2;
  --color-primary-container: #b5a642;
  --color-on-primary: #ffffff;
  --color-on-primary-container: #433b00;
  --color-primary-fixed: #d8c860;
  --color-tertiary: #5f5e5e;
  --color-tertiary-fixed-dim: #c8c6c5;
  --color-surface-variant: #e2e2e2;
  --color-danger: #ba1a1a;

  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', system-ui, sans-serif;

  --brand-script-light-filter: brightness(0) saturate(100%) invert(78%) sepia(28%) saturate(620%) hue-rotate(6deg) brightness(96%) contrast(92%);

  --text-display: clamp(2.5rem, 6vw, 4rem);
  --text-headline-md: clamp(1.75rem, 4vw, 2rem);
  --text-headline-sm: clamp(1.25rem, 2.5vw, 1.5rem);
  --text-body-lg: 1.125rem;
  --text-body-md: 1rem;
  --text-label: 0.75rem;

  --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-20: 5rem;

  --container-max: 90rem;
  --gutter: 1.5rem;
  --gutter-mobile: 1.25rem;
  --section-pad-mobile: 3.5rem;
  --section-pad-desktop: 5rem;
  --section-pad-x-mobile: 1.25rem;
  --section-pad-x-desktop: 5rem;

  --radius: 0;
  --border-thin: 1px solid var(--color-outline-variant);
  --border-hairline: 0.5px solid rgba(192, 192, 192, 0.4);

  --t-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow: 400ms cubic-bezier(0.16, 1, 0.3, 1);
  --t-bounce: 250ms cubic-bezier(0.34, 1.56, 0.64, 1);

  --z-nav: 100;
  --z-modal: 400;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  --header-height: calc(5.25rem + var(--safe-top));
}

@media (max-width: 767px) {
  :root {
    --header-height: calc(4.25rem + var(--safe-top));
    --gutter-mobile: 1rem;
    --section-pad-mobile: 2.75rem;
  }
}

@media (min-width: 1024px) {
  :root {
    --header-height: calc(6.25rem + var(--safe-top));
  }
}