/* ═══════════════════════════════════════════════════════════════════
   FNBMASTER — Shared UI Stylesheet
   Baseline typography + tokens for all public pages.
   Does NOT override any page-specific class — only sets:
     - Design tokens (:root variables)
     - Base HTML element styles (h1-h6, p, a, button, input)
     - Reusable utility classes
   Pages continue to own their own custom styles.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Self-hosted Inter ───────────────────────────────────────── */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/inter/inter-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/inter/inter-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/inter/inter-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/inter/inter-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url('/fonts/inter/inter-latin-800-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:900;font-display:swap;src:url('/fonts/inter/inter-latin-900-normal.woff2') format('woff2')}

/* ── Design tokens ───────────────────────────────────────────── */
:root{
  /* Brand */
  --blue-600:#0078D7;--blue-500:#0095F7;--blue-400:#00A4EF;
  --blue-100:#E8F2FC;--blue-50:#F3F9FE;
  --ink-900:#121A22;--ink-800:#1C2733;--ink-700:#2A3846;--ink-600:#3D4F5F;
  --ink-500:#5A6874;--ink-400:#8A98A6;--ink-300:#B4BEC7;--ink-200:#D9E0E6;
  --ink-100:#EDF1F4;--ink-50:#F8F9FA;
  --gold-500:#F4B300;--gold-400:#FFD84D;--gold-100:#FFF4CC;
  --white:#FFFFFF;--ivory:#F8F7F2;
  --green-500:#10B981;--red-500:#EF4444;--violet-500:#7357D8;

  /* Semantic */
  --bg:#FFFFFF;--bg-alt:#F8F7F2;
  --text:#121A22;--text-muted:#5A6874;--text-faint:#8A98A6;
  --border:#D9E0E6;--border-strong:#B4BEC7;
  --accent:#0078D7;

  /* Typography */
  --font-sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --text-sm:0.8125rem;--text-base:0.9375rem;--text-md:1rem;
  --text-lg:1.125rem;--text-xl:1.375rem;--text-2xl:1.75rem;--text-3xl:2.25rem;
  --leading-tight:1.1;--leading-snug:1.25;--leading-normal:1.5;--leading-relaxed:1.65;
  --tracking-tight:-0.02em;--tracking-tighter:-0.03em;

  /* Space */
  --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;

  /* Radii */
  --radius-sm:4px;--radius:8px;--radius-md:14px;--radius-lg:20px;--radius-full:9999px;

  /* Shadows */
  --shadow-sm:0 1px 2px rgba(18,26,34,0.04),0 1px 3px rgba(18,26,34,0.06);
  --shadow:0 4px 12px -4px rgba(18,26,34,0.10),0 2px 4px -2px rgba(18,26,34,0.06);
  --shadow-md:0 8px 18px rgba(0,86,210,0.05),0 2px 6px rgba(18,26,34,0.04);
  --shadow-lg:0 14px 28px rgba(0,86,210,0.08),0 4px 10px rgba(18,26,34,0.05);

  /* Motion */
  --dur-fast:150ms;--dur:250ms;--dur-slow:400ms;
  --ease:cubic-bezier(0.2,0.8,0.2,1);

  /* Layout */
  --container:1200px;
}

/* ── Baseline reset — HTML elements only, no classes ─────────── */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--font-sans);
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* ── Typography — element-level baseline only ───────────────── */
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-sans);
  font-weight:800;
  letter-spacing:var(--tracking-tight);
  line-height:var(--leading-snug);
  color:var(--text);
}
h1{font-size:clamp(1.75rem,4vw,2.75rem);line-height:1.15;letter-spacing:var(--tracking-tighter)}
h2{font-size:clamp(1.5rem,3vw,2.25rem);line-height:1.2;letter-spacing:var(--tracking-tighter)}
h3{font-size:clamp(1.125rem,2vw,1.5rem);line-height:1.25}
h4{font-size:1.125rem;font-weight:700}
p{line-height:var(--leading-relaxed)}

