:root {
  /************************************************
  FONTS
  ************************************************/
  --vaf-font-body: "DM Sans", Arial, sans-serif;
  --vaf-font-display: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  --vaf-font-body-weight: 400;
  --vaf-font-body-weight-bold: 700;
  --vaf-font-body-size: 1rem;
  --vaf-font-body-style: normal;
  /************************************************
  CORE COLORS
  ************************************************/
  --vaf-bg: #f7f5f2;
  --vaf-white: #ffffff;
  --vaf-navy: #0f1f3d;
  --vaf-navy-mid: #1a3460;
  --vaf-amber: #e8820c;
  --vaf-amber-light: #fdf0de;
  --vaf-amber-dark: #b35c00;
  --vaf-red: #c0392b;
  --vaf-red-light: #f5c0bc;
  --vaf-red-dark: #8b1c18;
  --vaf-green: #2f7d4a;
  --vaf-green-light: #e4f3e8;
  --vaf-green-dark: #1f5a34;
  --vaf-gray-100: #f6f5f3;
  --vaf-gray-200: #ece9e4;
  --vaf-gray-300: #dddddd;
  --vaf-gray-350: #d5d5d5;
  --vaf-gray-400: #b0aba2;
  --vaf-gray-500: #777777;
  --vaf-gray-600: #706b62;
  --vaf-gray-700: #444562;
  --vaf-gray-800: #312e29;
  /************************************************
  RGB HELPERS
  ************************************************/
  --vaf-white-rgb: 255, 255, 255;
  --vaf-navy-rgb: 15, 31, 61;
  --vaf-amber-rgb: 232, 130, 12;
  --vaf-red-rgb: 192, 57, 43;
  --vaf-green-rgb: 47, 125, 74;
  /************************************************
  SUPPORTING / UI COLORS
  ************************************************/
  --vaf-border-light: #cccccc;
  --vaf-brand-blue: #034db1;
  --vaf-menu-bg: #f6f6f8;
  --vaf-menu-link: #444562;
  /************************************************
  TEXT
  ************************************************/
  --vaf-text-body: var(--vaf-gray-800);
  --vaf-text-muted: var(--vaf-gray-600);
  --vaf-text-soft: var(--vaf-gray-500);
  /************************************************
  RADII
  ************************************************/
  --vaf-radius: 10px;
  --vaf-radius-sm: 6px;
  --vaf-radius-pill: 10px;
  /************************************************
  SHADOWS
  ************************************************/
  --vaf-shadow-card: 0 2px 12px rgba(15, 31, 61, .08);
  --vaf-shadow-hover: 0 6px 24px rgba(15, 31, 61, .15);
  --vaf-shadow-button: 0 2px 10px rgba(0, 0, 0, .22);
  --vaf-shadow-focus: 0 0 0 .2rem rgba(var(--vaf-amber-rgb), .14);
  /************************************************
  TRANSITIONS
  ************************************************/
  --vaf-transition: .2s ease;
  --vaf-transition-slow: .35s ease;
  /************************************************
  TYPOGRAPHY SIZES
  ************************************************/
  --vaf-section-title-size: 22px;
  --vaf-hero-title-size: 26px;
  --vaf-hero-side-title-size: 16px;
  --vaf-card-title-size: 15px;
  --vaf-card-title-small-size: 13px;
  --vaf-price-size: 18px;
  --vaf-price-small-size: 15px;
  /************************************************
  SPACING / LAYOUT
  ************************************************/
  --vaf-page-padding-bottom: 40px;
  --vaf-section-gap: 36px;
  --vaf-section-header-gap: 12px;
  --vaf-grid-gap: 16px;
  --vaf-card-padding-y: 12px;
  --vaf-card-padding-x: 14px;
  --vaf-card-padding-small-y: 8px;
  --vaf-card-padding-small-x: 10px;
  --vaf-carousel-gap: 16px;
  --vaf-carousel-nav-size: 36px;
  --vaf-carousel-nav-offset: -18px;
  --vaf-hero-gap: 16px;
  --vaf-hero-height: 512px;
  --vaf-hero-content-x: 20px;
  --vaf-hero-content-bottom: 18px;
  --vaf-hover-lift: 3px;
  --vaf-hover-space: 8px;
  /************************************************
  CONTROLS
  ************************************************/
  --vaf-btn-padding-x: 1.1rem;
  --vaf-btn-padding-y: .625rem;
  --vaf-btn-padding-x-sm: .85rem;
  --vaf-btn-padding-y-sm: .45rem;
  --vaf-btn-padding-x-xs: .45rem;
  --vaf-btn-padding-y-xs: .15rem;
  --vaf-btn-font-size: .95rem;
  --vaf-btn-font-size-sm: .85rem;
  --vaf-btn-font-size-xs: .75rem;
  --vaf-btn-line-height: 1.2rem;
  --vaf-btn-font-weight: 600;
  --vaf-btn-border-width: 1px;
  --vaf-btn-gap: 8px;
  --vaf-btn-icon-size: 1rem;
  --vaf-btn-disabled-opacity: .65;
  --vaf-input-padding-x: .875rem;
  --vaf-input-padding-y: .625rem;
  --vaf-input-line-height: 1.25rem;
  --vaf-input-border-color: var(--vaf-gray-350);
  --vaf-input-bg: var(--vaf-white);
  /************************************************
  COMPONENT HELPERS
  ************************************************/
  --vaf-lot-number-bg: rgba(15, 31, 61, .85);
  --vaf-hero-overlay: linear-gradient( to top, rgba(10, 20, 45, .95), rgba(10, 20, 45, .45), rgba(10, 20, 45, .1) );
  --vaf-event-date-overlay: rgba(15, 31, 61, .45);
  /************************************************
  OPTIONAL COMPATIBILITY ALIASES
  ************************************************/
  --ps-color-white: var(--vaf-white);
  --ps-color-black: #000000;
  --ps-btn-border-radius: var(--vaf-radius-pill);
  --ps-input-border-radius: var(--vaf-radius-sm);
}

@media (max-width: 767px) {
  :root {
    --vaf-section-title-size: 18px;
    --vaf-hero-title-size: 20px;
    --vaf-hero-side-title-size: 17px;
    --vaf-hero-gap: 14px;
    --vaf-hero-height: 300px;
    --vaf-carousel-nav-offset: 8px;
    --vaf-btn-padding-x: 1rem;
    --vaf-btn-padding-y: .55rem;
    --vaf-btn-font-size: .9rem;
    --vaf-btn-line-height: 1.15rem;
    --vaf-input-padding-x: .75rem;
    --vaf-input-padding-y: .55rem;
    --vaf-input-line-height: 1.15rem;
  }
}
