/* ============================================================
   MY ANNUITY STORE — DESIGN TOKENS
   tokens.css · v1.0 · 2026
   The single source of truth. Import this into any build:
       <link rel="stylesheet" href="/path/to/tokens.css">
   or  @import url("/path/to/tokens.css");

   Structure:
     1. Inter @font-face (self-hosted)
     2. :root design tokens  ← the core; safe to use anywhere
     3. OPTIONAL base + component layer (namespaced, conflict-free)
   ============================================================ */


/* ── 1. SELF-HOSTED INTER (variable) ─────────────────────────
   Relative paths = same-origin on myannuitystore.com (instant, no CORS).
   For assets hosted OFF the domain, swap to absolute https URLs and add
   `Access-Control-Allow-Origin` on the fonts folder. */
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/wp-content/uploads/omgf/elementor-gf-local-inter/inter-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/wp-content/uploads/omgf/elementor-gf-local-inter/inter-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter'; font-style: italic; font-weight: 100 900; font-display: swap;
  src: url('/wp-content/uploads/omgf/elementor-gf-local-inter/inter-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter'; font-style: italic; font-weight: 100 900; font-display: swap;
  src: url('/wp-content/uploads/omgf/elementor-gf-local-inter/inter-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ── 2. DESIGN TOKENS ───────────────────────────────────────── */
:root {

  /* COLOR — core brand (locked) */
  --navy:        #012169;   /* primary: headings, primary buttons, table headers, footers */
  --blue:        #0157ff;   /* accent: links, secondary CTA, data viz, focus rings */

  /* COLOR — brand extensions */
  --navy-900:    #001747;   /* deepest: hero overlays, footer fills */
  --navy-700:    #0a2f7a;   /* navy hover */
  --blue-600:    #0145cc;   /* blue hover */
  --blue-100:    #e6efff;   /* tinted panels, table-row highlight */
  --blue-050:    #f2f6ff;   /* faint wash */

  /* COLOR — neutrals */
  --ink:         #0f1b33;   /* body text */
  --ink-soft:    #41506b;   /* secondary text */
  --muted:       #6b7794;   /* captions, fine print */
  --line:        #dfe3ea;   /* borders, dividers */
  --line-soft:   #eef1f6;   /* hairline dividers */
  --paper:       #ffffff;   /* cards, surfaces */
  --canvas:      #f6f8fc;   /* page background */

  /* COLOR — semantic (use sparingly so they keep meaning) */
  --good:        #137a4d;   /* strong rate / positive */
  --good-bg:     #e7f4ed;
  --warn:        #b45309;   /* caution: surrender, replacement risk */
  --warn-bg:     #fdf2e3;

  /* TYPOGRAPHY — family */
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

  /* TYPOGRAPHY — weight (locked decisions) */
  --w-regular:  400;
  --w-medium:   500;   /* h1 / display */
  --w-semibold: 600;   /* h2, UI labels, buttons */
  --w-bold:     700;   /* eyebrows */

  /* TYPOGRAPHY — scale */
  --text-display: clamp(2.4rem, 5vw, 3.25rem);
  --text-h2:      1.9rem;
  --text-h3:      1.3rem;
  --text-lede:    1.2rem;
  --text-body:    1rem;
  --text-sm:      .875rem;
  --text-xs:      .72rem;

  /* TYPOGRAPHY — tracking & line-height */
  --track-display: -.025em;
  --track-h2:      -.02em;
  --track-tight:   -.01em;
  --track-eyebrow:  .14em;
  --lh-tight: 1.08;
  --lh-snug:  1.15;
  --lh-body:  1.6;

  /* SPACING (4px base) */
  --s1: .25rem; --s2: .5rem;  --s3: .75rem; --s4: 1rem;
  --s6: 1.5rem; --s8: 2rem;   --s12: 3rem;  --s16: 4rem; --s24: 6rem;

  /* RADIUS */
  --r-sm: 4px; --r-md: 8px; --r-lg: 14px; --r-pill: 999px;

  /* ELEVATION */
  --shadow-sm: 0 1px 2px rgba(1,33,105,.06), 0 1px 3px rgba(1,33,105,.08);
  --shadow-md: 0 4px 14px rgba(1,33,105,.10);
  --shadow-lg: 0 18px 50px rgba(1,33,105,.16);

  /* BRAND ASSETS — reference logos straight from CSS, e.g.
     background-image: var(--logo);  aspect ratio ≈ 3.4:1; min width 140px */
  --logo:       url('/wp-content/uploads/2026/05/My-Annuity-Store-Logo-Registered-Trademark.webp');  /* full-color: light bg */
  --logo-white: url('/wp-content/uploads/2026/05/My-Annuity-Store-White-Logo-scaled.png');           /* reversed: navy/dark bg */
}


/* ── 3. OPTIONAL BASE + COMPONENTS ───────────────────────────
   Everything below is NAMESPACED (.mas-* / .btn) so it never fights
   Elementor or theme element styles. Use these classes in standalone
   assets (calculators, guides, landing pages). If you only want tokens,
   stop reading at section 2 — the :root above is all you need. */

/* Typography utilities (encode the locked weight decisions) */
.mas-display { font-family: var(--font); font-weight: var(--w-medium);   font-size: var(--text-display); line-height: var(--lh-tight); letter-spacing: var(--track-display); color: var(--navy); }
.mas-h2      { font-family: var(--font); font-weight: var(--w-semibold); font-size: var(--text-h2);      line-height: var(--lh-snug);  letter-spacing: var(--track-h2);      color: var(--navy); }
.mas-h3      { font-family: var(--font); font-weight: var(--w-medium);   font-size: var(--text-h3);      letter-spacing: var(--track-tight); color: var(--navy); }
.mas-lede    { font-family: var(--font); font-weight: var(--w-regular);  font-size: var(--text-lede);    line-height: var(--lh-body);  color: var(--ink-soft); }
.mas-body    { font-family: var(--font); font-weight: var(--w-regular);  font-size: var(--text-body);    line-height: var(--lh-body);  color: var(--ink); }
.mas-eyebrow { font-family: var(--font); font-weight: var(--w-bold);     font-size: var(--text-xs); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--blue); }
.mas-fineprint { font-family: var(--font); font-size: var(--text-sm); color: var(--muted); }

/* Tabular figures — apply to any element showing rates/$ so columns align */
.tnum { font-variant-numeric: tabular-nums; }

/* Links */
.mas-link { color: var(--blue); text-decoration: none; border-bottom: 1px solid rgba(1,87,255,.3); transition: border-color .15s; }
.mas-link:hover { border-color: var(--blue); }

/* Accessible focus ring (apply to interactive elements) */
.mas-focus:focus-visible,
.btn:focus-visible,
.mas-input:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(1,87,255,.35); }