/* ── Utilities — safe opt-in classes ────────────────────────── */
.fnb-container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:clamp(16px,4vw,24px)}
.fnb-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;min-height:44px;font-size:var(--text-base);font-weight:600;letter-spacing:-0.01em;border-radius:var(--radius);border:1.5px solid transparent;cursor:pointer;white-space:nowrap;transition:transform var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease)}
.fnb-btn:active{transform:scale(0.98)}
.fnb-btn--primary{background:var(--blue-600);color:var(--white)}
.fnb-btn--primary:hover{background:var(--ink-900)}
.fnb-btn--secondary{background:var(--white);color:var(--ink-900);border-color:var(--border)}
.fnb-btn--secondary:hover{border-color:var(--ink-900)}
.fnb-btn--gold{background:var(--gold-500);color:var(--ink-900)}
.fnb-btn--gold:hover{background:var(--ink-900);color:var(--white)}

.fnb-eyebrow{display:inline-block;font-size:12px;font-weight:800;letter-spacing:0.08em;text-transform:uppercase;color:var(--blue-600);line-height:1.4;margin-bottom:12px}
.fnb-lede{font-size:clamp(1rem,1.4vw,1.0625rem);color:var(--text-muted);line-height:var(--leading-relaxed)}

/* Focus ring — accessibility baseline */
:focus-visible{outline:2px solid var(--blue-400);outline-offset:2px;border-radius:var(--radius-sm)}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important}
}

/* ═══════════════════════════════════════════════════════════════
   GREEN → BLUE MIGRATION
   Re-maps all green design tokens to the brand blue palette.
   Uses html body specificity so it wins over per-page :root rules.
   One change here updates every linked page automatically.
   ═══════════════════════════════════════════════════════════════ */

/* High-specificity override — beats per-page :root definitions */
html body,
html body:root,
body.theme-light,
body.theme-dark,
body[data-theme]{
  /* Primary — brand blue */
  --green: #0078D7;
  --green-dark: #0056B3;
  --green-primary: #0078D7;
  --green-accent: #FF9900;

  /* Full scale: light → dark, all blue family */
  --green-50:  #F3F9FE;
  --green-100: #E8F2FC;
  --green-150: #D0E6F7;
  --green-200: #D0E6F7;
  --green-300: #A6D3F0;
  --green-400: #4DAAE8;
  --green-500: #0078D7;
  --green-600: #0078D7;
  --green-700: #0056B3;
  --green-800: #004A99;
  --green-900: #003D80;

  /* Semantic alias — "success" now uses brand blue
     (per request: remove green from public pages) */
  --success: #0078D7;
  --success-bg: #E8F2FC;

  /* Orange companion — matches the landing page accent */
  --orange-500: #FF9900;
  --orange-400: #FFB340;
  --orange-100: #FFF4CC;
}

/* Safety net: if a page hard-codes the old green hex, target
   the most common ones directly so nothing green slips through */
html body [style*="#006241"],
html body [style*="#0E7A3C"],
html body [style*="#16825D"],
html body [style*="#10B981"],
html body [style*="#1E8B5E"]{
  color: var(--blue-600) !important;
}

/* Also catch elements using the semantic name in common patterns */
html body .btn--success,
html body .success,
html body .is-success,
html body [class*="verified"] svg,
html body [class*="check"] svg{
  color: var(--blue-600) !important;
}
html body .btn--success,
html body .success,
html body .is-success{
  background: var(--blue-600) !important;
  color: var(--white) !important;
  border-color: var(--blue-600) !important;
}

/* ──────── END GREEN MIGRATION ──────── */

/* Fix: missing deep-blue tokens referenced by careers.php */
html body {
  --blue-700: #0056B3;
  --blue-800: #004A99;
  --blue-900: #003D80;
}