/* Global design tokens — Figma/Webflow variables */
/* Import this file once at the app entry point (index.css or index.js) */
/* All component CSS files can reference these variables freely */

:host {
  /* Colors */
  --text-color-primary: #252525;
  --text-color-secondary: #666666;
  --text-color-link1: #d5332a;
  --text-color-link2: #23327b;
  --text-color-white: #ffffff;
  --background-color-white: #ffffff;
  --background-color-gray-light: #f5f5f5;
  --background-color-red: #d5332a;
  --background-color-navy-dark: #16223b;
  --border-color-gray-light: #c4c4c4;
  --border-color-red: #d5332a;
  --border-color-brown: #847c79;
  --border-color-navy: #23327b;

  /* Typography — Families */
  --font-family-body-primary: 'Lato', sans-serif;
  --font-family-body-secondary: 'Merriweather', serif;
  --font-family-heading: 'Playfair Display', serif;

  /* Typography — Sizes */
  --text-size-tiny: 11px;
  --text-size-small: 12px;
  --text-size-normal: 14px;
  --text-size-large: 19px;
  --heading-style-h4: 25px;
  --heading-style-h6: 15px;

  /* Typography — Weights */
  --font-weight-regular: 400;
  --font-weight-xbold: 800;

  /* Typography — Line heights */
  --line-height-tiny: 16px;
  --line-height-small: 18px;
  --line-height-normal: 21px;
  --line-height-large: 40px;
  --line-height-h4: 39px;

  /* Typography — Letter spacing */
  --letter-spacing-medium: 2px;

  /* Spacing */
  --space-tiny: 2px;
  --space-xxxsmall: 4px;
  --space-xxsmall: 8px;
  --space-xsmall: 16px;
  --space-small: 20px;
  --space-medium: 24px;
  --space-large: 32px;
  --padding-section-large: 96px;
  --padding-global: 144px;

  /* Container widths */
  --container-large: 1440px;
  --container-xxsmall: 273px;
}

/* Responsive token overrides */
@media (max-width: 767px) {
  :host {
    --padding-global: 16px;
    --padding-section-large: 48px;
  }
}

/* AccountNav — Desktop (vertical sidebar) */
.account-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-xsmall);
  align-items: flex-start;
  width: 20%;
}

.account-nav-item {
  display: inline-flex;
  align-items: center;
  position: relative;
  font-family: var(--font-family-body-primary);
  font-weight: var(--font-weight-xbold);
  font-size: var(--heading-style-h6);
  line-height: 26px;
  letter-spacing: var(--letter-spacing-medium);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-color-primary);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  transition: color 0.2s ease;
}

.account-nav-item::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background-color: var(--text-color-link1);
  transition: width 0.3s ease;
}

.account-nav-item:hover {
  color: var(--text-color-link1);
}

.account-nav-item:hover::after {
  width: 100%;
}

.account-nav-item.is-active {
  color: var(--text-color-link1);
}

.account-nav-item.is-active::after {
  display: none;
}

/* AccountNav — Mobile (accordion bar) */
.account-nav-mobile {
  display: flex;
  flex-direction: column;
  width: 100%;
  border-bottom: 4px solid var(--border-color-red);
}

.account-nav-mobile-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-xxsmall) var(--space-xsmall);
  gap: var(--space-xxsmall);
  background: none;
  border: none;
  cursor: pointer;
}

.account-nav-mobile-label {
  font-family: var(--font-family-body-primary);
  font-weight: var(--font-weight-xbold);
  font-size: var(--text-size-small);
  letter-spacing: 1.5px;
  line-height: 26px;
  text-transform: uppercase;
  color: var(--text-color-primary);
}

.account-nav-mobile-chevron {
  flex-shrink: 0;
  transition: transform 0.2s ease;
  color: var(--text-color-link1);
}

.account-nav-mobile-chevron.is-open {
  transform: rotate(180deg);
}

.account-nav-mobile-panel {
  display: flex;
  flex-direction: column;
  padding: 0 var(--space-xsmall) var(--space-xxsmall);
  gap: var(--space-xxxsmall);
}

.account-nav-mobile-item {
  display: inline-flex;
  align-items: center;
  position: relative;
  font-family: var(--font-family-body-primary);
  font-weight: var(--font-weight-xbold);
  font-size: var(--text-size-small);
  letter-spacing: 1.5px;
  line-height: 26px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-color-primary);
  padding: var(--space-xxsmall) 0;
  transition: color 0.2s ease;
}

.account-nav-mobile-item::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 4px;
  width: 0;
  height: 2px;
  background-color: var(--text-color-link1);
  transition: width 0.3s ease;
}

.account-nav-mobile-item:hover {
  color: var(--text-color-link1);
}

.account-nav-mobile-item:hover::after {
  width: 100%;
}

.account-nav-mobile-item.is-active {
  color: var(--text-color-link1);
}

.account-nav-mobile-item.is-active::after {
  display: none;
}

.account-nav-slot {
  margin-top: var(--space-xxsmall);
}