/* ==========================================================================
   Werkor — design tokens as CSS custom properties
   Source of truth: https://www.werkor.us (scanned 2026-09-20)

   Drop this in before any other stylesheet. Works with or without Tailwind.
   Every value below is what the live site actually computes to.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  /* --- Brand ------------------------------------------------------------ */
  --wk-navy:          #1E3A8A;  /* primary. nav, dark sections, headings     */
  --wk-navy-deep:     #172554;  /* gradient floor, photo scrims only         */
  --wk-navy-hover:    #1D4ED8;  /* hover state on navy fills                 */
  --wk-navy-200:      #BFDBFE;  /* body copy ON navy                         */
  --wk-navy-100:      #DBEAFE;  /* 1px rings on white cards                  */
  --wk-navy-50:       #EFF6FF;  /* tinted section background                 */

  --wk-orange:        #F97316;  /* accent. icon tiles, large display text    */
  --wk-orange-cta:    #C2410C;  /* USE THIS for white text on orange (AA)    */
  --wk-orange-cta-hv: #9A3412;  /* hover on the primary button               */
  --wk-orange-600:    #EA580C;  /* badge text, inline links                  */
  --wk-orange-400:    #FB923C;  /* rings/glow at ≤30% opacity                */
  --wk-orange-100:    #FFEDD5;  /* badge border                              */
  --wk-orange-50:     #FFF7ED;  /* badge + icon-tile background              */

  /* --- Neutrals --------------------------------------------------------- */
  --wk-ink:           #0F172A;  /* headlines on light        17.9:1 on white */
  --wk-ink-700:       #334155;  /* secondary button label    10.4:1          */
  --wk-ink-600:       #475569;  /* body copy                  7.6:1          */
  --wk-ink-500:       #64748B;  /* captions, footer           4.8:1 ≥14px    */
  --wk-ink-400:       #94A3B8;  /* DECORATIVE ONLY — 2.6:1, never body text  */
  --wk-ink-300:       #CBD5E1;  /* borders on white                          */
  --wk-white:         #FFFFFF;

  /* --- Semantic surfaces ------------------------------------------------ */
  --wk-surface:            var(--wk-white);
  --wk-surface-tinted:     var(--wk-navy-50);
  --wk-surface-inverse:    var(--wk-navy);
  --wk-text:               var(--wk-ink);
  --wk-text-muted:         var(--wk-ink-600);
  --wk-text-on-inverse:    var(--wk-white);
  --wk-text-muted-on-inverse: var(--wk-navy-200);
  --wk-border:             var(--wk-navy-100);

  /* --- Type ------------------------------------------------------------- */
  --wk-font: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;

  --wk-size-display:  3.75rem;  /* 60px  / lh 1    / ls -0.025em / 700       */
  --wk-size-h1:       2.25rem;  /* 36px  mobile hero + section heads         */
  --wk-size-h2:       2.25rem;  /* 36px  / lh 2.5rem / ls -0.025em / 700     */
  --wk-size-h3:       1.25rem;  /* 20px  / lh 1.75rem / 600                  */
  --wk-size-lead:     1.125rem; /* 18px  / lh 1.75rem / 400                  */
  --wk-size-body:     1rem;     /* 16px  / lh 1.625rem / 400                 */
  --wk-size-small:    0.875rem; /* 14px  / lh 1.25rem                        */
  --wk-size-eyebrow:  0.75rem;  /* 12px  / ls 0.025em / 700 / uppercase      */

  --wk-weight-regular:  400;
  --wk-weight-medium:   500;
  --wk-weight-semibold: 600;
  --wk-weight-bold:     700;

  --wk-tracking-tight: -0.025em; /* all headings ≥20px                       */
  --wk-tracking-wide:   0.025em; /* eyebrow labels only                      */
  --wk-leading-tight:   1;
  --wk-leading-snug:    1.4;
  --wk-leading-relaxed: 1.625;

  /* --- Radius ----------------------------------------------------------- */
  --wk-radius-btn:   8px;
  --wk-radius-tile: 12px;
  --wk-radius-card: 16px;
  --wk-radius-pill: 9999px;

  /* --- Elevation -------------------------------------------------------- */
  --wk-shadow-card:       0 1px 2px 0 rgb(0 0 0 / 0.05);
  --wk-shadow-card-hover: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --wk-shadow-tile:       0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --wk-shadow-nav:        0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --wk-shadow-media:      0 25px 50px -12px rgb(0 0 0 / 0.25);
  --wk-ring-card:         inset 0 0 0 1px var(--wk-navy-100);

  /* --- Layout ----------------------------------------------------------- */
  --wk-container:  1152px;  /* nav, grids, footer  (max-w-6xl)               */
  --wk-prose:       896px;  /* hero block, media   (max-w-4xl)               */
  --wk-measure:     672px;  /* paragraph max width (max-w-2xl)               */
  --wk-gutter:       24px;  /* horizontal page padding                       */
  --wk-section-y:    96px;  /* vertical rhythm between sections              */
  --wk-nav-h:        68px;  /* fixed header height — also scroll-margin-top  */

  /* --- Motion ----------------------------------------------------------- */
  --wk-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --wk-duration: 200ms;

  /* --- Gradients -------------------------------------------------------- */
  --wk-hero-wash:   linear-gradient(to bottom, #FFF7ED, #FFFFFF, #1E3A8A);
  --wk-media-scrim: linear-gradient(to top, rgb(23 37 84 / 0.8), rgb(30 58 138 / 0.2), transparent);
}

