/* ============================================================
   Advisors Mortgage Group — Design Tokens
   Merged from DESIGN SYSTEM/tokens/*
   ============================================================ */

/* --- Fonts ---
   Brand: Proxima Nova. Fallback: Montserrat (Google Fonts).
   Replace with licensed Proxima Nova for production fidelity.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,600&display=swap');

:root {
  /* ============================================================
     COLOR TOKENS
     Clean black-and-white base with confident gold + blue accents.
     Gold is for CTAs / highlights / accents ONLY — never large fills
     or body text. Always dark text on gold.
     ============================================================ */

  /* --- Brand palette --- */
  --color-gold: #DEB406;
  --color-gold-tint: #F5E066;
  --color-blue: #4274B9;
  --color-brand-blue: #1178BC;      /* Accent blue for links, icons, buttons */
  --color-navy: #0F2A4A;            /* Dark navy for hero, footer, structural fills */
  --color-navy-deep: #0A1F38;       /* Even darker for hover states on navy */
  --color-charcoal: #1A1A1A;
  --color-white: #FFFFFF;
  --color-grey: #D1D3D4;

  /* --- Derived neutrals --- */
  --color-grey-50: #F7F8FA;
  --color-grey-100: #EDEEF0;
  --color-grey-200: #D1D3D4;
  --color-grey-400: #9A9DA3;
  --color-grey-600: #595E66;
  --color-grey-700: #3C4046;

  /* --- Interaction tints --- */
  --color-gold-hover: #C9A305;
  --color-gold-press: #B59204;
  --color-blue-hover: #35639F;
  --color-blue-tint: #EAF1FA;
  --color-brand-blue-hover: #0E6199;  /* Darker brand blue for hover */

  /* --- Semantic surfaces --- */
  --surface-page: var(--color-white);
  --surface-card: var(--color-white);
  --surface-muted: var(--color-grey-50);
  --surface-dark: var(--color-navy);
  --surface-dark-deep: var(--color-navy-deep);

  /* --- Semantic text --- */
  --text-primary: var(--color-charcoal);
  --text-secondary: var(--color-grey-600);
  --text-muted: var(--color-grey-400);
  --text-on-dark: var(--color-white);
  --text-on-dark-muted: rgba(255, 255, 255, 0.78);
  --text-on-gold: var(--color-charcoal);
  --text-link: var(--color-blue);
  --text-link-hover: var(--color-blue-hover);

  /* --- Borders & dividers --- */
  --border-default: var(--color-grey-200);
  --border-strong: var(--color-grey-400);
  --border-on-dark: rgba(255, 255, 255, 0.22);

  /* --- Accents --- */
  --accent-primary: var(--color-gold);
  --accent-secondary: var(--color-blue);
  --accent-underline: var(--color-gold);

  /* --- Status --- */
  --status-success: #2E8B57;
  --status-warning: var(--color-gold);
  --status-error: #C23B3B;
  --status-info: var(--color-blue);

  /* ============================================================
     TYPOGRAPHY TOKENS
     Proxima Nova / Montserrat. Strong, confident hierarchy.
     Sans-serif throughout. Headlines tight + bold.
     ============================================================ */

  /* --- Families --- */
  --font-sans: "Proxima Nova", "Montserrat", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: var(--font-sans);
  --font-body: var(--font-sans);

  /* --- Weights --- */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* --- Type scale --- */
  --fs-display-xl: 64px;
  --fs-display-lg: 52px;
  --fs-display: 42px;
  --fs-h1: 34px;
  --fs-h2: 28px;
  --fs-h3: 22px;
  --fs-h4: 18px;
  --fs-body-lg: 18px;
  --fs-body: 16px;
  --fs-body-sm: 14px;
  --fs-caption: 13px;
  --fs-overline: 13px;

  /* --- Line heights --- */
  --lh-tight: 1.08;
  --lh-snug: 1.2;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  /* --- Letter spacing --- */
  --ls-tight: -0.02em;
  --ls-normal: 0;
  --ls-wide: 0.04em;
  --ls-overline: 0.12em;

  /* ============================================================
     SPACING TOKENS
     8px base grid. Generous whitespace, mobile-first.
     ============================================================ */

  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* --- Layout --- */
  --container-max: 1200px;
  --container-wide: 1320px;
  --container-pad: 24px;
  --section-y: 80px;
  --section-y-sm: 48px;

  /* ============================================================
     ELEVATION TOKENS
     Moderate rounded corners. Soft, clean shadows.
     ============================================================ */

  /* --- Corner radii --- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* --- Shadows --- */
  --shadow-xs: 0 1px 2px rgba(26, 26, 26, 0.06);
  --shadow-sm: 0 2px 6px rgba(26, 26, 26, 0.08);
  --shadow-md: 0 6px 18px rgba(26, 26, 26, 0.10);
  --shadow-lg: 0 14px 38px rgba(26, 26, 26, 0.14);
  --shadow-card: 0 4px 16px rgba(17, 120, 188, 0.08);
  --shadow-focus: 0 0 0 3px rgba(66, 116, 185, 0.35);

  /* --- Motion --- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 280ms;
}

/* ============================================================
   BASE STYLES & UTILITIES
   Light resets + brand primitives.
   ============================================================ */

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--text-primary);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-display);
  color: var(--text-primary);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

p { margin: 0; }

a {
  color: var(--text-link);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-standard);
}
a:hover { color: var(--text-link-hover); text-decoration: underline; }

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

/* --- Brand utilities --- */

.eyebrow {
  font-size: var(--fs-overline);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--color-gold);
}
.eyebrow--blue { color: var(--color-blue); }

.gold-rule {
  display: block;
  width: 64px;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--color-gold);
  margin-top: var(--space-4);
}

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.container--wide {
  max-width: var(--container-wide);
}

.section {
  padding-block: var(--section-y);
}

.section--sm {
  padding-block: var(--section-y-sm);
}

.bg-dark {
  background: var(--surface-dark);
  color: var(--text-on-dark);
}
.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4 { color: var(--text-on-dark); }

.bg-muted {
  background: var(--surface-muted);
}

.text-center { text-align: center; }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }