:root {
  // ─── Base colors ───────────────────────────────────────────────────────────
  --tide-booking-color-primary: #333399;
  --tide-booking-color-primary-gradient: linear-gradient(204.08deg, #333399 1.64%, #282878 84.55%);
  --tide-booking-color-primary-fade: #ebebf8;
  --tide-booking-color-primary-extra-fade: #f8f8fd;
  --tide-booking-color-primary-light: #cdcdee;
  --tide-booking-color-primary-dark: #282878;
  --tide-booking-color-secondary: #1f9470;
  --tide-booking-color-secondary-light: #11b684;

  --tide-booking-invalid: #871d11;
  --tide-booking-invalid-light: #fce8e6;
  --tide-booking-invalid-dark: #871d11;

  --tide-booking-white: #ffffff;
  --tide-booking-gray-light: #f5f5f5;
  --tide-booking-gray-xlight: #fbfbfb;
  --tide-booking-gray--medium-light: #efefef;
  --tide-booking-gray-background-light: #e2e2e2;
  --tide-booking-gray-border-light: #f3f3f3;
  --tide-booking-gray-checkbox-bg: #bdbdbd;
  --tide-booking-gray-medium: #cbcbcb;
  --tide-booking-gray-dark: #666666;
  --tide-booking-black: #0a0a0a;
  --tide-booking-transparent: transparent;

  --tide-booking-bg: #fafafa;

  // ─── Typography ────────────────────────────────────────────────────────────
  --tide-booking-font-heading: 'Outfit', serif;
  --tide-booking-font-body: 'Outfit', serif;
  --tide-booking-font-handwritten: 'Outfit', serif;

  --tide-booking-font-size-body: 16px;
  --tide-booking-font-size-body-lg: 18px;
  --tide-booking-line-height-body: 1;

  // ─── Grid ──────────────────────────────────────────────────────────────────
  --tide-booking-container-wide: 1690px;
  --tide-booking-container-medium: 1200px;
  --tide-booking-container-small: 900px;
  --tide-booking-container-article: 650px;
  --tide-booking-gutter: 15px;

  // ─── Headings ──────────────────────────────────────────────────────────────
  --tide-booking-heading-color: var(--tide-booking-black);

  //h1
  --tide-booking-h1: 32px;
  --tide-booking-h1-sm: 40px;
  --tide-booking-h1-xl: 40px;

  //h2
  --tide-booking-h2: 24px;
  --tide-booking-h2-sm: 32px;
  --tide-booking-h2-xl: 32px;

  //h3
  --tide-booking-h3: 18px;
  --tide-booking-h3-sm: 24px;
  --tide-booking-h3-xl: 24px;

  //h4
  --tide-booking-h4: 16px;
  --tide-booking-h4-sm: 18px;
  --tide-booking-h4-xl: 18px;

  //h5
  --tide-booking-h5: 16px;
  --tide-booking-h5-xl: 18px;

  //h6
  --tide-booking-h6: 16px;
  --tide-booking-h6-md: 18px;

  // ─── Links ─────────────────────────────────────────────────────────────────
  --tide-booking-a-color: var(--tide-booking-color-primary);
  --tide-booking-a-text-decoration: underline;
  --tide-booking-a-color-hover: var(--tide-booking-color-primary-dark);
  --tide-booking-a-text-decoration-hover: underline;
  --tide-booking-a-color-focus: var(--tide-booking-color-primary-dark);
  --tide-booking-a-text-decoration-focus: underline;

  // ─── Input ─────────────────────────────────────────────────────────────────
  --tide-booking-input-background: var(--tide-booking-white);
  --tide-booking-input-border: 1.5px solid var(--tide-booking-gray--medium-light);
  --tide-booking-input-border-radius: 5px;
  --tide-booking-input-border-hover: 1.5px solid var(--tide-booking-gray-medium);
  --tide-booking-input-border-focus: 1.5px solid var(--tide-booking-color-primary);
  --tide-booking-input-color: var(--tide-booking-black);
  --tide-booking-input-height: 45px;
  --tide-booking-input-height-lg: 45px;

  --tide-booking-input-placeholder-color: var(--tide-booking-gray-dark);
  --tide-booking-input-placeholder-font-style: normal;

  --tide-booking-input-label-color: var(--tide-booking-black);
  --tide-booking-input-label-font-size: 14px;
  --tide-booking-input-label-font-weight: 400;
  --tide-booking-input-label-font-style: normal;

  // ─── CTA ───────────────────────────────────────────────────────────────────
  --tide-booking-cta-height: 40px;
  --tide-booking-cta-height-xs: 45px;
  --tide-booking-cta-width: 100%;
  --tide-booking-cta-width-xs: auto;
  --tide-booking-cta-padding: 10px 20px;
  --tide-booking-cta-color: var(--tide-booking-white);
  --tide-booking-cta-background: linear-gradient(204.08deg, #11b684 1.64%, #1f9470 84.55%);
  --tide-booking-cta-font-family: var(--tide-booking-font-body);
  --tide-booking-cta-font-size: 16px;
  --tide-booking-cta-font-size-xs: 18px;
  --tide-booking-cta-font-weight: 400;
  --tide-booking-cta-text-decoration: none;
  --tide-booking-cta-border: none;
  --tide-booking-cta-border-radius: 5px;
  --tide-booking-cta-icon-color: var(--tide-booking-white);
  --tide-booking-cta-icon-size: 16px;

  --tide-booking-cta-background-hover: linear-gradient(204.08deg, #11b684 1.64%, #1f9470 84.55%);
  --tide-booking-cta-color-hover: var(--tide-booking-white);
  --tide-booking-cta-icon-color-hover: var(--tide-booking-white);
  --tide-booking-cta-border-hover: none;
  --tide-booking-cta-text-decoration-hover: none;

  --tide-booking-cta-background-focus: linear-gradient(204.08deg, #11b684 1.64%, #1f9470 84.55%);
  --tide-booking-cta-color-focus: var(--tide-booking-white);
  --tide-booking-cta-icon-color-focus: var(--tide-booking-white);
  --tide-booking-cta-border-focus: none;
  --tide-booking-cta-text-decoration-focus: none;

  --tide-booking-cta-height-secondary: 25px;
  --tide-booking-cta-height-xs-secondary: 30px;
  --tide-booking-cta-width-secondary: auto;
  --tide-booking-cta-padding-secondary: 0px;
  --tide-booking-cta-margin-secondary: 0px;
  --tide-booking-cta-background-secondary: var(--tide-booking-transparent);
  --tide-booking-cta-color-secondary: var(--tide-booking-color-primary);
  --tide-booking-cta-border-secondary: none;
  --tide-booking-cta-border-radius-secondary: 5px;
  --tide-booking-cta-text-decoration-secondary: underline;
  --tide-booking-cta-font-family-secondary: var(--tide-booking-font-body);
  --tide-booking-cta-font-size-secondary: 16px;
  --tide-booking-cta-font-size-xs-secondary: 18px;
  --tide-booking-cta-font-weight-secondary: 400;
  --tide-booking-cta-icon-color-secondary: var(--tide-booking-color-primary);
  --tide-booking-cta-icon-size-secondary: 16px;

  --tide-booking-cta-background-secondary-hover: var(--tide-booking-transparent);
  --tide-booking-cta-color-secondary-hover: var(--tide-booking-color-primary-dark);
  --tide-booking-cta-icon-color-secondary-hover: var(--tide-booking-color-primary-dark);
  --tide-booking-cta-border-secondary-hover: none;
  --tide-booking-cta-text-decoration-secondary-hover: underline;

  --tide-booking-cta-background-secondary-focus: var(--tide-booking-transparent);
  --tide-booking-cta-color-secondary-focus: var(--tide-booking-color-primary-dark);
  --tide-booking-cta-icon-color-secondary-focus: var(--tide-booking-color-primary-dark);
  --tide-booking-cta-border-secondary-focus: none;
  --tide-booking-cta-text-decoration-secondary-focus: underline;

  // ─── Dropdown ──────────────────────────────────────────────────────────────
  --tide-booking-dropdown-background: var(--tide-booking-white);
  --tide-booking-dropdown-border: 1.5px solid var(--tide-booking-gray-medium);
  --tide-booking-dropdown-border-radius: 5px;
  --tide-booking-dropdown-color: var(--tide-booking-black);
  --tide-booking-dropdown-font-family: var(--tide-booking-font-body);
  --tide-booking-dropdown-border-hover: 1.5px solid var(--tide-booking-gray-medium);
  --tide-booking-dropdown-color-hover: var(--tide-booking-black);
  --tide-booking-dropdown-background-hover: var(--tide-booking-white);
  --tide-booking-dropdown-border-focus: 1.5px solid var(--tide-booking-color-primary-light);
  --tide-booking-dropdown-color-focus: var(--tide-booking-black);
  --tide-booking-dropdown-background-focus: var(--tide-booking-white);
  --tide-booking-dropdown-arrow-color: var(--tide-booking-gray-dark);
  --tide-booking-dropdown-arrow-color-hover: var(--tide-booking-color-primary);
  --tide-booking-dropdown-arrow-color-disabled: var(--tide-booking-gray-medium);

  // ─── Toggle switch (checkbox) ──────────────────────────────────────────────
  --tide-booking-toggle-switch-background: var(--tide-booking-gray-checkbox-bg);
  --tide-booking-toggle-switch-background-toggled: var(--tide-booking-color-primary);
  --tide-booking-toggle-switch-after-color: var(--tide-booking-white);

  // ─── Loader / spinner ──────────────────────────────────────────────────────
  --tide-booking-spinner-border: 5px solid rgba(255, 255, 255, 0.2);
  --tide-booking-spinner-border-top-color: #dce1ff;
  --tide-booking-spinner-animation-color: var(--tide-booking-color-primary);

  // ─── Tide form — group card ────────────────────────────────────────────────
  --tide-form-group-background: var(--tide-booking-white);
  --tide-form-group-border: none;
  --tide-form-group-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  --tide-form-group-border-radius: 24px;
  --tide-form-group-padding: 30px;
  --tide-form-group-padding-sm: 40px 60px;
  --tide-form-groups-gap: 20px;

  // ─── Tide form — group title ───────────────────────────────────────────────
  --tide-form-group-title-color: var(--tide-booking-heading-color);
  --tide-form-group-title-font-size: var(--tide-booking-h2);

  // ─── Tide form — fields layout ─────────────────────────────────────────────
  --tide-form-fields-gap: 20px;
  --tide-form-fields-row-gap: 25px;

  // ─── Tide form — field error ───────────────────────────────────────────────
  --tide-form-field-error-color: var(--tide-booking-invalid-dark);
  --tide-form-field-error-font-size: 13px;

  // ─── Tide form — required marker ───────────────────────────────────────────
  --tide-form-field-required-color: var(--tide-booking-invalid-dark);

  // ─── Datepicker ────────────────────────────────────────────────────────────
  --tide-booking-datepicker-container-background: rgba(255, 255, 255, 0.97);
  --tide-booking-datepicker-container-border: 1.5px solid var(--tide-booking-gray-border-light);

  --tide-booking-datepicker-prev-next-color: var(--tide-booking-color-primary);
  --tide-booking-datepicker-prev-next-background: var(--tide-booking-transparent);

  --tide-booking-datepicker-day-labels-color: var(--tide-booking-black);

  --tide-booking-datepicker-month-color: var(--tide-booking-black);
  --tide-booking-datepicker-month-font: var(--tide-booking-font-heading);

  --tide-booking-datepicker-day-color: var(--tide-booking-gray-dark);
  --tide-booking-datepicker-day-background: var(--tide-booking-gray-xlight);
  --tide-booking-datepicker-day-border: 1.5px solid var(--tide-booking-gray-border-light);
  --tide-booking-datepicker-day-border-radius: 5px;

  --tide-booking-datepicker-day-border-hover: 1.5px solid var(--tide-booking-color-primary);
  --tide-booking-datepicker-day-background-hover: var(--tide-booking-gray-xlight);
  --tide-booking-datepicker-day-color-hover: var(--tide-booking-color-primary);

  --tide-booking-datepicker-day-border-selected: 1.5px solid var(--tide-booking-color-primary);
  --tide-booking-datepicker-day-background-selected: var(--tide-booking-color-primary);
  --tide-booking-datepicker-day-color-selected: var(--tide-booking-white);

  --tide-booking-datepicker-day-border-selected-hover: 1.5px solid var(--tide-booking-color-primary-light);
  --tide-booking-datepicker-day-background-selected-hover: var(--tide-booking-color-primary-light);
  --tide-booking-datepicker-day-color-selected-hover: var(--tide-booking-white);

  --tide-booking-datepicker-day-color-disabled: var(--tide-booking-gray-medium);
  --tide-booking-datepicker-day-background-disabled: var(--tide-booking-gray-xlight);
  --tide-booking-datepicker-day-border-disabled: 1.5px solid var(--tide-booking-gray-border-light);

  --tide-booking-datepicker-day-color-outside-month: var(--tide-booking-gray-medium);
  --tide-booking-datepicker-day-background-outside-month: transparent;
  --tide-booking-datepicker-day-border-outside-month: 1.5px solid var(--tide-booking-gray-border-light);
  --tide-booking-datepicker-day-opacity-outside-month: 0.6;

  //STEP-INDICATORS
  --tide-booking-step-indicators-line-trough: 2px dashed var(--tide-booking-gray-medium);

  --tide-booking-step-indicators-icon-color: var(--tide-booking-black);
  --tide-booking-step-indicators-icon-background: var(--tide-booking-white);
  --tide-booking-step-indicators-icon-border: 1px solid var(--tide-booking-gray-border-light);
  --tide-booking-step-indicators-icon-border-radius: 50%;
  --tide-booking-step-indicators-icon-font-family: var(--tide-booking-font-heading);
  --tide-booking-step-indicators-icon-font-size: 16px;
  --tide-booking-step-indicators-icon-font-weight: 400;
  --tide-booking-step-indicators-icon-color-text: var(--tide-booking-black);

  //STEP-INDICATORS--ACTIVE
  --tide-booking-step-indicators-icon-color-active: var(--tide-booking-white);
  --tide-booking-step-indicators-icon-background-active: var(--tide-booking-color-primary);
  --tide-booking-step-indicators-icon-border-active: 1px solid var(--tide-booking-color-primary);
  --tide-booking-step-indicators-icon-check-color-active: var(--tide-booking-white);
  --tide-booking-step-indicators-icon-color-text-active: var(--tide-booking-color-primary);

  //STEP-INDICATORS--COMPLETED
  --tide-booking-step-indicators-icon-color-completed: var(--tide-booking-white);
  --tide-booking-step-indicators-icon-background-completed: var(--tide-booking-color-primary);
  --tide-booking-step-indicators-icon-border-completed: 1px solid var(--tide-booking-color-primary);
  --tide-booking-step-indicators-icon-check-color-completed: var(--tide-booking-white);
  --tide-booking-step-indicators-icon-color-text-completed: var(--tide-booking-transparent);
}