/* Buttons — NOTE the `color:#fff !important`: required to beat theme/Tailwind
   defaults that otherwise wash the label out. Approved CTA labels only:
   "Call Now", "Get a Quote"/"Quote", "Free Policy Review", or offer-specific.
   NEVER "Free Retirement Plan". */
.btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font); font-weight: var(--w-semibold); font-size: .95rem; line-height: 1; text-decoration: none; border: 0; border-radius: var(--r-md); padding: 13px 26px; cursor: pointer; transition: background .15s, box-shadow .15s, transform .1s; }
.btn:active { transform: translateY(1px); }
.btn-lg { font-size: 1.05rem; padding: 16px 32px; }
.btn-sm { font-size: .85rem; padding: 9px 18px; }

.btn-primary { background: var(--navy); color: #fff !important; }
.btn-primary:hover { background: var(--navy-700); box-shadow: var(--shadow-md); }

.btn-accent  { background: var(--blue); color: #fff !important; }
.btn-accent:hover { background: var(--blue-600); box-shadow: var(--shadow-md); }

.btn-outline { background: transparent; color: var(--navy) !important; box-shadow: inset 0 0 0 2px var(--navy); }
.btn-outline:hover { background: var(--navy); color: #fff !important; }

.btn-ghost   { background: transparent; color: var(--blue) !important; padding-left: 8px; padding-right: 8px; }
.btn-ghost:hover { color: var(--blue-600) !important; text-decoration: underline; }

/* Form input (sans, blue focus ring) */
.mas-input { width: 100%; font-family: var(--font); font-size: 1rem; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--r-md); background: var(--paper); color: var(--ink); transition: border-color .15s, box-shadow .15s; }
.mas-input:focus { outline: 0; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(1,87,255,.15); }

/* Range slider — navy thumb, blue focus ring, cross-browser */
.mas-range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: var(--r-pill); background: var(--line); outline: none; accent-color: var(--blue); cursor: pointer; }
.mas-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--navy); border: 3px solid #fff; box-shadow: var(--shadow-sm); cursor: pointer; }
.mas-range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--navy); border: 3px solid #fff; box-shadow: var(--shadow-sm); cursor: pointer; }
.mas-range::-moz-range-track { height: 6px; border-radius: var(--r-pill); background: var(--line); }
.mas-range:focus-visible { box-shadow: 0 0 0 3px rgba(1,87,255,.30); }
/* Pair with a value readout: <div class="rate-head"><label>…</label><span>…</span></div> */

