/* ==========================================================================
   Design System — Andrea Head
   Loaded after soft-design-system.min.css to override Bootstrap/Soft UI tokens.
   All brand customisation lives here.
   ========================================================================== */

/* --- Design Tokens --- */
:root {
  /* Override Bootstrap primary */
  --bs-primary:            #3B5E82;
  --bs-primary-rgb:        59, 94, 130;
  --bs-body-color:         #1E1D1B;
  --bs-body-bg:            #FAFAF8;
  --bs-secondary-color:    #6A6460;
  --bs-border-color:       #E8E5DF;
  --bs-heading-color:      #1E1D1B;

  /* Site-specific tokens */
  --ah-bg:                 #FAFAF8;
  --ah-surface:            #FFFFFF;
  --ah-surface-subtle:     #F5F4F1;
  --ah-border:             #E8E5DF;
  --ah-text:               #1E1D1B;
  --ah-text-secondary:     #6A6460;
  --ah-text-tertiary:      #9C9590;
  --ah-accent:             #3B5E82;
  --ah-accent-hover:       #2D4A6A;
  --ah-accent-subtle:      rgba(59, 94, 130, 0.07);
  --ah-accent-glow:        rgba(59, 94, 130, 0.18);
  --ah-font-display:       'DM Serif Display', Georgia, serif;
  --ah-font-body:          'Inter', 'Open Sans', system-ui, sans-serif;
  --ah-font-mono:          'Fira Code', 'Consolas', monospace;

  /* Spacing scale (8px grid) */
  --ah-space-1:  0.5rem;   /*  8px */
  --ah-space-2:  1rem;     /* 16px */
  --ah-space-3:  1.5rem;   /* 24px */
  --ah-space-4:  2rem;     /* 32px */
  --ah-space-5:  2.5rem;   /* 40px */
  --ah-space-6:  3rem;     /* 48px */
  --ah-space-8:  4rem;     /* 64px */
  --ah-space-10: 5rem;     /* 80px */
  --ah-space-12: 6rem;     /* 96px */
}

/* ==========================================================================
   Body & base
   ========================================================================== */

body {
  font-family: var(--ah-font-body);
  background-color: var(--ah-bg);
  color: var(--ah-text);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   Typography scale — modular 1.25 ratio, DM Serif Display for h1–h3
   ========================================================================== */

h1, h2, h3, .h1, .h2, .h3 {
  font-family: var(--ah-font-display);
  font-weight: 400;
  color: var(--ah-text);
  line-height: 1.2;
}

h4, h5, h6, .h4, .h5, .h6 {
  font-family: var(--ah-font-body);
  font-weight: 600;
  color: var(--ah-text);
}

h1, .h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: -0.02em;
  line-height: 1.12;
}

h2, .h2 {
  font-size: clamp(1.5rem, 3vw, 2.15rem);
  letter-spacing: -0.015em;
  line-height: 1.18;
}

h3, .h3 {
  font-size: clamp(1.25rem, 2.5vw, 1.625rem);
  letter-spacing: -0.01em;
  line-height: 1.25;
}

h4, .h4 {
  font-size: 1.2rem;
  line-height: 1.35;
}

h5, .h5 {
  font-size: 1.05rem;
  line-height: 1.4;
}

h6, .h6 {
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Lead text — clearly larger than body, distinct from h5 */
.lead {
  font-size: 1.15rem !important;
  font-weight: 400 !important;
  line-height: 1.75 !important;
  color: var(--ah-text-secondary);
}

/* Body text rhythm */
p { margin-bottom: 1em; line-height: 1.7; }

/* Small text */
.text-sm { font-size: 0.875rem; }
.text-xs { font-size: 0.78rem; }

/* ==========================================================================
   Gradient overrides — replace hot-pink Soft UI gradients with solid accent
   ========================================================================== */

.bg-gradient-primary,
.btn.bg-gradient-primary {
  background: var(--ah-accent) !important;
  background-image: none !important;
  color: #fff !important;
}
.btn.bg-gradient-primary:hover,
.btn.bg-gradient-primary:focus {
  background: var(--ah-accent-hover) !important;
}

/* Gradient text → solid accent */
.text-gradient.text-primary {
  background: none !important;
  -webkit-text-fill-color: var(--ah-accent) !important;
  color: var(--ah-accent) !important;
}

/* text-primary → accent */
.text-primary { color: var(--ah-accent) !important; }

/* btn-outline-primary → accent border/text */
.btn-outline-primary {
  color: var(--ah-accent) !important;
  border-color: var(--ah-accent) !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background: var(--ah-accent) !important;
  color: #fff !important;
}

/* bg-light → warm subtle surface */
.bg-light { background-color: var(--ah-surface-subtle) !important; }

/* bg-gradient-dark → deep charcoal */
.bg-gradient-dark {
  background: #1E1D1B !important;
  background-image: none !important;
}

/* Badge gradient → warm subtle */
.bg-gradient-light {
  background: var(--ah-surface-subtle) !important;
  background-image: none !important;
}

/* ==========================================================================
   Display & Typography utilities
   ========================================================================== */

/* Oversized display title for hero sections */
.ah-display-title {
  font-family: var(--ah-font-display);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--ah-text);
}

