/* css/components/_variables.css */

:root {
	--orange-light: rgba(247, 203, 99, 1);
	--orange-dark: rgba(247, 122, 49, 1);
	--orange-darker: rgba(222, 110, 44, 1);
	--orange-dark-shadow: 0 5px 15px rgba(247, 122, 49, 0.75);
	--orange-gradient: linear-gradient(to bottom, var(--orange-light), var(--orange-dark));
	--orange-gradient-hover: linear-gradient(to bottom, rgba(255, 210, 120, 1), rgba(240, 70, 40, 1));
	--orange-outline-hover: #FEF2EA;
	--orange-border: #FDD6BF;
	--orange-focus: rgba(247, 163, 74, 1);
	--orange-focus-shadow: 0 0 0 2px transparent, 0 0 0 4px rgba(247, 122, 49, 1);  
	
	--green-lightest: #EBF3EA;
	--green-lighter: #DDEBD9;
	--green-light: #A3CA9D;
	--green: rgba(152, 217, 160, 1); /* #98D9A0 */
	--green-dark: rgba(56, 139, 42, 1); /* #388B2A */
	--green-darker: rgba(50, 125, 38, 1); /* #327D26 */
	--green-dark-shadow: 0 5px 15px rgba(56, 139, 42, 0.75);
	--green-gradient: linear-gradient(to bottom,var(--green), var(--green-dark));
	--green-gradient-hover: linear-gradient(to bottom, rgba(70, 184, 61, 1), rgba(37, 77, 31, 1));
	--green-outline-hover: #C1DBBD;
	--green-border: var(--green-lighter);
	--green-focus: rgba(104, 178, 101, 1);

	--blue-lighter: #EDEFFE;
	--blue-light: rgba(12, 202, 247, 1);
	--blue-dark: rgba(74, 90, 247, 1);
	--blue-darker: #4A5AF7;
	--blue-darkest: #8690FA;
	--blue-dark-shadow: 0 5px 15px rgba(74, 90, 247, 0.75);
	--blue-gradient: linear-gradient(to bottom, var(--blue-light), var(--blue-dark));
	--blue-gradient-hover: linear-gradient(to bottom, rgba(80, 220, 255, 1), rgba(40, 60, 220, 1));
	--blue-outline-hover: #EAF6FE;
	--blue-border: var(--blue-darkest);
	--blue-focus: rgba(86, 155, 247, 1); 
	
	--red-lightest: #FCE7E7;
	--red-lighter: #F38F91;
	--red-light: rgba(247, 124, 126, 1);
	--red-dark: rgba(229, 11, 15, 1); /* #E50B0F */
	--red-dark-shadow: 0 5px 15px rgba(208, 10, 14, 0.75);
	--red-gradient: linear-gradient(to bottom, var(--red-light), var(--red-dark));
	--red-gradient-hover: linear-gradient(to bottom, rgba(250, 136, 147, 1), rgba(232, 29, 36, 1));
	--red-focus: rgba(238, 67, 70, 1);
	
	--grey-lighter: #F3F4F3;
	--grey-light: #DADBD9;
	--grey: #C8CAC6;
	--grey-dark: #61635E;
	--grey-gradient: linear-gradient(to bottom, rgba(190, 191, 189, 1), rgba(136, 140, 132, 1));

	--neutral-dark-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
	--nav-shadow: 0 2px 10px rgba(0,0,0,0.1);
	
	--divider-light: rgba(255, 255, 255, 0.1);
	
	--body-background: #FFF;
	--modal-background: #FFF;
	--footer-background: #2C3E50;
	--text-body-neutral: #4B4D49;
	--text-header-neutral: #393B37;
	--text-label-light: #D4D4D4;
	--text-label-neutral: #393B37;
	--text-subtitle: #7A7A7A;
	
	--button-neutral-background: #FFF;
	--button-neutral-border: #DADBD9;
	
	--button-neutral-text: #4B4D49;
	--button-primary-text: #FFF;
	
	--button-disabled-background: var(--grey-gradient);
	--button-disabled-text: #FFF;
	
	--button-primary-background: var(--orange-gradient);
	--button-primary-background-hover: var(--orange-gradient-hover);
	--button-primary-text: #FFF;
	--button-primary-text-shadow: var(--orange-dark-shadow);	
	--button-primary-shadow: var(--neutral-dark-shadow);
	--button-primary-focus: 0 0 0 4px var(--orange-focus);
	
	--button-secondary-background: var(--green-gradient);
	--button-secondary-background-hover: var(--green-gradient-hover);
	--button-secondary-text: #FFF;
	--button-secondary-text-shadow: var(--green-dark-shadow);	
	--button-secondary-shadow: var(--neutral-dark-shadow);
	--button-secondary-focus: 0 0 0 4px var(--green-focus);
	
	--button-tertiary-background: var(--blue-gradient);
	--button-tertiary-background-hover: var(--blue-gradient-hover);
	--button-tertiary-text: #FFF;
	--button-tertiary-text-shadow: var(--blue-dark-shadow);	
	--button-tertiary-shadow: var(--neutral-dark-shadow);
	--button-tertiary-focus: 0 0 0 4px var(--blue-focus);
	
	--button-alert-background: var(--red-gradient);
	--button-alert-background-hover: var(--red-gradient-hover);
	--button-alert-text: #FFF;
    --button-alert-text-shadow: var(--red-dark-shadow);
	--button-alert-shadow: var(--neutral-dark-shadow);
	--button-alert-focus: 0 0 0 4px var(--red-focus);
	
	--button-primary-outline-background: #FFF;
	--button-primary-outline-background-hover: var(--orange-outline-hover);
	--button-primary-outline-border: var(--orange-border);
	--button-primary-outline-border-hover: var(--orange-dark);
	--button-primary-outline-text: var(--orange-dark);
	--button-primary-outline-text-hover: var(--orange-darker);
	--button-primary-outline-shadow: var(--neutral-dark-shadow);
	--button-primary-outline-focus: 0 0 0 4px var(--orange-border);
	
	--button-secondary-outline-background: #FFF;
	--button-secondary-outline-background-hover: var(--green-outline-hover);
	--button-secondary-outline-border: var(--green-lighter);
	--button-secondary-outline-border-hover: var(--green-dark);
	--button-secondary-outline-text: var(--green-dark);
	--button-secondary-outline-text-hover: var(--green-darker);
	--button-secondary-outline-shadow: var(--neutral-dark-shadow);
	--button-secondary-outline-focus: 0 0 0 4px var(--green-lighter);
	
	--button-tertiary-outline-background: #FFF;
	--button-tertiary-outline-background-hover: var(--blue-outline-hover);
	--button-tertiary-outline-border: var(--blue-border);
	--button-tertiary-outline-border-hover: var(--blue-dark);
	--button-tertiary-outline-text: var(--blue-dark);
	--button-tertiary-outline-text-hover: var(--blue-darker);
	--button-tertiary-outline-shadow: var(--neutral-dark-shadow);
	--button-tertiary-outline-focus: 0 0 0 4px var(--blue-border);
	
	--checkbox-success-background: var(--green-dark);
	
	--card-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
	--card-featured-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); 
	--card-shadow-hover: var(--card-shadow), 0 0 0 2px var(--blue-darkest);
	--card-selected-shadow: var(--card-shadow), 0 0 0 2px var(--blue-darkest);	
	--card-selected-hover-background: var(--blue-lighter);
	--card-selected-hover-text: var(--blue-darker);
	
	--input-field-neutral-border: var(--grey);
	
    --input-field-focus-border: var(--blue-darkest);
    
    --input-field-error-text: var(--red-dark);
    --input-field-error-border: var(--red-light);
    --input-field-error-background: var(--red-lightest);
    
    --input-field-success-text: var(--green-dark);
    --input-field-success-border: var(--green-lighter);
    --input-field-success-background: var(--green-lightest);

    --input-field-disabled-border: var(--grey);
    --input-field-disabled-background: var(--grey-lighter);
    --input-field-disabled-text: var(--grey-dark);
	
	--tag-disabled-background: var(--grey-lighter);
	--tag-disabled-border: var(--grey);
	--tag-disabled-text: var(--grey-dark);
	
	
	
	/*
   * 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-tag: var(--font-size-xs);
  --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);
  
  --line-height-body: 1.6;
  --line-height-header: 1.2;
  --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-125: 0.125rem; /* 2px */
  --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 */
  --gap-xxxxl: var(--space-2); /* 32px */
  --gap-xxxxxl: var(--space-2-5); /* 40px */
  --gap-xxxxxxl: var(--space-3); /* 48px */

  --padding-xxxs: 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 */
  --padding-xxxxxl: var(--space-2-5); /* 40px */
  --padding-xxxxxxl: var(--space-3); /* 48px */
  --padding-xxxxxxxl: var(--space-4); /* 64px */

  --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 */
  --margin-xxxxxl: var(--space-2-5); /* 40px */
  --margin-xxxxxxl: var(--space-3); /* 48px */

  --border-radius-xs: var(--space-0-25); /* 4px */
  --border-radius-sm: var(--space-0-375); /* 6px */
  --border-radius-md: var(--space-0-5); /* 8px */
  --border-radius-lg: var(--space-0-75); /* 12px */
  --border-radius-xl: var(--space-1); /* 16px */
  --border-radius-xxl: var(--space-1-25); /* 20px */
  --border-radius-xxxl: var(--space-1-5); /* 24px */
  --border-radius-xxxxl: var(--space-1-75); /* 28px */
  --border-radius-xxxxxl: var(--space-2); /* 32px */
  --border-radius-rounded-rectangle: 999px;
  --border-radius-circle: 50%;
}