/* --- Base ---------------------------------------------------------------- */
body {
  font-family: var(--wk-font);
  font-size: var(--wk-size-body);
  line-height: var(--wk-leading-relaxed);
  color: var(--wk-text-muted);
  background: var(--wk-surface);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--wk-font);
  color: var(--wk-navy);
  letter-spacing: var(--wk-tracking-tight);
  font-weight: var(--wk-weight-bold);
}

/* Section headings sit in navy; the hero H1 is the one exception — ink, with
   the second line flipped to orange. See BRAND-KIT.md → Headline pattern. */
h1 { color: var(--wk-ink); font-size: var(--wk-size-h1); line-height: 1.1; }
h2 { font-size: var(--wk-size-h2); line-height: 2.5rem; }
h3 { font-size: var(--wk-size-h3); line-height: 1.75rem; font-weight: var(--wk-weight-semibold); letter-spacing: normal; }

@media (min-width: 768px) {
  h1 { font-size: var(--wk-size-display); line-height: var(--wk-leading-tight); letter-spacing: -0.025em; }
}

:target, [id] { scroll-margin-top: calc(var(--wk-nav-h) + 16px); }

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

/* --- Components ---------------------------------------------------------- */

.wk-container { max-width: var(--wk-container); margin-inline: auto; padding-inline: var(--wk-gutter); }
.wk-section   { padding-block: var(--wk-section-y); }
.wk-section--tinted  { background: var(--wk-surface-tinted); }
.wk-section--inverse { background: var(--wk-surface-inverse); color: var(--wk-text-on-inverse); }
.wk-section--inverse h2, .wk-section--inverse h3 { color: var(--wk-white); }
.wk-section--inverse p { color: var(--wk-text-muted-on-inverse); }

.wk-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--wk-font); font-weight: var(--wk-weight-semibold);
  border-radius: var(--wk-radius-btn); border: 0; cursor: pointer;
  transition: background-color var(--wk-duration) var(--wk-ease),
              transform var(--wk-duration) var(--wk-ease);
  text-decoration: none;
}
.wk-btn:focus-visible { outline: 2px solid var(--wk-orange-cta); outline-offset: 2px; }

/* sizes */
.wk-btn--sm { padding: 8px 16px;  font-size: var(--wk-size-small); }  /* nav */
.wk-btn--lg { padding: 16px 32px; font-size: var(--wk-size-lead);  }  /* hero */

/* variants */
.wk-btn--primary   { background: var(--wk-orange-cta); color: var(--wk-white); box-shadow: var(--wk-shadow-card); }
.wk-btn--primary:hover { background: var(--wk-orange-cta-hv); }
.wk-btn--secondary { background: transparent; color: var(--wk-ink-700); border: 1px solid var(--wk-ink-300); }
.wk-btn--secondary:hover { border-color: var(--wk-navy); color: var(--wk-navy); }
.wk-btn--ghost     { background: transparent; color: var(--wk-navy-100); }  /* on navy nav */
.wk-btn--ghost:hover { color: var(--wk-white); }

.wk-badge {
  display: inline-flex; align-items: center; gap: 8px;
  border-radius: var(--wk-radius-pill);
  padding: 6px 16px;
  font-size: var(--wk-size-small); font-weight: var(--wk-weight-medium);
  background: var(--wk-orange-50); color: var(--wk-orange-600);
  border: 1px solid var(--wk-orange-100);
}
.wk-badge--solid { background: var(--wk-orange); color: var(--wk-white); border: 0; padding: 4px 12px; font-weight: var(--wk-weight-semibold); }

.wk-card {
  border-radius: var(--wk-radius-card);
  background: var(--wk-white);
  padding: 32px;
  box-shadow: var(--wk-shadow-card), var(--wk-ring-card);
}
.wk-card--inverse {
  background: var(--wk-navy); color: var(--wk-white); box-shadow: var(--wk-shadow-card);
  transition: transform var(--wk-duration) var(--wk-ease), box-shadow var(--wk-duration) var(--wk-ease);
}
.wk-card--inverse:hover { transform: translateY(-4px); box-shadow: var(--wk-shadow-card-hover); }

.wk-tile { /* icon container */
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  border-radius: var(--wk-radius-tile);
  background: var(--wk-orange); color: var(--wk-white);
  box-shadow: var(--wk-shadow-tile);
}
.wk-tile--soft { width: 48px; height: 48px; background: var(--wk-orange-50); color: var(--wk-orange); box-shadow: none; }

.wk-eyebrow {
  font-size: var(--wk-size-eyebrow); font-weight: var(--wk-weight-bold);
  letter-spacing: var(--wk-tracking-wide); text-transform: uppercase;
  color: var(--wk-ink-500);
}