/* WILLOWTREE DESIGN TOKENS */

:root {
  /* Color System */
  --dd-color-primary: #087781;       /* Primary brand color */
  --dd-color-primary-light: #13a1ae; /* Lighter shade of primary */
  --dd-color-primary-dark: #055e66;  /* Darker shade of primary */
  
  --dd-color-secondary: #8F6426;     /* Secondary/accent color */
  --dd-color-secondary-light: #B08547; /* Lighter shade of secondary */
  --dd-color-secondary-dark: #6E4A15; /* Darker shade of secondary */
  
  --color-tertiary: #FDCC5E;     /* Tertiary/accent color */
  --color-tertiary-light: #fff0c2; /* Lighter shade of tertiary */
  --color-tertiary-dark: #c6a339; /* Darker shade of tertiary */

  --color-neutral-100: #FFFFFF;   /* White */
  --color-neutral-200: #F8F8F8;   /* Off-white/light gray */
  --color-neutral-300: #EEEEEE;   /* Light gray */
  --color-neutral-400: #DDDDDD;   /* Mid-light gray */
  --color-neutral-500: #BBBBBB;   /* Medium gray */
  --color-neutral-600: #888888;   /* Mid-dark gray */
  --color-neutral-700: #555555;   /* Dark gray */
  --color-neutral-800: #333333;   /* Very dark gray */
  --color-neutral-900: #111111;   /* Nearly black */
  
  --color-success: #4CAF50;       /* Success messages */
  --color-warning: #FF9800;       /* Warning messages */
  --color-error: #F44336;         /* Error messages */
  --color-info: #2196F3;          /* Information messages */
  
  /* Semantic Colors */
  --text-color: var(--color-neutral-800);
  --text-color-light: var(--color-neutral-600);
  --text-color-inverted: var(--color-neutral-100);
  --background-color: var(--color-neutral-100);
  --background-alt: var(--color-neutral-200);
  --border-color: var(--color-neutral-400);
  --link-color: var(--dd-color-primary);
  --link-hover-color: var(--dd-color-primary-dark);
  
  /* Typography */
  --font-family-primary: 'Montserrat', sans-serif;
  --font-family-secondary: 'Georgia', serif;
  
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-md: 1rem;       /* 16px */
  --font-size-lg: 1.125rem;   /* 18px */
  --font-size-xl: 1.25rem;    /* 20px */
  --font-size-2xl: 1.5rem;    /* 24px */
  --font-size-3xl: 1.875rem;  /* 30px */
  --font-size-4xl: 2.25rem;   /* 36px */
  --font-size-5xl: 3rem;      /* 48px */
  
  --line-height-tight: 1.1;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  
  /* Spacing */
  --spacing-0: 0;
  --spacing-1: 0.25rem;   /* 4px */
  --spacing-2: 0.5rem;    /* 8px */
  --spacing-3: 0.75rem;   /* 12px */
  --spacing-4: 1rem;      /* 16px */
  --spacing-5: 1.25rem;   /* 20px */
  --spacing-6: 1.5rem;    /* 24px */
  --spacing-8: 2rem;      /* 32px */
  --spacing-10: 2.5rem;   /* 40px */
  --spacing-12: 3rem;     /* 48px */
  --spacing-16: 4rem;     /* 64px */
  --spacing-20: 5rem;     /* 80px */
  --spacing-24: 6rem;     /* 96px */
  
  /* Borders */
  --border-radius-sm: 0.125rem;  /* 2px */
  --border-radius-md: 0.25rem;   /* 4px */
  --border-radius-lg: 0.5rem;    /* 8px */
  --border-radius-xl: 1rem;      /* 16px */
  --border-radius-full: 9999px;
  
  --border-width-thin: 1px;
  --border-width-medium: 2px;
  --border-width-thick: 4px;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  
  /* Transitions */
  --transition-fast: 150ms;
  --transition-normal: 300ms;
  --transition-slow: 500ms;
  --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Z-index */
  --z-index-dropdown: 1000;
  --z-index-sticky: 1020;
  --z-index-fixed: 1030;
  --z-index-modal-backdrop: 1040;
  --z-index-modal: 1050;
  --z-index-popover: 1060;
  --z-index-tooltip: 1070;
  
  /* Container widths */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1536px;
  
  /* Button styles */
  --button-padding-x: var(--spacing-4);
  --button-padding-y: var(--spacing-2);
  --button-border-radius: var(--border-radius-md);
  
  /* Form elements */
  --input-height: 2.5rem;
  --input-padding-x: var(--spacing-3);
  --input-padding-y: var(--spacing-2);
  --input-border-radius: var(--border-radius-md);
  --input-border-color: var(--border-color);
  --input-focus-border-color: var(--dd-color-secondary);
  
  /* Product card */
  --product-card-padding: var(--spacing-4);
  --product-card-border-radius: var(--border-radius-lg);
  --product-card-shadow: var(--shadow-md);
  
  /* Animation */
  --animation-duration-short: 200ms;
  --animation-duration-medium: 300ms;
  --animation-duration-long: 500ms;
  
  /* MAP WILLOWTREE DESIGN TOKENS TO THEME VARIABLES */
  
  /* Text Colors */
  --color-textBase: var(--text-color);
  --color-textBase--hover: var(--dd-color-primary);
  --color-textBase--active: var(--dd-color-primary-dark);
  --color-textSecondary: var(--text-color-light);
  --color-textSecondary--hover: var(--dd-color-primary);
  --color-textSecondary--active: var(--dd-color-primary-dark);
  --color-textLink: var(--link-color);
  --color-textLink--hover: var(--link-hover-color);
  --color-textLink--active: var(--dd-color-primary-dark);
  --color-textHeading: var(--text-color);

  /* Brand Colors - Mapping for theme compatibility */
  --color-primary: var(--dd-color-primary);
  --color-primaryDark: var(--dd-color-primary-dark);
  --color-primaryDarker: var(--dd-color-primary-dark);
  --color-primaryLight: var(--dd-color-primary-light);
  --color-secondary: var(--dd-color-secondary);
  --color-secondaryDark: var(--dd-color-secondary-dark);
  --color-secondaryDarker: var(--dd-color-secondary-dark);

  /* Status Colors */
  --color-error: #F44336;
  --color-errorLight: #F44336;
  --color-info: #2196F3;
  --color-infoLight: #2196F3;
  --color-success: #4CAF50;
  --color-successLight: #4CAF50;
  --color-warning: #FF9800;
  --color-warningLight: #FF9800;

  /* Neutral Colors */
  --color-black: var(--color-neutral-900);
  --color-white: var(--color-neutral-100);
  --color-whitesBase: var(--color-neutral-200);
  --color-grey: var(--color-neutral-500);
  --color-greyDarkest: var(--color-neutral-800);
  --color-greyDarker: var(--color-neutral-700);
  --color-greyDark: var(--color-neutral-600);
  --color-greyMedium: var(--color-neutral-500);
  --color-greyLight: var(--color-neutral-400);
  --color-greyLighter: var(--color-neutral-300);
  --color-greyLightest: var(--color-neutral-200);

  /* Background Colors */
  --body-bg: var(--background-color);
  --header-backgroundColor: var(--background-color);
  --footer-backgroundColor: var(--background-color);

  /* Button Styles */
  --button--primary-color: var(--text-color-inverted);
  --button--primary-colorHover: var(--text-color-inverted);
  --button--primary-colorActive: var(--text-color-inverted);
  --button--primary-backgroundColor: var(--dd-color-primary);
  --button--primary-backgroundColorHover: var(--dd-color-primary-dark);
  --button--primary-backgroundColorActive: var(--dd-color-primary-dark);
  
  --button--default-color: var(--text-color);
  --button--default-colorHover: var(--dd-color-primary);
  --button--default-colorActive: var(--dd-color-primary-dark);
  --button--default-borderColor: var(--border-color);
  --button--default-borderColorHover: var(--dd-color-primary);
  --button--default-borderColorActive: var(--dd-color-primary-dark);
  
  --button--disabled-color: var(--color-neutral-500);
  --button--disabled-backgroundColor: var(--color-neutral-300);
  --button--disabled-borderColor: var(--color-neutral-400);

  /* Icon Colors */
  --icon-color: var(--dd-color-primary);
  --icon-color-hover: var(--dd-color-primary-dark);
  --button--icon-svg-color: var(--dd-color-primary);
  --icon-ratingEmpty: var(--border-color);
  --icon-ratingFull: var(--dd-color-secondary);

  /* Container Styles */
  --container-border-global-color-base: var(--border-color);
  --container-fill-base: var(--background-color);
  --container-fill-dark: var(--background-alt);

  /* Navigation Styles */
  --navUser-color: var(--text-color);
  --navUser-color-hover: var(--dd-color-primary);
  --navUser-dropdown-backgroundColor: var(--background-color);
  --navUser-dropdown-borderColor: var(--border-color);
  --navUser-indicator-backgroundColor: var(--dd-color-primary);
  
  --navPages-color: var(--text-color);
  --navPages-color-hover: var(--dd-color-primary);
  --navPages-subMenu-backgroundColor: var(--background-alt);
  --navPages-subMenu-separatorColor: var(--border-color);
  
  --dropdown--quickSearch-backgroundColor: var(--background-alt);
  --dropdown--wishList-backgroundColor: var(--background-color);

  /* Form Styles */
  --form-label-font-color: var(--text-color);
  --input-font-color: var(--text-color);
  --input-border-color: var(--border-color);
  --input-border-color-active: var(--dd-color-primary);
  --input-bg-color: var(--background-color);
  --input-disabled-bg: var(--background-alt);
  --select-bg-color: var(--background-color);
  --select-arrow-color: var(--dd-color-primary);
  --checkRadio-color: var(--dd-color-primary);
  --checkRadio-backgroundColor: var(--background-color);
  --checkRadio-borderColor: var(--border-color);

  /* Alert Styles */
  --alert-backgroundColor: var(--background-alt);
  --alert-color: var(--text-color);
  --alert-color-alt: var(--background-color);

  /* Carousel Styles */
  --carousel-bgColor: var(--background-alt);
  --carousel-title-color: var(--text-color);
  --carousel-description-color: var(--text-color);
  --carousel-dot-color: var(--border-color);
  --carousel-dot-color-active: var(--dd-color-primary);
  --carousel-dot-bgColor: var(--background-color);
  --carousel-arrow-color: var(--dd-color-primary);
  --carousel-arrow-bgColor: var(--background-color);
  --carousel-arrow-borderColor: var(--background-color);

  /* Card Styles */
  --card-title-color: var(--dd-color-primary);
  --card-title-color-hover: var(--dd-color-primary-dark);
  --card-figcaption-button-background: var(--background-color);
  --card-figcaption-button-color: var(--text-color);
  --card--alternate-backgroundColor: var(--background-alt);
  --card--alternate-borderColor: var(--border-color);
  --card--alternate-color--hover: var(--text-color);

  /* Misc Styles */
  --storeName-color: var(--text-color);
  --label-backgroundColor: var(--dd-color-primary);
  --label-color: var(--text-color-inverted);
  --overlay-backgroundColor: var(--color-neutral-800);
  --loadingOverlay-backgroundColor: var(--background-color);
  --pace-progress-backgroundColor: var(--dd-color-primary);
  --spinner-borderColor-dark: var(--dd-color-primary);
  --spinner-borderColor-light: var(--dd-color-primary-light);
  --blockquote-cite-font-color: var(--color-neutral-500);

  /* Badge Styles */
  --color_badge_product_sale_badges: var(--dd-color-primary);
  --color_text_product_sale_badges: var(--text-color-inverted);
  --color_hover_product_sale_badges: var(--dd-color-primary-dark);
  --color_badge_product_sold_out_badges: var(--color-neutral-500);
  --color_text_product_sold_out_badges: var(--text-color-inverted);
  --color_hover_product_sold_out_badges: var(--color-neutral-600);
  
  /* Focus Tooltip */
  --focusTooltip-textColor: var(--text-color-inverted);
  --focusTooltip-backgroundColor: var(--dd-color-primary);
}