/* =====================================================================
   MI PROBATE AGENT — Colors & Type
   Single source of truth for tokens across all surfaces.
   ===================================================================== */

/* ---- Fonts ----------------------------------------------------------
   Brand font: Brandon Grotesque (Black / Bold / Regular).
   SUBSTITUTION (flag to user): Brandon Grotesque is a paid HVD foundry
   font not available via CDN. We use Google Fonts' "Mulish" as the
   closest free stand-in — geometric sans with humanist warmth, weights
   available at 400 / 700 / 900, small x-height, open apertures.

   To restore: host Brandon Grotesque .woff2 files in /fonts/ and swap
   the --font-sans declaration below.
-------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@400;700;900&display=swap');

:root {
  /* ========== COLOR — Raw palette (brand guide) =================== */
  --deep-navy-teal: #0C3B48;   /* Primary anchor */
  --medium-teal:    #186575;   /* Secondary */
  --warm-gold:      #916C34;   /* Accent — sparingly */
  --off-white:      #F8F5F0;   /* Background */
  --charcoal:       #2D2D2D;   /* Body text */
  --light-gray:     #E8E4DF;   /* Borders / dividers */

  /* Extended tints (derived — for hover / press / surfaces) */
  --deep-navy-teal-90: #234D58;  /* hover on primary */
  --deep-navy-teal-80: #3B6069;
  --medium-teal-90:    #2D7685;
  --medium-teal-tint:  #E3EDEE;  /* light teal surface */
  --warm-gold-90:      #A07B3F;  /* hover on gold CTA */
  --warm-gold-80:      #AC8B54;
  --warm-gold-tint:    #EFE7D8;  /* light gold surface */
  --off-white-pressed: #EFEAE1;
  --light-gray-2:      #D6D0C8;  /* stronger border */

  /* ========== COLOR — Semantic tokens ============================= */
  --bg:            var(--off-white);
  --bg-alt:        var(--light-gray);     /* alternating section rhythm */
  --bg-inverse:    var(--deep-navy-teal); /* hero / footer */
  --bg-card:       var(--off-white);
  --bg-card-inv:   var(--deep-navy-teal);

  --fg:            var(--charcoal);       /* body on light */
  --fg-muted:      #5C5C5C;
  --fg-inverse:    var(--off-white);      /* body on dark */
  --fg-inverse-muted: #B8C7CB;

  --heading:       var(--deep-navy-teal);
  --heading-inverse: var(--off-white);

  --accent:        var(--warm-gold);
  --link:          var(--medium-teal);
  --link-hover:    var(--deep-navy-teal);

  --border:        var(--light-gray);
  --border-strong: var(--light-gray-2);
  --divider:       var(--medium-teal);    /* accent dividers */

  /* Primary CTA: Warm Gold bg, white text (per brand guide) */
  --btn-primary-bg:       var(--warm-gold);
  --btn-primary-bg-hover: var(--warm-gold-90);
  --btn-primary-bg-press: #7E5D2D;
  --btn-primary-fg:       #FFFFFF;

  /* Secondary CTA: Deep Navy Teal outline */
  --btn-secondary-bg:       transparent;
  --btn-secondary-bg-hover: var(--deep-navy-teal);
  --btn-secondary-fg:       var(--deep-navy-teal);
  --btn-secondary-fg-hover: var(--off-white);
  --btn-secondary-border:   var(--deep-navy-teal);

  /* Tertiary / ghost */
  --btn-ghost-fg:       var(--deep-navy-teal);
  --btn-ghost-fg-hover: var(--medium-teal);

  /* Focus ring — warm gold at 40% for accessibility on both bg types */
  --focus-ring: 0 0 0 3px rgba(145, 108, 52, 0.45);

  /* ========== TYPE — Families ===================================== */
  --font-sans: 'Mulish', 'Brandon Grotesque', 'Helvetica Neue', Arial, sans-serif;

  /* ========== TYPE — Weights ====================================== */
  --w-regular: 400;
  --w-bold:    700;
  --w-black:   900;

  /* ========== TYPE — Scale (digital, per brand guide) ============= */
  --fs-h1:      60px;  /* 48–64px */
  --fs-h2:      40px;  /* 36–42px */
  --fs-h3:      26px;  /* 24–28px */
  --fs-h4:      19px;  /* 18–20px */
  --fs-body:    17px;  /* 16–18px */
  --fs-small:   14px;  /* 13–14px */
  --fs-xs:      12px;
  --fs-btn:     15px;  /* 14–16px */
  --fs-overline: 12px;

  /* Line heights */
  --lh-heading: 1.15;   /* 1.1–1.2 per guide */
  --lh-body:    1.55;   /* 1.5–1.6 per guide */
  --lh-tight:   1.1;

  /* Tracking */
  --ls-heading: 0.01em;  /* light tracking on Bold/Black per guide */
  --ls-overline: 0.16em; /* wide tracking for eyebrows, small caps */
  --ls-button:   0.08em; /* buttons can be all-caps */

  /* ========== SPACING ============================================= */
  --sp-0: 0;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  /* Layout */
  --container-max: 1200px;
  --container-narrow: 720px;
  --gutter: 24px;

  /* ========== RADII — none. Brand rule: no rounded corners. ======= */
  --radius-0: 0;
  --radius-hairline: 1px;  /* avoid; here only for input focus quirks */

  /* ========== BORDERS ============================================= */
  --bw-1: 1px;
  --bw-2: 2px;
  --bw-3: 3px;  /* accent underlines / dividers */
  --bw-4: 4px;  /* strong accent bars */

  /* ========== SHADOWS ============================================= */
  /* Use sparingly — brand is geometric/flat. Reserved for floating UI. */
  --shadow-sm: 0 1px 2px rgba(12, 59, 72, 0.08);
  --shadow-md: 0 4px 12px rgba(12, 59, 72, 0.10);
  --shadow-lg: 0 12px 32px rgba(12, 59, 72, 0.14);
  /* Inset / press */
  --shadow-inset: inset 0 2px 0 rgba(12, 59, 72, 0.15);

  /* ========== MOTION ============================================== */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
  --ease-out: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}

