/* ============================================================
   Will Jawando Transition — design tokens
   Derived from the Jawando campaign brand kit (navy / orange)
   ============================================================ */

:root {
  /* Palette — Jawando brand colors */
  --jw-purple:      #151949;   /* navy — primary */
  --jw-purple-dark: #0E1133;   /* deep navy — depth, footers */
  --jw-ink:         #0A0C1F;   /* near-black navy — "black" */
  --jw-lavender:    #E8EAF6;   /* soft navy tint — soft sections */
  --jw-orange:      #E08200;   /* orange-dark — warm accent */
  --jw-lime:        #FF9100;   /* orange — action/energy */
  --jw-egg:         #FAFAFC;   /* warm neutral — page background */
  --jw-white:       #FFFFFF;

  /* Type — headings = filson-pro (Adobe kit dvn7ucz); body = Poppins (Google) */
  --font-display: filson-pro, "Poppins", sans-serif;
  --font-body: "Poppins", sans-serif;

  /* Shape & motion */
  --radius: 4px;
  --shadow-card: 0 4px 14px rgba(10, 12, 31, 0.10);
  --shadow-pop:  0 10px 30px rgba(14, 17, 51, 0.22);
  --speed-snap: 140ms;
  --speed-move: 220ms;
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--jw-ink);
  background: var(--jw-egg);
  line-height: 1.55;
}

/* Display type: bold, uppercase — the Jawando headline voice */
.hed {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 0.94;
  letter-spacing: 0.01em;
  color: var(--jw-purple);
}


/* Buttons */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 18px;
  padding: 14px 34px;
  border: 2px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: transform var(--speed-snap) var(--ease-spring),
              box-shadow var(--speed-snap) ease,
              background-color var(--speed-snap) ease;
}
.btn:active { transform: scale(0.97); }
.btn:focus-visible { outline: 3px solid var(--jw-orange); outline-offset: 2px; }

.btn--primary { background: var(--jw-purple); color: var(--jw-white); }
.btn--primary:hover { background: var(--jw-purple-dark); box-shadow: var(--shadow-pop); }

.btn--lime { background: var(--jw-lime); color: var(--jw-ink); }
.btn--lime:hover { box-shadow: var(--shadow-pop); transform: translateY(-1px); }

.btn--ghost { background: transparent; color: var(--jw-purple); border-color: var(--jw-purple); }
.btn--ghost:hover { background: var(--jw-lavender); }

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