/* Custom CSS */
/**
 * BoxLunch Brand Theme
 *
 * Overrides the default Untitled UI tokens to match BoxLunch's design language:
 * - Clean, light e-commerce aesthetic with white backgrounds
 * - Signature orange accent color for CTAs and promotional elements
 * - Dark navigation header for contrast
 * - Friendly, approachable typography
 * - Subtle rounded corners
 */

 [data-theme="boxlunch"] {
  /* =============================================
     TYPOGRAPHY
     ============================================= */

  --font-body: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Display text */
  --text-display-xs: 1.5rem;
  --text-display-xs--line-height: 1.25;
  --text-display-xs--letter-spacing: 0;

  --text-display-sm: 1.75rem;
  --text-display-sm--line-height: 1.2;
  --text-display-sm--letter-spacing: 0;

  --text-display-md: 2rem;
  --text-display-md--line-height: 1.15;
  --text-display-md--letter-spacing: -0.01em;

  --text-display-lg: 2.5rem;
  --text-display-lg--line-height: 1.1;
  --text-display-lg--letter-spacing: -0.01em;

  /* Body text */
  --text-xs: 0.75rem;
  --text-xs--line-height: 1.5;
  --text-sm: 0.8125rem;
  --text-sm--line-height: 1.5;
  --text-md: 0.875rem;
  --text-md--line-height: 1.5;
  --text-lg: 1rem;
  --text-lg--line-height: 1.5;

  /* =============================================
     BORDER RADIUS
     BoxLunch uses subtle, minimal rounding
     ============================================= */

  --radius-none: 0px;
  --radius-xs: 2px;
  --radius-sm: 3px;
  --radius-DEFAULT: 4px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-xl: 8px;
  --radius-2xl: 10px;
  --radius-3xl: 12px;
  --radius-full: 9999px;

  /* =============================================
     COLORS - BRAND PALETTE
     BoxLunch signature orange on light backgrounds
     ============================================= */

  /* Brand color scale - Signature Orange #D65A28 */
  --color-brand-25: rgb(254 247 244);
  --color-brand-50: rgb(253 238 232);
  --color-brand-100: rgb(251 220 208);
  --color-brand-200: rgb(247 192 168);
  --color-brand-300: rgb(240 153 115);
  --color-brand-400: rgb(230 115 65);
  --color-brand-500: rgb(214 90 40);
  --color-brand-600: rgb(191 75 30);
  --color-brand-700: rgb(158 60 25);
  --color-brand-800: rgb(128 52 27);
  --color-brand-900: rgb(105 46 28);
  --color-brand-950: rgb(57 21 10);

  /* Background colors - Clean, light */
  --color-bg-primary: rgb(255 255 255);
  --color-bg-primary_hover: rgb(249 249 249);
  --color-bg-secondary: rgb(247 247 247);
  --color-bg-secondary_hover: rgb(240 240 240);
  --color-bg-tertiary: rgb(240 240 240);
  --color-bg-quaternary: rgb(230 230 230);
  --color-bg-brand-solid: rgb(214 90 40);
  --color-bg-brand-solid_hover: rgb(191 75 30);

  /* Header/Nav - Dark */
  --color-bg-nav: rgb(51 51 51);
  --color-bg-nav-hover: rgb(68 68 68);

  /* Foreground colors - Dark text on light */
  --color-fg-primary: rgb(34 34 34);
  --color-fg-secondary: rgb(68 68 68);
  --color-fg-tertiary: rgb(102 102 102);
  --color-fg-quaternary: rgb(136 136 136);
  --color-fg-brand: rgb(214 90 40);
  --color-fg-brand_hover: rgb(191 75 30);
  --color-fg-on-brand: rgb(255 255 255);

  /* Border colors */
  --color-border-primary: rgb(224 224 224);
  --color-border-secondary: rgb(238 238 238);
  --color-border-brand: rgb(214 90 40);

  /* Focus ring */
  --color-focus-ring: rgb(214 90 40);

  /* =============================================
     CATALOG / PRODUCT TOKENS
     Clean e-commerce product presentation
     ============================================= */

  /* Card & container backgrounds */
  --color-catalog-card-bg: rgb(255 255 255);
  --color-catalog-image-bg: rgb(245 245 245);
  --color-catalog-container-bg: rgb(255 255 255);

  /* Text colors */
  --color-catalog-badge-text: rgb(255 255 255);
  --color-catalog-badge-bg: rgb(214 90 40);
  --color-catalog-title-text: rgb(34 34 34);
  --color-catalog-description-text: rgb(68 68 68);
  --color-catalog-price-text: rgb(34 34 34);
  --color-catalog-price-sale: rgb(214 90 40);
  --color-catalog-promo-text: rgb(214 90 40);

  /* Interactive elements */
  --color-catalog-swatch-border: rgb(204 204 204);
  --color-catalog-swatch-selected: rgb(34 34 34);
  --color-catalog-button-bg: rgb(214 90 40);
  --color-catalog-button-bg_hover: rgb(191 75 30);
  --color-catalog-button-text: rgb(255 255 255);

  /* Secondary button - Dark outline style */
  --color-catalog-button-secondary-bg: rgb(255 255 255);
  --color-catalog-button-secondary-border: rgb(34 34 34);
  --color-catalog-button-secondary-text: rgb(34 34 34);
  --color-catalog-button-secondary-bg_hover: rgb(34 34 34);
  --color-catalog-button-secondary-text_hover: rgb(255 255 255);

  /* Overlay */
  --color-catalog-overlay-start: rgba(255 255 255 / 0);
  --color-catalog-overlay-end: rgba(255 255 255 / 0.6);

  /* Typography */
  --text-catalog-badge: 0.6875rem;
  --text-catalog-badge--line-height: 1.3;
  --text-catalog-badge--letter-spacing: 0;
  --text-catalog-badge--font-weight: 600;
  --text-catalog-title: 0.875rem;
  --text-catalog-title--line-height: 1.35;
  --text-catalog-title--font-weight: 400;
  --text-catalog-description: 0.8125rem;
  --text-catalog-description--line-height: 1.45;
  --text-catalog-price: 0.875rem;
  --text-catalog-price--line-height: 1.4;
  --text-catalog-price--font-weight: 400;

  /* Spacing & Radius */
  --catalog-card-padding: 0;
  --catalog-card-gap: 0.5rem;
  --catalog-radius-container: 0px;
  --catalog-radius-card: 0px;
  --catalog-radius-button: 4px;
  --catalog-radius-badge: 4px;

  /* =============================================
     SHADOWS
     Minimal, subtle shadows
     ============================================= */

  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.08), 0 1px 2px -1px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.06);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.08);
}