/* =====================================================================
   SEMANTIC ELEMENTS
   These apply opinionated defaults to bare HTML so templates read well.
   ===================================================================== */

html { background: var(--bg); color: var(--fg); }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--w-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  color: var(--heading);
  margin: 0 0 var(--sp-4);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  text-wrap: balance;
}

h1 { font-weight: var(--w-black); font-size: var(--fs-h1); }
h2 { font-weight: var(--w-black); font-size: var(--fs-h2); }
h3 { font-weight: var(--w-bold);  font-size: var(--fs-h3); }
h4 { font-weight: var(--w-bold);  font-size: var(--fs-h4); }

p {
  margin: 0 0 var(--sp-4);
  max-width: 68ch;
  text-wrap: pretty;
}

a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--link-hover); }

hr {
  border: 0;
  border-top: var(--bw-1) solid var(--border);
  margin: var(--sp-6) 0;
}

small { font-size: var(--fs-small); color: var(--fg-muted); }

/* Utility: eyebrow / overline (used above section headings) */
.overline {
  font-family: var(--font-sans);
  font-weight: var(--w-bold);
  font-size: var(--fs-overline);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--medium-teal);
}

/* Utility: gold divider rule (section ornament) */
.divider-gold {
  width: 48px;
  height: var(--bw-3);
  background: var(--warm-gold);
  border: 0;
  margin: var(--sp-4) 0 var(--sp-5);
}

/* Dark surface (hero / footer) */
.surface-dark {
  background: var(--bg-inverse);
  color: var(--fg-inverse);
}
.surface-dark h1,
.surface-dark h2,
.surface-dark h3,
.surface-dark h4 { color: var(--heading-inverse); }
.surface-dark a { color: var(--off-white); }
.surface-dark .overline { color: var(--warm-gold); }

/* Focus */
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}