/* =========================================================================
   Axivaris Design System — Colors & Type
   "Get. More. Time."
   ========================================================================= */

/* ---------- Web fonts (Google Fonts substitutes — see README) ---------- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700&display=swap');

/* ManifoldCF DemiBold is a proprietary face. Closest free Google substitute
   is Manrope @ 600 — similar geometric sans with tight, intentional UI
   presence. Replace @font-face below with the real ManifoldCF files when
   you have them. */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap');

:root {
  /* ---------------- BRAND ANCHORS ---------------- */
  --axv-navy:               #15274e;   /* Axivaris Navy — primary anchor */
  --axv-navy-deep:          #0f1d3a;   /* Deep Navy Shadow */
  --axv-gold-exec:          #c7ae6a;   /* Executive Gold — premium accent */
  --axv-gold-warm:          #cbb26a;   /* Warm Gold — secondary accent */
  --axv-gold-active:        #b19759;   /* Gold pressed state */

  /* ---------------- COMPLEMENTARY SUPPORT ---------------- */
  --axv-sand:               #ead8b1;   /* Complement Sand — hover/focus glow */
  --axv-sapphire:           #385195;   /* Complement Sapphire — link on light */
  --axv-indigo:             #344d95;   /* Complement Indigo — dark hover */

  /* ---------------- SURFACES ---------------- */
  --axv-paper:              #ffffff;   /* Paper White */
  --axv-ivory:              #f8f3e6;   /* Ivory Mist */
  --axv-linen:              #e7dcc0;   /* Divider Linen */
  --axv-canvas-dark:        #15274e;   /* Navy Canvas */
  --axv-filter-sand:        rgba(234, 216, 177, 0.28);

  /* ---------------- TEXT / NEUTRALS ---------------- */
  --axv-fg-display:         #15274e;   /* Display Navy on light */
  --axv-fg-1:               #24385f;   /* Deep Slate — body heading */
  --axv-fg-2:               #5d6880;   /* Body Slate — secondary body */
  --axv-fg-3:               #cfc4a7;   /* Muted Linen — tertiary */
  --axv-fg-placeholder:     rgba(21, 39, 78, 0.6);
  --axv-fg-inverse:         #ffffff;   /* On dark surfaces */
  --axv-link-on-dark:       #ead8b1;

  /* ---------------- SEMANTIC ---------------- */
  --axv-cta-premium:        #c7ae6a;
  --axv-cta-premium-active: #b19759;
  --axv-warning:            #9f3852;   /* Warning Crimson */

  /* ---------------- SHADOWS / ELEVATION ---------------- */
  --axv-shadow-1:  0 5px 9px 0 rgba(21, 39, 78, 0.06);
  --axv-shadow-2:  0 5px 9px 0 rgba(21, 39, 78, 0.08);
  --axv-shadow-3:  0 5px 9px 0 rgba(21, 39, 78, 0.16);
  --axv-shadow-4:  0 5px 9px 0 rgba(15, 29, 58, 0.80);
  --axv-ring-gold: 0 0 0 2px #c7ae6a;
  --axv-ring-sand: 0 0 0 2px #ead8b1;

  /* ---------------- GRADIENTS (section-only) ---------------- */
  --axv-grad-light: linear-gradient(180deg, #ffffff 0%, #f8f3e6 100%);
  --axv-grad-dark:  linear-gradient(180deg, #0f1d3a 0%, #15274e 100%);

  /* ---------------- RADII (11-step scale) ---------------- */
  --axv-radius-2:   2px;
  --axv-radius-3:   3px;
  --axv-radius-6:   6px;
  --axv-radius-12:  12px;
  --axv-radius-13:  13px;
  --axv-radius-19:  19px;
  --axv-radius-20:  20px;
  --axv-radius-24:  24px;
  --axv-radius-36:  36px;
  --axv-radius-48:  48px;
  --axv-radius-pill: 999px;

  /* ---------------- SPACING (8px base) ---------------- */
  --axv-space-1:  1px;
  --axv-space-2:  2px;
  --axv-space-3:  3px;
  --axv-space-4:  4.5px;
  --axv-space-5:  5px;
  --axv-space-8:  8px;
  --axv-space-9:  9px;
  --axv-space-10: 10px;
  --axv-space-12: 12px;
  --axv-space-14: 14px;
  --axv-space-15: 15px;
  --axv-space-16: 16px;
  --axv-space-18: 18px;
  --axv-space-20: 20px;
  --axv-space-21: 21px;
  --axv-space-24: 24px;
  --axv-space-32: 32px;
  --axv-space-48: 48px;
  --axv-space-64: 64px;
  --axv-space-96: 96px;

  /* ---------------- TYPE FAMILIES ---------------- */
  --axv-display: "Montserrat", Arial, Helvetica, sans-serif; /* used at weight 200/300 */
  --axv-ui:      "Manrope", Arial, Helvetica, sans-serif;    /* ManifoldCF DemiBold sub */
  --axv-display-weight: 200;     /* Montserrat Thin equivalent */
  --axv-ui-weight: 600;          /* DemiBold */

  /* ---------------- TRANSITIONS ---------------- */
  --axv-ease: cubic-bezier(.4,0,.2,1);
  --axv-dur:  180ms;
}

/* ============================ BASE TYPE ============================== */

html, body {
  background: var(--axv-paper);
  color: var(--axv-fg-1);
  font-family: var(--axv-ui);
  font-weight: var(--axv-ui-weight);
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: 0.05px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display headlines — Montserrat Thin (200/300) */
h1, .axv-h1 {
  font-family: var(--axv-display);
  font-weight: 300;
  font-size: 54px;
  line-height: 1.25;
  letter-spacing: -0.1px;
  color: var(--axv-fg-display);
  margin: 0;
}
h2, .axv-h2 {
  font-family: var(--axv-display);
  font-weight: 300;
  font-size: 44px;
  line-height: 1.25;
  letter-spacing: 0.1px;
  color: var(--axv-fg-display);
  margin: 0;
}
h3, .axv-h3 {
  font-family: var(--axv-display);
  font-weight: 300;
  font-size: 35px;
  line-height: 1.25;
  color: var(--axv-fg-display);
  margin: 0;
}
h4, .axv-h4 {
  font-family: var(--axv-display);
  font-weight: 300;
  font-size: 28px;
  line-height: 1.25;
  letter-spacing: 0.1px;
  color: var(--axv-fg-display);
  margin: 0;
}
h5, .axv-h5 {
  font-family: var(--axv-display);
  font-weight: 300;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: 0.1px;
  color: var(--axv-fg-display);
  margin: 0;
}
h6, .axv-h6 {
  font-family: var(--axv-ui);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.10;
  color: var(--axv-fg-1);
  margin: 0;
}

/* Body */
p, .axv-body {
  font-family: var(--axv-ui);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: 0.05px;
  color: var(--axv-fg-1);
  margin: 0;
}

/* UI labels / captions */
.axv-caption {
  font-family: var(--axv-ui);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.4;
  color: var(--axv-fg-2);
}
.axv-pill-label {
  font-family: var(--axv-ui);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.10;
  letter-spacing: 0.12px;
}
.axv-micro {
  font-family: var(--axv-ui);
  font-weight: 600;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.1px;
}

a, .axv-link {
  color: var(--axv-sapphire);
  text-decoration: none;
  font-weight: 600;
}
a:hover { color: var(--axv-navy); }

/* On dark surfaces */
.axv-on-dark { color: var(--axv-fg-inverse); }
.axv-on-dark a, .axv-on-dark .axv-link { color: var(--axv-link-on-dark); }
.axv-on-dark p, .axv-on-dark h1, .axv-on-dark h2, .axv-on-dark h3, .axv-on-dark h4, .axv-on-dark h5 { color: var(--axv-fg-inverse); }

/* ============================ CTAs ============================== */

.axv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--axv-ui);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: 0.35px;
  border: 0;
  border-radius: var(--axv-radius-pill);
  padding: 12px 24px;
  cursor: pointer;
  transition: background var(--axv-dur) var(--axv-ease),
              color var(--axv-dur) var(--axv-ease),
              box-shadow var(--axv-dur) var(--axv-ease),
              border-color var(--axv-dur) var(--axv-ease);
}

/* Primary */
.axv-btn--primary {
  background: var(--axv-navy);
  color: #fff;
  border: 2px solid transparent;
}
.axv-btn--primary:hover {
  background: var(--axv-sapphire);
  border-color: var(--axv-sand);
  box-shadow: var(--axv-ring-gold);
}
.axv-btn--primary:active { opacity: 0.7; }

/* Secondary — gold outline on light */
.axv-btn--secondary {
  background: #fff;
  color: var(--axv-navy);
  border: 2px solid var(--axv-gold-exec);
  padding: 14px 20px;
  border-radius: var(--axv-radius-pill);
  letter-spacing: 0.35px;
}
.axv-btn--secondary:hover {
  background: var(--axv-gold-warm);
  color: var(--axv-navy);
  box-shadow: var(--axv-ring-sand);
}

/* Premium gold action */
.axv-btn--premium {
  background: var(--axv-gold-exec);
  color: var(--axv-navy);
  letter-spacing: 0.4px;
  border: 2px solid transparent;
}
.axv-btn--premium:hover { background: var(--axv-gold-warm); box-shadow: 0 0 0 2px var(--axv-navy); }
.axv-btn--premium:active { background: var(--axv-gold-active); }

/* Ghost */
.axv-btn--ghost {
  background: transparent;
  color: var(--axv-fg-1);
  border: 1px solid #d9ceb0;
  padding: 8px 14px;
}
.axv-btn--ghost:hover {
  background: var(--axv-navy);
  color: #fff;
  border-color: var(--axv-sand);
}

/* Mini in-card CTA */
.axv-btn--mini {
  font-size: 14px;
  letter-spacing: 0.25px;
  padding: 8px 16px;
}

/* ============================ INPUTS ============================== */

.axv-input {
  font-family: var(--axv-ui);
  font-weight: 600;
  font-size: 16px;
  color: var(--axv-fg-1);
  background: #fff;
  border: 1px solid var(--axv-fg-3);
  border-radius: var(--axv-radius-3);
  padding: 12px 14px;
  width: 100%;
  transition: border-color var(--axv-dur) var(--axv-ease),
              box-shadow var(--axv-dur) var(--axv-ease);
}
.axv-input::placeholder { color: var(--axv-fg-placeholder); }
.axv-input:focus {
  outline: none;
  border-color: var(--axv-gold-exec);
  box-shadow: var(--axv-ring-gold);
}
.axv-input--error { border-color: var(--axv-warning); color: var(--axv-warning); }

/* ============================ CARDS ============================== */

.axv-card {
  background: #fff;
  border-radius: var(--axv-radius-19);
  box-shadow: var(--axv-shadow-2);
  padding: 32px;
}
.axv-card--feature {
  border-radius: var(--axv-radius-24);
  padding: 48px;
  box-shadow: var(--axv-shadow-3);
}
.axv-card--dark {
  background: var(--axv-grad-dark);
  color: #fff;
  border-radius: var(--axv-radius-24);
  box-shadow: var(--axv-shadow-4);
}

/* ============================ PILL / TAG ============================== */

.axv-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  color: var(--axv-navy);
  border-radius: var(--axv-radius-pill);
  padding: 10px 16px;
  font-family: var(--axv-ui);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.12px;
}
.axv-pill--gold { background: var(--axv-gold-exec); color: var(--axv-navy); }
.axv-pill--sand { background: var(--axv-sand); color: var(--axv-navy); }
.axv-pill--ghost { background: transparent; border: 1px solid var(--axv-linen); color: var(--axv-fg-1); }