/* =============================================
   COMPONENT OVERRIDES - HIGH SPECIFICITY
   BoxLunch-specific styling
   ============================================= */

/* Navigation - Dark background with uppercase links */
[data-theme="boxlunch"] nav,
[data-theme="boxlunch"] [class*="navigation"],
[data-theme="boxlunch"] header nav {
  background-color: rgb(51 51 51) !important;
}

[data-theme="boxlunch"] nav a,
[data-theme="boxlunch"] [class*="nav-link"] {
  color: rgb(255 255 255) !important;
  text-transform: uppercase !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
}

/* Promo banner - Orange background */
[data-theme="boxlunch"] [class*="promo-banner"],
[data-theme="boxlunch"] [class*="announcement"] {
  background-color: rgb(214 90 40) !important;
  color: rgb(255 255 255) !important;
}

/* Primary buttons */
[data-theme="boxlunch"] button.bg-brand-solid,
[data-theme="boxlunch"] button[class*="btn-primary"],
[data-theme="boxlunch"] .catalog-button {
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  font-weight: 600 !important;
  font-size: 0.8125rem !important;
  border-radius: 4px !important;
}

/* Secondary/outline buttons - Dark border */
[data-theme="boxlunch"] button.border-brand,
[data-theme="boxlunch"] button[class*="btn-secondary"] {
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  font-weight: 600 !important;
  font-size: 0.8125rem !important;
  border-width: 1px !important;
  border-color: rgb(34 34 34) !important;
  color: rgb(34 34 34) !important;
  background: rgb(255 255 255) !important;
}

[data-theme="boxlunch"] button.border-brand:hover,
[data-theme="boxlunch"] button[class*="btn-secondary"]:hover {
  background: rgb(34 34 34) !important;
  color: rgb(255 255 255) !important;
}

