/* =========================================================
   WINGENS CONSULTANTS — Design tokens
   Source: logo + wingens.com (April 2026)
   Brand fonts: Barlow (display) + Josefin Sans (body)
   ========================================================= */

/* --- Barlow (display / headings) --- */
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 100; font-display: swap; src: url("fonts/Barlow-Thin.ttf") format("truetype"); }
@font-face { font-family: "Barlow"; font-style: italic; font-weight: 100; font-display: swap; src: url("fonts/Barlow-ThinItalic.ttf") format("truetype"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 200; font-display: swap; src: url("fonts/Barlow-ExtraLight.ttf") format("truetype"); }
@font-face { font-family: "Barlow"; font-style: italic; font-weight: 200; font-display: swap; src: url("fonts/Barlow-ExtraLightItalic.ttf") format("truetype"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 300; font-display: swap; src: url("fonts/Barlow-Light.ttf") format("truetype"); }
@font-face { font-family: "Barlow"; font-style: italic; font-weight: 300; font-display: swap; src: url("fonts/Barlow-LightItalic.ttf") format("truetype"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/Barlow-Regular.ttf") format("truetype"); }
@font-face { font-family: "Barlow"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/Barlow-Italic.ttf") format("truetype"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/Barlow-Medium.ttf") format("truetype"); }
@font-face { font-family: "Barlow"; font-style: italic; font-weight: 500; font-display: swap; src: url("fonts/Barlow-MediumItalic.ttf") format("truetype"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/Barlow-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Barlow"; font-style: italic; font-weight: 600; font-display: swap; src: url("fonts/Barlow-SemiBoldItalic.ttf") format("truetype"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/Barlow-Bold.ttf") format("truetype"); }
@font-face { font-family: "Barlow"; font-style: italic; font-weight: 700; font-display: swap; src: url("fonts/Barlow-BoldItalic.ttf") format("truetype"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/Barlow-ExtraBold.ttf") format("truetype"); }
@font-face { font-family: "Barlow"; font-style: italic; font-weight: 800; font-display: swap; src: url("fonts/Barlow-ExtraBoldItalic.ttf") format("truetype"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 900; font-display: swap; src: url("fonts/Barlow-Black.ttf") format("truetype"); }
@font-face { font-family: "Barlow"; font-style: italic; font-weight: 900; font-display: swap; src: url("fonts/Barlow-BlackItalic.ttf") format("truetype"); }

/* --- Josefin Sans (body) — variable fonts --- */
@font-face { font-family: "Josefin Sans"; font-style: normal; font-weight: 100 700; font-display: swap; src: url("fonts/JosefinSans-VariableFont_wght.ttf") format("truetype-variations"); }
@font-face { font-family: "Josefin Sans"; font-style: italic; font-weight: 100 700; font-display: swap; src: url("fonts/JosefinSans-Italic-VariableFont_wght.ttf") format("truetype-variations"); }

:root {
  /* -------- BRAND COLORS -------- */
  --wc-navy:          #02254F;   /* primary brand navy */
  --wc-navy-700:      #0A3266;   /* hover / lighter navy for backgrounds */
  --wc-navy-500:      #29507F;   /* mid navy, borders on dark */
  --wc-navy-300:      #6B82A3;   /* desaturated navy, secondary text */
  --wc-navy-100:      #E4E9F1;   /* navy-tinted surface */

  --wc-yellow:        #F8D556;   /* brand accent yellow (diamond) */
  --wc-yellow-600:    #E0B831;   /* pressed / darker accent */
  --wc-yellow-100:    #FDF3CE;   /* soft wash / highlight */

  /* -------- NEUTRALS -------- */
  --wc-ink:           #0B1A2E;   /* body text ink, near-black w/ navy cast */
  --wc-ink-2:         #3B4A60;   /* secondary text */
  --wc-ink-3:         #6B7A8F;   /* tertiary / captions */
  --wc-line:          #D8DEE7;   /* hairline borders */
  --wc-line-soft:     #EDF0F5;   /* subtle dividers */
  --wc-bg:            #FFFFFF;   /* page */
  --wc-bg-alt:        #F5F7FA;   /* section alt background */
  --wc-bg-navy:       var(--wc-navy);
  --wc-white:         #FFFFFF;

  /* -------- SEMANTIC -------- */
  --wc-fg:            var(--wc-ink);
  --wc-fg-muted:      var(--wc-ink-2);
  --wc-fg-subtle:     var(--wc-ink-3);
  --wc-fg-on-navy:    #FFFFFF;
  --wc-fg-on-navy-muted: #B9C4D5;

  --wc-accent:        var(--wc-yellow);
  --wc-accent-ink:    var(--wc-navy);   /* text to put ON yellow */

  --wc-link:          var(--wc-navy);
  --wc-link-hover:    var(--wc-yellow-600);

  --wc-success:       #2F7D4F;
  --wc-warning:       #C88A10;
  --wc-danger:        #B03A2E;

  /* -------- TYPOGRAPHY -------- */
  /* Official Wingens brand fonts:
     — Barlow  (display & UI): uppercase headlines, nav, buttons, eyebrows.
                Use 700/800 for hero, 600 for H2/eyebrow, 500 for UI.
     — Josefin Sans (body):    geometric humanist, slight art-deco tone;
                Use 400 for body, 500/600 for labels. */
  --wc-font-display:  "Barlow", "Helvetica Neue", Arial, sans-serif;
  --wc-font-sans:     "Josefin Sans", "Helvetica Neue", Arial, sans-serif;
  --wc-font-mono:     "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Fluid type scale */
  --wc-fs-hero:       clamp(48px, 6vw, 84px);    /* H1 — hero */
  --wc-fs-h1:         clamp(36px, 4vw, 56px);
  --wc-fs-h2:         clamp(28px, 3vw, 40px);
  --wc-fs-h3:         22px;
  --wc-fs-eyebrow:    14px;                      /* UPPERCASE eyebrow */
  --wc-fs-body:       17px;
  --wc-fs-small:      14px;
  --wc-fs-caption:    12px;

  --wc-lh-tight:      1.05;
  --wc-lh-snug:       1.2;
  --wc-lh-body:       1.55;

  --wc-tr-wide:       0.12em;    /* eyebrow, uppercase nav */
  --wc-tr-tight:      -0.01em;   /* display headlines */
  --wc-tr-normal:     0;

  /* -------- SPACING / RADIUS / SHADOW -------- */
  --wc-space-1: 4px;
  --wc-space-2: 8px;
  --wc-space-3: 12px;
  --wc-space-4: 16px;
  --wc-space-5: 24px;
  --wc-space-6: 32px;
  --wc-space-7: 48px;
  --wc-space-8: 64px;
  --wc-space-9: 96px;

  --wc-radius-sm:  2px;
  --wc-radius-md:  4px;    /* buttons, cards — Wingens style is nearly square */
  --wc-radius-lg:  8px;
  --wc-radius-pill: 999px;

  --wc-shadow-sm:  0 1px 2px rgba(2, 37, 79, 0.06), 0 1px 1px rgba(2, 37, 79, 0.04);
  --wc-shadow-md:  0 4px 12px rgba(2, 37, 79, 0.08), 0 2px 4px rgba(2, 37, 79, 0.05);
  --wc-shadow-lg:  0 16px 40px rgba(2, 37, 79, 0.12), 0 4px 10px rgba(2, 37, 79, 0.06);
  --wc-shadow-inset: inset 0 0 0 1px rgba(2, 37, 79, 0.08);

  /* -------- MOTION -------- */
  --wc-ease:     cubic-bezier(0.2, 0.6, 0.2, 1);
  --wc-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --wc-dur-fast: 120ms;
  --wc-dur:      220ms;
  --wc-dur-slow: 420ms;

  /* -------- LAYOUT -------- */
  --wc-container: 1200px;
  --wc-container-narrow: 840px;
  --wc-gutter: 24px;
}

/* =========================================================
   BASE SEMANTIC TYPE
   ========================================================= */

html { color: var(--wc-fg); background: var(--wc-bg); }
body {
  font-family: var(--wc-font-sans);
  font-size: var(--wc-fs-body);
  line-height: var(--wc-lh-body);
  color: var(--wc-fg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wc-hero, h1.wc-hero {
  font-family: var(--wc-font-display);
  font-weight: 700;
  font-size: var(--wc-fs-hero);
  line-height: var(--wc-lh-tight);
  letter-spacing: var(--wc-tr-tight);
  color: var(--wc-navy);
  text-transform: uppercase;
  text-wrap: balance;
}

h1, .wc-h1 {
  font-family: var(--wc-font-display);
  font-weight: 700;
  font-size: var(--wc-fs-h1);
  line-height: var(--wc-lh-tight);
  letter-spacing: var(--wc-tr-tight);
  color: var(--wc-navy);
  text-transform: uppercase;
}

h2, .wc-h2 {
  font-family: var(--wc-font-display);
  font-weight: 600;
  font-size: var(--wc-fs-h2);
  line-height: var(--wc-lh-snug);
  letter-spacing: 0.01em;
  color: var(--wc-navy);
  text-transform: uppercase;
}

h3, .wc-h3 {
  font-family: var(--wc-font-display);
  font-weight: 500;
  font-size: var(--wc-fs-h3);
  line-height: var(--wc-lh-snug);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--wc-navy);
}

.wc-eyebrow {
  font-family: var(--wc-font-display);
  font-weight: 600;
  font-size: var(--wc-fs-eyebrow);
  letter-spacing: var(--wc-tr-wide);
  text-transform: uppercase;
  color: var(--wc-navy);
}

.wc-eyebrow--accent::before {
  content: "";
  display: inline-block;
  width: 24px; height: 2px;
  background: var(--wc-yellow);
  margin-right: 12px;
  vertical-align: middle;
}

p, .wc-p {
  font-size: var(--wc-fs-body);
  line-height: var(--wc-lh-body);
  color: var(--wc-fg);
  text-wrap: pretty;
}

.wc-lead {
  font-size: 20px;
  line-height: 1.5;
  color: var(--wc-fg-muted);
}

small, .wc-small { font-size: var(--wc-fs-small); color: var(--wc-fg-muted); }
.wc-caption { font-size: var(--wc-fs-caption); color: var(--wc-fg-subtle); letter-spacing: 0.04em; text-transform: uppercase; }

code, pre, .wc-mono { font-family: var(--wc-font-mono); }

a {
  color: var(--wc-link);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--wc-yellow) 80%, transparent);
  transition: color var(--wc-dur) var(--wc-ease), text-decoration-color var(--wc-dur) var(--wc-ease);
}
a:hover { color: var(--wc-link-hover); text-decoration-color: currentColor; }

/* =========================================================
   ATOMS — BUTTONS, CHIPS, CARDS
   ========================================================= */

.wc-btn {
  --_fg: var(--wc-white);
  --_bg: var(--wc-navy);
  --_bd: var(--wc-navy);
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--wc-font-sans);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 22px;
  color: var(--_fg);
  background: var(--_bg);
  border: 1px solid var(--_bd);
  border-radius: var(--wc-radius-md);
  cursor: pointer;
  transition: background var(--wc-dur) var(--wc-ease), transform var(--wc-dur-fast) var(--wc-ease);
}
.wc-btn:hover { background: var(--wc-navy-700); border-color: var(--wc-navy-700); }
.wc-btn:active { transform: translateY(1px); }

.wc-btn--accent {
  --_fg: var(--wc-navy);
  --_bg: var(--wc-yellow);
  --_bd: var(--wc-yellow);
}
.wc-btn--accent:hover { background: var(--wc-yellow-600); border-color: var(--wc-yellow-600); }

.wc-btn--outline {
  --_fg: var(--wc-navy);
  --_bg: transparent;
  --_bd: var(--wc-navy);
}
.wc-btn--outline:hover { background: var(--wc-navy); color: var(--wc-white); }

.wc-btn--ghost {
  --_fg: var(--wc-navy);
  --_bg: transparent;
  --_bd: transparent;
  padding-left: 6px; padding-right: 6px;
}
.wc-btn--ghost:hover { color: var(--wc-yellow-600); background: transparent; }

.wc-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 6px 10px;
  background: var(--wc-navy-100);
  color: var(--wc-navy);
  border-radius: var(--wc-radius-sm);
}

.wc-card {
  background: var(--wc-bg);
  border: 1px solid var(--wc-line);
  border-radius: var(--wc-radius-md);
  box-shadow: var(--wc-shadow-sm);
  padding: var(--wc-space-5);
}

.wc-divider {
  width: 56px; height: 3px;
  background: var(--wc-yellow);
  border: 0;
  margin: 20px 0;
}

.wc-bg-navy { background: var(--wc-navy); color: var(--wc-fg-on-navy); }
.wc-bg-alt  { background: var(--wc-bg-alt); }