/* Backward-compat alias */
.quicksand-title {
  font-family: var(--ah-font-display) !important;
  font-weight: 400 !important;
  letter-spacing: -0.02em !important;
}

/* Eyebrow label — small caps above headings */
.ah-eyebrow {
  font-family: var(--ah-font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ah-accent);
}

/* ==========================================================================
   Card component
   ========================================================================== */

.ah-card {
  background: var(--ah-surface);
  border: 1px solid var(--ah-border);
  border-radius: 12px;
  padding: 1.75rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.04);
  transition: box-shadow 280ms ease, transform 280ms ease;
}

.ah-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 12px 28px rgba(0, 0, 0, 0.07);
  transform: translateY(-2px);
}

/* Reset Bootstrap .card-body double-padding when inside ah-card */
.ah-card > .card-body,
.ah-card .card-body {
  padding: 0;
}

/* Cards with header+body structure keep explicit padding */
.ah-card .card-header {
  padding: 0 0 1rem;
  background: transparent;
  border-bottom: 1px solid var(--ah-border);
  margin-bottom: 1rem;
}

/* Responsive padding reduction on mobile */
@media (max-width: 575px) {
  .ah-card { padding: 1.25rem; }
}

/* ==========================================================================
   Buttons
   ========================================================================== */

/* Solid accent */
.btn-ah-primary {
  display: inline-block;
  background: var(--ah-accent);
  color: #fff;
  border: 1.5px solid var(--ah-accent);
  border-radius: 7px;
  padding: 0.6rem 1.5rem;
  font-size: 0.925rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
  cursor: pointer;
}
.btn-ah-primary:hover,
.btn-ah-primary:focus {
  background: var(--ah-accent-hover);
  border-color: var(--ah-accent-hover);
  color: #fff;
  box-shadow: 0 4px 12px rgba(59, 94, 130, 0.25);
}

/* Large variant */
.btn-ah-primary.btn-lg {
  padding: 0.78rem 2rem;
  font-size: 1rem;
  border-radius: 8px;
}

/* Ghost */
.btn-ah-ghost {
  display: inline-block;
  background: transparent;
  color: var(--ah-text);
  border: 1.5px solid var(--ah-border);
  border-radius: 7px;
  padding: 0.6rem 1.5rem;
  font-size: 0.925rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: border-color 180ms ease, color 180ms ease, background 180ms ease;
  cursor: pointer;
}
.btn-ah-ghost:hover,
.btn-ah-ghost:focus {
  border-color: var(--ah-accent);
  color: var(--ah-accent);
  background: var(--ah-accent-subtle);
}

/* Large variant */
.btn-ah-ghost.btn-lg {
  padding: 0.78rem 2rem;
  font-size: 1rem;
  border-radius: 8px;
}

/* ==========================================================================
   Blockquote
   ========================================================================== */

.ah-blockquote {
  border-left: 2px solid var(--ah-accent);
  padding-left: 1.25rem;
  margin-left: 0;
}

.ah-blockquote p { color: var(--ah-text-secondary); font-style: italic; }
.ah-blockquote footer cite { font-style: normal; font-size: 0.85rem; color: var(--ah-text-tertiary); }

/* ==========================================================================
   Page layout utilities
   ========================================================================== */

/* Page header — clean, no background image */
.ah-page-header {
  background: var(--ah-bg);
  padding: 5rem 0 3.5rem;
  border-bottom: 1px solid var(--ah-border);
}

.ah-page-header .ah-eyebrow { margin-bottom: 0.75rem; }
.ah-page-header h1 { margin-bottom: 0.75rem; }

/* Article reading column */
.ah-reading-column { max-width: 68ch; }

/* Hero section */
.ah-hero-home { position: relative; }
.ah-hero-home > .container { position: relative; z-index: 1; }

/* Section vertical spacing */
.ah-section { padding: 5rem 0; }
.ah-section-sm { padding: 3rem 0; }

/* Divider trace — animated on scroll */
.ah-divider-trace {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ah-accent-glow), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}
.ah-divider-trace.ix-visible { transform: scaleX(1); }

/* ==========================================================================
   Navigation overrides
   ========================================================================== */

/* Toggler icon colour on warm-white background */
.navbar-toggler-bar { background: var(--ah-text) !important; }
body.has-hero:not(.scrolled) .navbar-toggler-bar { background: #fff !important; }

/* ==========================================================================
   Interactive elements
   ========================================================================== */

/* Chat FAB — accent colour */
.ix-chat-fab { background: var(--ah-accent) !important; }
.ix-chat-fab:hover { background: var(--ah-accent-hover) !important; }

/* Reading progress — accent */
.ix-reading-progress {
  background: linear-gradient(90deg, var(--ah-accent), var(--ah-accent-hover)) !important;
}

/* ==========================================================================
   Footer
   ========================================================================== */

footer .nav-link:hover {
  color: var(--ah-text) !important;
  text-decoration: underline;
  text-underline-offset: 0.2rem;
}

footer .nav-link { transition: color 150ms ease; }