/* ══════════════════════════════════════════════════════
   Hardt Web Development — Internal Ops Design System
   Shared tokens for SOPs, templates, questionnaires,
   checklists, and internal tools on ops.charleshardt.com
   ══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,600;0,700;1,400;1,600&family=Inter:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800&family=DM+Mono:wght@400;500&display=swap');

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

:root {
  --navy:        #0f2354;
  --navy-2:      #1a3470;
  --navy-3:      #1e3d85;
  --navy-dim:    rgba(15,35,84,0.07);
  --navy-border: rgba(15,35,84,0.20);
  --white:       #ffffff;
  --off-white:   #f4f6fb;
  --gray-50:     #f8fafc;
  --gray-100:    #f1f4f9;
  --gray-200:    #e3e8f0;
  --gray-300:    #c8d2e0;
  --text-1:      #0f172a;
  --text-2:      #334155;
  --text-3:      #64748b;
  --text-4:      #94a3b8;
  --rule:        #e3e8f0;
  --rule-soft:   #eef1f7;
  --amber:       #b45309;
  --amber-light: #fffbeb;
  --amber-bg:    #fffbeb;
  --amber-border:#fde68a;
  --amber-text:  #7a4a08;
  --red:         #dc2626;
  --red-light:   #fef2f2;
  --red-bg:      #fef2f2;
  --red-border:  #fecaca;
  --red-text:    #991b1b;
  --green:       #15803d;
  --green-light: #f0fdf4;
  --green-bg:    #f0fdf4;
  --green-border:#bbf7d0;
  --green-text:  #166534;
  --blue:        #1d4ed8;
  --blue-light:  #eff6ff;
  --blue-bg:     #eff6ff;
  --blue-border: #bfdbfe;
  --blue-text:   #1e40af;
  --shadow-sm:   0 1px 3px rgba(15,35,84,0.08), 0 1px 2px rgba(15,35,84,0.05);
  --shadow-md:   0 4px 12px rgba(15,35,84,0.10), 0 2px 4px rgba(15,35,84,0.06);
  --serif:       "Lora", Georgia, serif;
  --sans:        "Inter", "Helvetica Neue", sans-serif;
  --mono:        "DM Mono", "Fira Code", monospace;
  --r:           10px;
  --r-lg:        14px;
  --hero-image:  url('https://images.unsplash.com/photo-1614850523011-8f49ffc73908?q=80&w=2340&auto=format&fit=crop'), linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02));
}

html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--sans);
  background: var(--off-white);
  color: var(--text-1);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}