/* ============================================================
   Athena CredXpert — Official palette + type only
   Colors and typography from the brand sheets. No other fonts.
   ============================================================ */

:root {
  /* Solids */
  --c-white: #ffffff;
  --c-cream: #faf8f5;
  --c-beige: #efece7;
  --c-taupe: #6C7C93;
  --c-gold: #f4a425;
  --c-gold-deep: #ed9d1d;
  --c-peach: #fb923c;
  --c-orange: #EA580C;
  --c-red: #EF4444;
  --c-green: #25d366;
  --c-green-fill: #2ab257;
  --c-slate: #323f53;
  --c-navy: #1d2f49;
  --c-charcoal: #1b2432;
  --c-ink: #121c2b;
  --c-void: #0b131d;
  --c-abyss: #090e16;
  --c-black: #000000;

  /* Backgrounds (alpha) */
  --bg-white-04: #ffffff0a;
  --bg-white-05: #ffffff0d;
  --bg-white-10: #ffffff1a;
  --bg-white-20: #ffffff33;
  --bg-cream-10: #faf8f51a;
  --bg-cream-20: #faf8f533;
  --bg-gold-05: #f4a4250d;
  --bg-gold-10: #F4A4251A;
  --bg-gold-15: #F4A42526;
  --bg-gold-20: #f4a42533;
  --bg-orange-10: #f973161a;
  --bg-orange-15: #f9731626;
  --bg-red-10: #dc28281a;
  --bg-red-15: #dc282826;
  --bg-slate-70: #323f53b3;
  --bg-ink-90: #121c2be6;
  --bg-ink-95: #121c2bf2;

  /* Text (alpha) */
  --tx-white-70: #ffffffb3;
  --tx-cream-95: #faf8f5f2;
  --tx-cream-85: #faf8f5d9;
  --tx-cream-75: #faf8f5bf;
  --tx-cream-70: #faf8f5b3;
  --tx-cream-60: #faf8f599;
  --tx-cream-55: #faf8f573;
  --tx-beige-65: #efece7a6;
  --tx-beige-70: #efece7b3;
  --tx-beige-80: #efece7cc;
  --tx-gold-80: #ed9d1dcc;
  --tx-gold-15: #ed9d1d26;
  --tx-red-80: #dc2828cc;
  --tx-void-45: #0b131d73;
  --tx-void-50: #0b131d80;
  --tx-void-75: #0b131dbf;

  /* Borders (alpha) */
  --bd-white-08: #ffffff14;
  --bd-white-10: #ffffff1a;
  --bd-white-15: #ffffff26;
  --bd-cream-15: #faf8f526;
  --bd-cream-20: #faf8f533;
  --bd-cream-25: #faf8f540;
  --bd-gold: #f4a425;
  --bd-gold-20: #ed9d1d33;
  --bd-gold-25: #ed9d1d40;
  --bd-gold-30: #ed9d1d4d;
  --bd-orange-20: #f9731633;
  --bd-red-20: #dc282833;
  --bd-slate: #323f53;
  --bd-slate-30: #323f534d;
  --bd-slate-60: #323f5399;
  --bd-void-15: #0b131d26;

  /* Legacy semantic aliases — mapped to official palette */
  --athena-black: var(--c-black);
  --athena-navy: var(--c-navy);
  --athena-cream: var(--c-cream);
  --athena-white: var(--c-white);
  --athena-border: var(--bd-slate-30);
  --athena-gold: var(--c-gold);
  --athena-red: var(--c-red);
  --athena-muted: var(--c-taupe);
  --athena-orange-deep: var(--c-gold-deep);
  --athena-orange: var(--c-orange);
  --athena-warm: var(--c-beige);
  --athena-green: var(--c-green);

  --athena-bg: var(--c-cream);
  --athena-surface: var(--c-white);
  --athena-divider: var(--bd-slate-30);
  --athena-text: var(--c-navy);
  --athena-text-muted: var(--c-taupe);
  --athena-accent: var(--c-gold);
  --athena-accent-hover: var(--c-gold-deep);
  --athena-header-height: 64.8px;

  /* Type — official stacks only */
  --font-heading: Montserrat, "Segoe UI", Arial, sans-serif;
  --font-body: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --font-system: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --athena-font: var(--font-body);

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 900;

  /* DM Sans sizes + paired line-heights */
  --fs-body-8: 8px;
  --lh-body-8: 12.5px;
  --fs-body-9: 9px;
  --lh-body-9: 12.5px;
  --fs-body-10: 10px; 
  --lh-body-10: 15px;
  --fs-body-11: 12px;
  --lh-body-11: 13.5px;
  --fs-body-12: 12px;
  --lh-body-12: 16px;
  --fs-body-14: 14px;
  --lh-body-14: 20px;
  --fs-body-16: 16px;
  --lh-body-16: 24px;
  --fs-body-18: 18px;
  --lh-body-18: 28px;
  --fs-body-24: 24px;
  --lh-body-24: 32px;

  /* Montserrat sizes + paired line-heights */
  --fs-head-10: 10px;
  --lh-head-10: 15px;
  --fs-head-12: 12px;
  --lh-head-12: 16px;
  --fs-head-14: 14px;
  --lh-head-14: 20px;
  --fs-head-16: 16px;
  --lh-head-16: 24px;
  --fs-head-18: 18px;
  --lh-head-18: 28px;
  --fs-head-24: 24px;
  --lh-head-24: 32px;
  --fs-head-30: 30px;
  --lh-head-30: 36px;
  --fs-head-34: 34px;
  --lh-head-34: 40px;
  --fs-head-36: 36px;
  --lh-head-36: 40px;
  --fs-head-52: 52px;
  --lh-head-52: 51px;

  /* Allowed breakpoints: 600 max, 640 / 768 / 1024 / 1280 / 1400 min */
  --card: var(--c-white);
  --border: var(--bd-slate-30);
  --secondary: var(--c-gold);
  --muted: var(--c-beige);
  --cream: var(--c-cream);
  --primary: var(--c-navy);
  --primary-foreground: var(--c-cream);
  --meter-red: var(--c-red);
  --meter-orange: var(--c-orange);
  --meter-yellow: var(--c-gold);
  --meter-green: var(--c-green);
  --destructive: var(--c-red);
  --muted-foreground: var(--c-taupe);

  /* Header — light */
  --athena-header-bg: var(--tx-cream-95);
  --athena-header-border: var(--bd-cream-20);
  --athena-header-text: var(--c-navy);
  --athena-icon-hover-bg: var(--bd-void-15);
  --athena-login-bg: var(--c-gold);
  --athena-login-text: var(--c-navy);
  --athena-shadow-amber: 0 4px 14px var(--bd-gold-30);
  --athena-shadow-amber-hover: 0 8px 24px var(--tx-gold-80);
  --athena-shadow-card: 0 1px 2px var(--bd-void-15), 0 8px 24px -12px var(--tx-void-45);

  /* Hero — dark brand surface */
  --athena-hero-bg: linear-gradient(165deg, var(--c-black) 0%, var(--c-navy) 50%, var(--c-navy) 100%);
  --athena-hero-title: var(--c-white);
  --athena-hero-muted: var(--tx-cream-75);
  --athena-hero-soft: var(--tx-cream-55);
  --athena-hero-border: var(--bd-white-10);
  --athena-hero-stat: var(--c-white);
  --athena-hero-outline: var(--bg-white-20);
  --athena-hero-btn-text: var(--c-navy);
  --athena-gauge-bg: radial-gradient(circle at 50% 40%, var(--c-navy) 0%, var(--c-black) 75%);
  --athena-gauge-track: var(--c-navy);
  --athena-gauge-label: var(--c-taupe);
  --athena-gauge-score: var(--c-white);
  --athena-gauge-rating: var(--c-green);
  --athena-gauge-hub: var(--c-gold);
  color-scheme: light;
}