/* Product badges - Inline style with icon */
[data-theme="boxlunch"] .badge,
[data-theme="boxlunch"] [class*="catalog-badge"] {
  font-weight: 600 !important;
  font-size: 0.75rem !important;
  background-color: rgba(255, 255, 255, 0.95) !important;
  color: rgb(34 34 34) !important;
  border-radius: 4px !important;
  padding: 0.375rem 0.75rem !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

/* "Great Choice!" badge styling */
[data-theme="boxlunch"] .badge--popular,
[data-theme="boxlunch"] [class*="badge-popular"] {
  background-color: rgba(255, 255, 255, 0.95) !important;
  color: rgb(34 34 34) !important;
}

/* "Selling Fast!" badge styling */
[data-theme="boxlunch"] .badge--trending,
[data-theme="boxlunch"] [class*="badge-trending"] {
  background-color: rgba(255, 255, 255, 0.95) !important;
  color: rgb(34 34 34) !important;
}

/* Product titles - Regular weight, dark */
[data-theme="boxlunch"] .catalog-title,
[data-theme="boxlunch"] [class*="product-title"] {
  font-weight: 400 !important;
  color: rgb(34 34 34) !important;
  font-size: 0.875rem !important;
  line-height: 1.35 !important;
}

/* Price styling */
[data-theme="boxlunch"] .catalog-price,
[data-theme="boxlunch"] [class*="product-price"] {
  font-weight: 400 !important;
  color: rgb(34 34 34) !important;
  font-size: 0.875rem !important;
}

/* Star ratings */
[data-theme="boxlunch"] [class*="rating"],
[data-theme="boxlunch"] [class*="stars"] {
  color: rgb(34 34 34) !important;
}

/* Promotional text - Orange */
[data-theme="boxlunch"] [class*="promo-text"],
[data-theme="boxlunch"] .catalog-promo,
[data-theme="boxlunch"] [class*="eligible"],
[data-theme="boxlunch"] [class*="discount-text"] {
  color: rgb(214 90 40) !important;
  font-size: 0.75rem !important;
}

/* Image containers - Light gray background */
[data-theme="boxlunch"] .catalog-image-container,
[data-theme="boxlunch"] [class*="product-image"] {
  background-color: rgb(245 245 245) !important;
}

/* Product cards - Clean, no border, no shadow */
[data-theme="boxlunch"] .catalog-card,
[data-theme="boxlunch"] [class*="product-card"] {
  background-color: rgb(255 255 255) !important;
  border: none !important;
  border-radius: 0 !important;
}

/* Card hover - Subtle */
[data-theme="boxlunch"] .catalog-card:hover,
[data-theme="boxlunch"] [class*="product-card"]:hover {
  box-shadow: none !important;
}

/* Links - Orange accent */
[data-theme="boxlunch"] a:not([class*="btn"]):not([class*="button"]):not([class*="nav"]) {
  color: rgb(214 90 40) !important;
  text-decoration: none !important;
}

[data-theme="boxlunch"] a:not([class*="btn"]):not([class*="button"]):not([class*="nav"]):hover {
  text-decoration: underline !important;
}

/* Form inputs */
[data-theme="boxlunch"] input,
[data-theme="boxlunch"] select,
[data-theme="boxlunch"] textarea {
  background-color: rgb(255 255 255) !important;
  border: 1px solid rgb(204 204 204) !important;
  border-radius: 4px !important;
  color: rgb(34 34 34) !important;
}

[data-theme="boxlunch"] input:focus,
[data-theme="boxlunch"] select:focus,
[data-theme="boxlunch"] textarea:focus {
  border-color: rgb(214 90 40) !important;
  box-shadow: 0 0 0 2px rgba(214, 90, 40, 0.15) !important;
  outline: none !important;
}

/* Chat input — the inner input lives inside a styled container,
   so it should not get form-input borders */
[data-theme="boxlunch"] [data-chat-input] input {
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Filter sidebar text */
[data-theme="boxlunch"] [class*="filter"],
[data-theme="boxlunch"] [class*="sidebar"] {
  color: rgb(34 34 34) !important;
  font-weight: 500 !important;
}

/* Countdown timer - Orange text */
[data-theme="boxlunch"] [class*="countdown"],
[data-theme="boxlunch"] [class*="timer"] {
  color: rgb(214 90 40) !important;
  font-weight: 600 !important;
}

/* Tag icons (like the shopping bag, lightning bolt) */
[data-theme="boxlunch"] [class*="tag-icon"] {
  color: rgb(214 90 40) !important;
}