/* Stat callouts (tabular nums; accent unit) */
.mas-statrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: var(--s4); }
.mas-stat { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s6); text-align: center; box-shadow: var(--shadow-sm); }
.mas-stat .num { font-family: var(--font); font-weight: var(--w-semibold); font-size: 2.6rem; line-height: 1; letter-spacing: -.02em; color: var(--navy); font-variant-numeric: tabular-nums; }
.mas-stat .num .unit { color: var(--blue); font-size: 1.5rem; }
.mas-stat .lbl { font-family: var(--font); font-size: .76rem; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-top: var(--s2); }

/* FAQ accordion — borderless, divider rows, blue down-chevron. No JS.
   Pair with FAQPage schema. */
.mas-faq { border-top: 1px solid var(--line); }
.mas-faq details { border-bottom: 1px solid var(--line); }
.mas-faq summary { list-style: none; cursor: pointer; padding: 20px 2px; font-family: var(--font); font-weight: var(--w-medium); font-size: 1.2rem; color: var(--navy); display: flex; justify-content: space-between; align-items: center; gap: var(--s6); }
.mas-faq summary::-webkit-details-marker { display: none; }
.mas-faq summary::after { content: ""; width: 11px; height: 11px; border-right: 2.5px solid var(--blue); border-bottom: 2.5px solid var(--blue); transform: rotate(45deg); position: relative; top: -3px; transition: transform .25s ease, top .25s ease; flex-shrink: 0; margin-right: 6px; }
.mas-faq details[open] summary::after { transform: rotate(-135deg); top: 3px; }
.mas-faq .ans { padding: 0 2px 20px; font-family: var(--font); color: var(--ink-soft); line-height: var(--lh-body); }

/* Author / reviewed-by box — E-E-A-T; pair with Person schema. */
.mas-author { display: flex; gap: var(--s4); align-items: center; background: var(--paper); border: 1px solid var(--line); border-left: 4px solid var(--blue); border-radius: var(--r-md); padding: var(--s4) var(--s6); font-family: var(--font); }
.mas-author .avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font-weight: var(--w-semibold); font-size: 1.15rem; flex-shrink: 0; object-fit: cover; }
.mas-author .role { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); font-weight: var(--w-bold); }
.mas-author .name { font-weight: var(--w-semibold); color: var(--navy); font-size: 1.05rem; }
.mas-author .cred { font-size: .85rem; color: var(--ink-soft); }
.mas-author .date { font-size: .78rem; color: var(--muted); margin-top: 2px; }

/* Disclosure / compliance footer — keep an accurate "as of" date.
   The text in the design-system doc is TEMPLATE language; have compliance
   review before publishing. */
.mas-disclosure { border-top: 2px solid var(--line); padding-top: var(--s4); font-family: var(--font); font-size: .8rem; color: var(--muted); line-height: 1.55; }
.mas-disclosure .stamp { display: inline-flex; align-items: center; gap: 7px; font-weight: var(--w-semibold); font-size: .74rem; color: var(--ink-soft); background: var(--blue-050); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 4px 12px; margin-bottom: var(--s3); }
.mas-disclosure .stamp .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--good); }

/* Need-help / specialist callout (from the footer; reuse anywhere) */
.mas-helpbox { display: flex; gap: var(--s4); align-items: center; background: var(--blue-050); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s4) var(--s6); font-family: var(--font); max-width: 560px; }
.mas-helpbox .hicon { color: var(--navy); flex-shrink: 0; }
.mas-helpbox .htext { font-size: 1rem; color: var(--ink); line-height: 1.45; }
.mas-helpbox .htext strong { color: var(--navy); }
.mas-helpbox a { color: var(--blue); text-decoration: none; font-weight: var(--w-semibold); }
.mas-helpbox a:hover { text-decoration: underline; }

/* ── CHART / DATA-VIZ TOKENS (for SVG, Chart.js, or Recharts) ──
   --chart-line:   #012169  (navy, 3px, round joins)
   --chart-fill:   #0157ff  (area gradient, ~26% → 2% opacity)
   --chart-grid:   #dfe3ea  (dashed 4 4)
   --chart-axis:   #6b7794  (muted labels)
   --chart-today:  #0157ff  (highlight point + bold value label)
   --chart-marker: #ffffff fill / #012169 stroke
   Annotations: white pill, 1px #dfe3ea border, navy headline + muted subline.
   Always use tabular-nums for figures. */