html.athena-dark {
  --athena-bg: var(--bg-ink-95);
  --athena-surface: var(--c-navy);
  --athena-divider: var(--bd-white-10); 
  --athena-text: var(--c-cream);
  --athena-text-muted: var(--tx-cream-70);
  --athena-accent: var(--c-gold);
  --athena-accent-hover: var(--c-orange);
  --card: var(--c-navy);
  --border: var(--bd-white-15);
  --muted: var(--bd-white-08);
  --muted-foreground: var(--tx-cream-70);

  --athena-header-bg: var(--bg-ink-95);
  --athena-header-border: var(--bd-white-10);
  --athena-header-text: var(--c-cream);
  --athena-icon-hover-bg: var(--bg-white-05);
  --athena-login-bg: var(--c-gold);
  --athena-login-text: var(--c-navy);
  --athena-shadow-amber: 0 4px 14px var(--bd-gold-30);
  --athena-shadow-amber-hover: 0 8px 24px var(--tx-gold-80);
  --athena-shadow-card: 0 1px 0 0 var(--bg-gold-15), 0 8px 24px -12px var(--tx-void-50);

  --athena-hero-bg: linear-gradient(165deg, var(--c-black) 0%, var(--c-navy) 55%, var(--c-navy) 100%);
  --athena-hero-title: var(--c-white);
  --athena-hero-muted: var(--tx-cream-75);
  --athena-hero-soft: var(--tx-cream-55);
  --athena-hero-border: var(--bd-white-10);
  --athena-hero-stat: var(--c-white);
  --athena-hero-outline: var(--bg-white-20);
  --athena-hero-btn-text: var(--c-navy);
  --athena-gauge-bg: radial-gradient(circle at 50% 40%, var(--c-navy) 0%, var(--c-black) 75%);
  --athena-gauge-track: var(--c-navy);
  --athena-gauge-label: var(--c-taupe);
  --athena-gauge-score: var(--c-white);
  --athena-gauge-rating: var(--c-green);
  --athena-gauge-hub: var(--c-gold);
  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body-16);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body-16);
  color: var(--athena-text);
  background: var(--athena-bg);
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.25s ease, color 0.25s ease;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
}

input,
select,
textarea {
  font-family: var(--font-body);
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

button {
  font: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: inherit;
}

@media (min-width: 1400px) {
  .athena-header__inner,
  .hero__inner,
  .challenges__inner,
  .hp-services__inner,
  .testimonials__inner,
  .featured-in__inner,
  .cta__inner {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

@media (hover: none) and (pointer: coarse) {
  .hero__btn--primary:hover,
  .hero__btn--primary:focus-visible,
  .price-card__cta--navy:hover,
  .price-card__cta--gold:hover,
  .cta__btn:hover,
  .review-card:hover {
    transform: none;
  }
}

@media (prefers-reduced-motion) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}