/* _variables.css */
:root {
  --orange-gradient: linear-gradient(to bottom, rgba(247, 203, 99, 1), rgba(247, 122, 49, 1));
  --orange-gradient-hover: linear-gradient(to bottom, rgba(250, 215, 120, 1), rgba(250, 140, 70, 1));
  --orange-button-focus-color: rgba(247, 163, 74, 1);
  --alert-button-focus-color: rgba(238, 67, 70, 1);
  --success-button-focus-color: rgba(104, 178, 101, 1);
  --soft-shadow-orange-focus-outline: 0 0 0 4px var(--orange-button-focus-color);
  --soft-shadow-alert-focus-outline: 0 0 0 4px var(--alert-button-focus-color);
  --soft-shadow-success-focus-outline: 0 0 0 4px var(--success-button-focus-color);
  --green-gradient: linear-gradient(to bottom, rgba(152, 217, 160, 1), rgba(56, 139, 42, 1));
  --green-gradient-hover: linear-gradient(to bottom, rgba(165, 230, 175, 1), rgba(72, 155, 60, 1));
  --red-gradient: linear-gradient(to bottom, rgba(247, 124, 126, 1), rgba(229, 11, 15, 1));
  --red-gradient-hover: linear-gradient(to bottom, rgba(250, 136, 147, 1), rgba(232, 29, 36, 1));
  --blue-gradient: linear-gradient(to bottom, rgba(12, 202, 247, 1), rgba(74, 90, 247, 1));
  --grey-gradient: linear-gradient(to bottom, rgba(190, 191, 189, 1), rgba(136, 140, 132, 1));

  --body-background: #FFF;
  --modal-background: #FFF;
  --modal-background-transparent: rgba(255, 255, 255, 0.90);
  --modal-overlay: rgba(0, 0, 0, 0.5);
  --button-disabled-text: #FFF;
  --button-alert-text: #FFF;
  --button-alert-text-shadow: 0 0px 2px rgba(208, 10, 14, 0.75);
  --button-success-text: #FFF;
  --button-success-text-shadow: 0 0px 2px rgba(45, 105, 35, 0.75);
  --button-outline: #FFF;
  --button-neutral-border: #DADBD9;
  --button-neutral-background: #FFF;
  --button-neutral-text: #4B4D49;
  --button-hover-border: #8690FA;
  --button-hover-background: #EDEFFE;
  --button-hover-text: #4A5AF7;
  --button-orange-text: #FFF;
  --button-orange-text-shadow: 0 0px 2px rgba(225, 111, 45, 0.75);
  --button-focus-border: #8690FA;
  --dropdown-avatar-border: #DDD;
  --dropdown-neutral-border: #DADBD9;
  --dropdown-neutral-background: #FFF;
  --dropdown-neutral-divider: #EEE;
  --dropdown-hover-border: #8690FA;
  --dropdown-hover-background: #EDEFFE;
  --dropdown-hover-text: #4A5AF7;
  --slider-background: #FFF;
  --slider-thumb: #8690FA;
  --slider-fill: #8690FA;
  --slider-base: #CCC;
  --input-field-text-placeholder: #888C84;
  --input-field-success-border: #A3CA9D;
  --input-field-success-background: #EBF3EA;
  --input-field-success-text: #388B2A;
  --input-field-error-border: #F38F91;
  --input-field-error-text: #E50B0F;
  --input-field-focus-border: #8690FA;
  --input-field-focus-background: #EDEFFE;
  --input-field-neutral-border: #DDD;
  --input-field-disabled-border: #C8CAC6;
  --input-field-disabled-background: #F3F4F3;
  --input-field-disabled-text: #A0A39D;
  --checkbox-success-background: #388B2A;
  --checkbox-success-background: #388B2A;
  --text-link: #4A5AF7;
  --text-link-hover: #343FCC;
  --text-body-neutral: #4B4D49;
  --text-header-neutral: #393B37;
  --text-subtitle: #7A7A7A;
  --text-label-light: #7A7A7A;
  --text-label-neutral: #393B37;
  --text-label-alert: #E50B0F;
  --text-divider: #CCC;
  --text-price-light: #98FB98;
  --text-price: #388B2A;
  --text-price-shadow: #556B2F;
  --calendar-background: #FFF;
  --calendar-grid-background: #E5E5E5;
  --calendar-grid-empty-day-background: #CECFCD;
  --calendar-grid-day-background: #EDEFFE;
  --calendar-grid-day-border: #CCC;
  --calendar-grid-day-selected-text: #FFF;
  --calendar-grid-past-day-text: #AAA;
  --calendar-grid-day-today-border: #8690FA;
  --card-border: #DADBD9;
  --card-border-size: 3px;
  --card-border-hover: #8690FA;
  --card-border-active: #A3CA9D;
  --card-background: #FFF;
  --card-background-hover: #EDEFFE;
  --card-background-active-hover: #EBF3EA;
  --card-border-active-hover: #A3CA9D;
  --icon-default-grey: #CCC;
  --icon-dark-grey: #4B4D49;
  --icon-star-yellow: #FFC107;
  --icon-hover: #8690FA;
  --icon-border: #DDD;
  --icon-info-fill: #8690FA;
  --soft-shadow-header: 0 6px 12px -6px rgba(0, 0, 0, 0.1);
  --soft-shadow-footer: 0 -6px 12px -6px rgba(0, 0, 0, 0.1);
  --soft-shadow-card: 0 3px 12px rgba(0, 0, 0, 0.1);
  --soft-shadow-pill: 0 3px 8px rgba(0, 0, 0, 0.1);
  --soft-shadow-button: 0 1px 6px rgba(0, 0, 0, 0.1);
  --soft-shadow-orange: 0 4px 12px rgba(247, 122, 49, 0.1);
  --soft-shadow-green: 0 4px 12px rgba(56, 139, 42, 0.1);
  --soft-shadow-red: 0 4px 12px rgba(229, 11, 15, 0.1);
  --soft-shadow-blue: 0 4px 12px rgba(74, 90, 247, 0.1);
  --soft-shadow-blue-small: 0 2px 6px rgba(74, 90, 247, 0.1);
  --scrollbar-width: 8px;

  /*
   * Typography Scale Variables
   *
   * Each variable defines a responsive font size using clamp(min, fluid, max).
   * The 'fluid' part (calc(Xvw + Ypx)) ensures scaling between min and max
   * based on viewport width.
   *
   * General rule of thumb for fluid value:
   * (max_size - min_size) / (max_viewport - min_viewport) * 100vw + offset_px
   * (Assuming a scaling range from 320px to 1200px viewport width)
   */

  /* Smallest text, like captions or legal disclaimers */
  --font-size-xs: clamp(12px, calc(0.25vw + 11.2px), 14px); /* Scales from 12px (mobile) to 14px (desktop) */

  /* Paragraphs, general body text (14px to 16px) */
  --font-size-sm: clamp(14px, calc(0.25vw + 13.2px), 16px); /* Scales from 14px (mobile) to 16px (desktop) */

  /* Standard text, dropdowns, buttons (16px to 20px) */
  --font-size-md: clamp(16px, calc(0.5vw + 14.4px), 20px); /* Scales from 16px (mobile) to 20px (desktop) */

  /* Medium headings, prominent sub-titles (18px to 24px) */
  --font-size-lg: clamp(18px, calc(0.75vw + 15.6px), 24px); /* Scales from 18px (mobile) to 24px (desktop) */

  /* Large headings, prominent sub-titles (18px to 24px) */
  --font-size-xl: clamp(20px, calc(0.909vw + 17.09px), 28px); /* Scales from 20px (mobile) to 28px (desktop) */

  /* Extra Extra Large headings, page titles (24px to 34px) */
  --font-size-xxl: clamp(24px, calc(1.25vw + 20px), 34px); /* Scales from 24px (mobile) to 34px (desktop) */

  /* Extra Extra Extra large headings, display text (28px to 48px) */
  --font-size-xxxl: clamp(28px, calc(2vw + 22.4px), 48px); /* Scales from 28px (mobile) to 48px (desktop) */

  /* Font aliases by type: */
  --font-size-body-xs: var(--font-size-xs);
  --font-size-body-sm: var(--font-size-sm);
  --font-size-body: var(--font-size-md);
  --font-size-label-sm: var(--font-size-sm);
  --font-size-label: var(--font-size-md);
  --font-size-input-sm: var(--font-size-sm); /* Avoid using as auto-focus zoom fires on mobile when font is less than 16px */
  --font-size-input: var(--font-size-md);
  --font-size-input-2fa: var(--font-size-lg);
  --font-size-button: var(--font-size-sm);
  --font-size-heading-h1: var(--font-size-xxl);
  --font-size-heading-h2: var(--font-size-xl);
  --font-size-heading-h3: var(--font-size-md);
  --font-size-price: var(--font-size-xl); /* Or a custom clamp if price needs more aggressive scaling */
  
  --line-height-body: 1.6;
  --line-height-label: 1;

  /* Keep the default root font-size for consistent rem units elsewhere (e.g., padding/margins) */
  font-size: 16px; /* 1rem = 16px. Clamp variables handle their own fluid scaling. */

  --icon-size-xs: clamp(14px, calc(0.25vw + 13.2px), 16px); /* Scales from 14px to 16px */
  --icon-size-sm: clamp(18px, calc(0.5vw + 16.4px), 22px); /* Scales from 18px to 22px */
  --icon-size-md: clamp(20px, calc(0.75vw + 17.6px), 26px); /* Scales from 20px to 26px */
  --icon-size-lg: clamp(24px, calc(1vw + 20.8px), 32px);    /* Scales from 24px to 32px */
  --icon-size-xl: clamp(28px, calc(1.25vw + 24px), 38px);  /* Scales from 28px to 38px */

  /* Base unit: 1rem = 16px */
  --space-0-25: 0.25rem; /* 4px */
  --space-0-375: 0.375rem; /* 6px */
  --space-0-5: 0.5rem;   /* 8px */
  --space-0-625: 0.625rem; /* 10px */
  --space-0-75: 0.75rem; /* 12px */
  --space-1: 1rem;     /* 16px */
  --space-1-25: 1.25rem; /* 20px */
  --space-1-5: 1.5rem;   /* 24px */
  --space-1-75: 1.75rem; /* 28px */
  --space-2: 2rem;     /* 32px */
  --space-2-5: 2.5rem; /* 40px */
  --space-3: 3rem;     /* 48px */
  --space-3-5: 3.5rem; /* 56px */
  --space-4: 4rem;     /* 64px */
  --space-5: 5rem;     /* 80px */
  --space-6-25: 6.25rem; /* 100px */
  --space-7-5: 7.5rem; /* 120px */
  --space-8-75: 8.75rem; /* 140px */
  --space-10: 10rem; /* 160px */
  --space-11-25: 11.25rem; /* 180px */
  --space-12-5: 12.5rem; /* 200px */
  --space-13-75: 13.75rem; /* 220px */
  --space-18-75: 18.75rem; /* 300px */
  --space-20: 20rem; /* 320px */

  /* Specific aliases for common uses */
  --gap-xs: var(--space-0-25); /* 4px */
  --gap-sm: var(--space-0-5);   /* 8px */
  --gap-md: var(--space-0-625); /* 10px */
  --gap-lg: var(--space-0-75); /* 12px */
  --gap-xl: var(--space-1);    /* 16px */
  --gap-xxl: var(--space-1-25); /* 20px */
  --gap-xxxl: var(--space-1-5); /* 24px */

  --padding-xxs: var(--space-0-125); /* 2px */
  --padding-xxs: var(--space-0-25); /* 4px */
  --padding-xs: var(--space-0-375); /* 6px */
  --padding-sm: var(--space-0-5); /* 8px */
  --padding-md: var(--space-0-625); /* 10px */
  --padding-lg: var(--space-0-75); /* 12px */
  --padding-xl: var(--space-1);   /* 16px */
  --padding-xxl: var(--space-1-25); /* 20px */
  --padding-xxxl: var(--space-1-5); /* 24px) */
  --padding-xxxxl: var(--space-2); /* 32px */

  --margin-xxs: var(--space-0-25); /* 4px */
  --margin-xs: var(--space-0-375); /* 6px */
  --margin-sm: var(--space-0-5);   /* 8px */
  --margin-md: var(--space-0-625); /* 10px */
  --margin-lg: var(--space-0-75); /* 12px */
  --margin-xl: var(--space-1);    /* 16px */
  --margin-xxl: var(--space-1-25); /* 20px */
  --margin-xxxl: var(--space-1-5); /* 24px */
  --margin-xxxxl: var(--space-2); /* 32px */

  --border-radius-xs: 0.25rem; /* 4px */
  --border-radius-sm: 0.375rem; /* 6px */
  --border-radius-md: 0.5rem; /* 8px */
  --border-radius-lg: 0.75rem; /* 12px */
  --border-radius-xl: 1rem; /* 16px */
  --border-radius-xxl: 1.25rem; /* 20px */
  --border-radius-rounded-rectangle: 999px;
  --border-radius-circle: 50%;

  --screen-padding: var(--padding-xxl);
  --screen-padding-mobile: var(--padding-md);
  --page-header-padding: var(--padding-xl);
  --modal-content-padding: var(--padding-lg);
  --main-layout-gap: var(--gap-xxxl);
  --main-layout-gap-mobile: var(--gap-xxl);
  /* Header height set dynamically by sessions.js on page load */
  /* --header-height */
  --header-gap: var(--gap-xxl);
  --header-gap-mobile: var(--gap-xl);
  --filters-modal-gap: var(--gap-xxxl);
  --filters-modal-gap-mobile: var(--gap-xxl);
  --screen-min-width: calc( var(--space-18-75) - 2*( var(--padding-md) ) ); /* Reduce by padding in mobile mode */
  --columns-padding-bottom: var(--space-3);
  --session-card-image-width-mobile: var(--space-4);
  --session-card-image-width: var(--space-5);
  --session-card-padding: var(--padding-xl);
  --session-card-padding-mobile: var(--padding-md);
  --summary-location-image-width: var(--space-5);
  --button-min-height: var(--space-2);
  --rounded-rectangle-button-height: var(--space-3-5);
  --dropdown-min-height: var(--space-3);
  --dropdown-min-width: var(--screen-min-width);
  --dropdown-text-min-width: var(--space-7-5);
  --slider-min-height: var(--space-0-375);
  --slider-track-min-height: var(--space-2);
  --slider-track-min-width: calc( var(--screen-min-width) - 2*( var(--padding-xl) ) ); /* Reduce by slider padding */
  --calendar-header-min-height: var(--space-1-75);
}