@import url('https://fonts.googleapis.com/css2?family=Amiri:ital,wght@0,400;0,700;1,400&family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&family=Libre+Caslon+Text:ital,wght@0,400;0,700;1,400&display=swap');

:root {
  --color-surface: #FBF9F7;
  --color-surface-subtle: #F4EFEB;
  --color-ebony: #1C1412;
  --color-ebony-pure: #120D0B;
  --color-bronze: #C2986E;
  --color-bronze-dark: #8C6B4A;
  --color-champagne: #DCC8B0;
  --color-champagne-light: #EFE7DE;
  --color-hairline: #E8DFD7;
  --font-editorial: 'Amiri', 'Libre Caslon Text', serif;
  --font-sans: 'IBM Plex Sans Arabic', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

body {
  font-family: var(--font-sans);
  background-color: var(--color-surface);
  color: var(--color-ebony);
  margin: 0;
  padding: 0;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.font-editorial {
  font-family: var(--font-editorial);
}

.font-sans-ui {
  font-family: var(--font-sans);
}

/* Modern Haute Couture & Editorial Styling */
.luxury-border {
  border-color: var(--color-hairline);
}

.luxury-card {
  background-color: #FFFFFF;
  border: 1px solid var(--color-hairline);
  border-radius: 1.25rem;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.luxury-card:hover {
  border-color: var(--color-bronze);
  box-shadow: 0 10px 30px -10px rgba(28, 20, 18, 0.08);
}

.glass-panel {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(232, 223, 215, 0.7);
}

.glass-panel-dark {
  background: rgba(28, 20, 18, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(194, 152, 110, 0.25);
}

.btn-pill-primary {
  background: linear-gradient(135deg, #1C1412 0%, #2A1F1D 100%);
  color: #FFFFFF;
  border-radius: 9999px;
  padding: 0.75rem 1.75rem;
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.025em;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  box-shadow: 0 4px 15px rgba(28, 20, 18, 0.15);
}

.btn-pill-primary:hover {
  background: linear-gradient(135deg, #C2986E 0%, #8C6B4A 100%);
  color: #FFFFFF;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(194, 152, 110, 0.3);
}

.btn-pill-secondary {
  background: transparent;
  color: var(--color-ebony);
  border: 1.5px solid var(--color-hairline);
  border-radius: 9999px;
  padding: 0.75rem 1.75rem;
  font-weight: 600;
  font-size: 0.875rem;
  transition: all 0.25s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.btn-pill-secondary:hover {
  background: var(--color-surface-subtle);
  border-color: var(--color-bronze);
  color: var(--color-bronze-dark);
}

/* Hide scrollbar for clean horizontal carousels */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.btn-primary-luxury {
  background-color: var(--color-ebony);
  color: #FFFFFF;
  border: 1px solid var(--color-ebony);
  padding: 0.625rem 1.5rem;
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0.025em;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.btn-primary-luxury:hover {
  background-color: var(--color-bronze-dark);
  border-color: var(--color-bronze-dark);
  color: #FFFFFF;
}

.btn-secondary-luxury {
  background-color: transparent;
  color: var(--color-ebony);
  border: 1px solid var(--color-ebony);
  padding: 0.625rem 1.5rem;
  font-weight: 500;
  font-size: 0.875rem;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.btn-secondary-luxury:hover {
  background-color: var(--color-surface-subtle);
  border-color: var(--color-bronze);
  color: var(--color-bronze-dark);
}

/* Accessibility Focus States */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--color-bronze) !important;
  outline-offset: 2px !important;
}

/* Tabular Numbers for financial tables */
.tabular-nums {
  font-variant-numeric: tabular-nums;
}