:root {
  /* Brand palette */
  --da-black: #000000;
  --da-white: #ffffff;
  --da-grey-200: #f5f5f5;
  --da-grey-300: #f7f7f7;
  --da-grey-400: #e9e9e9;
  --da-grey-500: #cccccc;
  --da-grey-600: #9a9ea3;
  --da-grey-700: #808080;
  --da-grey-900: #1a1a1a;
  --da-muted: #f4f6f7;

  --da-green: #1d5e4b;
  --da-red: #b4413b;
  --da-teal: #4ba2aa;
  --da-secondary-teal: #25c5cc;
  --da-teal-tint: #60c2cb;
  --da-teal-dark: #407c83;
  --da-teal-secondary: #4ba2aa;
  --da-green-dark: #226458;
  --da-green-tint: #d2dfdb;
  --da-yellow: #ccb82b;
  --da-yellow-secondary: #ccb82b;
  --da-blue: #0074b0;
  --da-blue-dark: #3a5263;
  --da-light-green: #769f44;
  --da-light-blue: #60c1cb;
  --da-error: #ff3c31;

  /* Semantic tokens */
  --color-bg-primary: var(--da-green);
  --color-primary: var(--da-green);
  --color-primary-hover: var(--da-green-dark);
  --color-primary-foreground: var(--da-white);
  --color-secondary: var(--da-red);
  --color-secondary-foreground: var(--da-white);
  --color-text-primary: #434c56;
  --color-background: var(--da-white);
  --color-background-menu: var(--da-green);
  --color-body-bg: var(--da-grey-200);
  --color-foreground: #434c56;
  --color-button-primary: var(--color-primary);
  --color-button-primary-hover: var(--color-primary-hover);
  --color-button-secondary: var(--da-grey-600);
  --color-button-secondary-hover: var(--da-grey-700);
  --color-button-disabled: var(--da-grey-500);
  --color-header-bg: var(--color-primary);
  --color-header-bg-scrolled: var(--color-primary);
  --color-label-default: var(--da-teal);
  --color-link: var(--da-teal-dark);
  --color-input-border-default: var(--da-grey-500);
  --color-input-border-focus: var(--da-green-dark);
  --color-menu-color: var(--da-grey-900);
  --color-border: var(--da-grey-400);
  --color-input: var(--da-grey-400);
  --color-ring: var(--da-green);
  --color-destructive: var(--da-error);
  --color-destructive-foreground: var(--da-white);
  --color-muted: var(--da-grey-200);
  --color-muted-foreground: var(--da-grey-600);
  --color-accent: var(--da-teal);
  --color-accent-foreground: var(--da-white);
  --color-popover: var(--da-white);
  --color-popover-foreground: #434c56;
  --color-card: var(--da-white);
  --color-card-foreground: #434c56;

  /* Bootstrap 4 variable overrides/tokens */
  --primary: var(--color-primary);
  --secondary: var(--color-secondary);
  --success: var(--da-light-green);
  --info: var(--da-teal);
  --warning: var(--da-yellow);
  --danger: var(--color-destructive);
  --light: var(--da-grey-200);
  --dark: var(--da-grey-900);
  --body-bg: var(--color-background);
  --body-color: var(--color-text-primary);
  --border-color: var(--color-border);

  /* Radius */
  --radius-lg: 0.5rem;
  --radius-md: 0.375rem;
  --radius-sm: 0.25rem;

  /* Typography */
  --font-family-sans: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-family-heading:
    "Nohemi", "Montserrat", "Helvetica Neue", Arial, sans-serif;

  /* Carousel */
  --brand-carousel-transition-duration: 0.6s;
  --brand-carousel-control-opacity: 0.85;
  --brand-carousel-control-hover-opacity: 1;
  --brand-carousel-control-icon-size: 2.5rem;
  --brand-carousel-indicator-size: 0.65rem;
  --brand-carousel-indicator-active-bg: var(--color-primary, #1d5e4b);
  --brand-carousel-indicator-inactive-bg: rgba(255, 255, 255, 0.45);
  --brand-carousel-caption-bg: rgba(0, 0, 0, 0.45);
  --brand-carousel-caption-color: #ffffff;
  --brand-carousel-caption-radius: 0.35rem;

  /* Reviews */

  --color-secondary-blue-dark: #1a3a4a;
  --card-bg: #446073;
  --card-width: 320px;
  --card-gap: 1.5rem;
}

.bg-primary {
  background-color: var(--color-bg-primary) !important;
}

.bg-teal {
  background-color: var(--da-teal) !important;
}

/* Utilities */

/* Gap Utilities */
.gap-0 {
  gap: 0 !important;
}
.gap-1 {
  gap: 0.25rem !important;
}
.gap-2 {
  gap: 0.5rem !important;
}
.gap-3 {
  gap: 1rem !important;
}
.gap-4 {
  gap: 1.5rem !important;
}
.gap-5 {
  gap: 3rem !important;
}

.gap-x-0 {
  column-gap: 0 !important;
}
.gap-x-1 {
  column-gap: 0.25rem !important;
}
.gap-x-2 {
  column-gap: 0.5rem !important;
}
.gap-x-3 {
  column-gap: 1rem !important;
}
.gap-x-4 {
  column-gap: 1.5rem !important;
}
.gap-x-5 {
  column-gap: 3rem !important;
}

.gap-y-0 {
  row-gap: 0 !important;
}
.gap-y-1 {
  row-gap: 0.25rem !important;
}
.gap-y-2 {
  row-gap: 0.5rem !important;
}
.gap-y-3 {
  row-gap: 1rem !important;
}
.gap-y-4 {
  row-gap: 1.5rem !important;
}
.gap-y-5 {
  row-gap: 3rem !important;
}

/* Height utilities */

.height-fill {
  height: max-content;
}
.height-100 {
  height: 100%;
}
.height-50 {
  height: 50%;
}
.height-25 {
  height: 25%;
}

body {
  font-family: var(--font-family-sans);
  background-color: var(--body-bg);
  color: var(--body-color);
}

/* Optional utility class for heading treatments */
.font-heading {
  font-family: var(--font-family-heading);
}

/* Bootstrap-friendly helper utilities for brand usage */
.text-brand-primary {
  color: var(--color-primary) !important;
}

.bg-brand-primary {
  background-color: var(--color-primary) !important;
  color: var(--color-primary-foreground) !important;
}

.border-brand {
  border-color: var(--color-border) !important;
}

/* Menu item stagger animation */
@keyframes menu-item-fade-in {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.menu-item-animate {
  animation: menu-item-fade-in 0.4s ease-out forwards;
  opacity: 0;
}

/* Typography */

h1 {
  font-size: 2rem;
  font-weight: 500;
}

h2,
.h2 {
  font-size: 56px;
  font-weight: 500;
}