/* Website UI kit — page-level shell + a tiny utility layer.
   Token references all come from colors_and_type.css. */

@import url("colors_and_type.css");

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

body {
  background: var(--surface-canvas);
  color: var(--fg-2);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* Page container width */
.container { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 720px) { .container { padding: 0 20px; } }

/* Eyebrow label — used everywhere */
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lcc-teal);
}
.eyebrow::before {
  content: ""; display: block; width: 32px; height: 1px; background: var(--lcc-teal);
}
.eyebrow.center::after {
  content: ""; display: block; width: 32px; height: 1px; background: var(--lcc-teal);
}
.eyebrow.on-dark { color: var(--lcc-teal-300); }
.eyebrow.on-dark::before, .eyebrow.on-dark::after { background: var(--lcc-teal-300); }

/* Section spacing */
section {
  padding: 96px 0;
}
@media (max-width: 720px) { section { padding: 64px 0; } }

/* Display heading */
.display {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--lcc-navy);
  letter-spacing: -0.015em;
  line-height: 1.05;
  margin: 0;
  text-wrap: balance;
}

/* Lede */
.lede { font-size: 17px; color: var(--fg-3); line-height: 1.6; max-width: 540px; }

/* Magenta brush underline used inside headings */
.brush {
  position: relative;
  color: var(--lcc-magenta);
  font-style: italic;
  white-space: nowrap;
  z-index: 0;
}
.brush::after {
  content: ""; position: absolute; left: -2px; right: -2px; bottom: 8%; height: 0.22em;
  background: var(--lcc-magenta);
  opacity: 0.14;
  border-radius: 6px;
  transform: skewX(-4deg);
  z-index: -1;
}

/* Buttons */
.btn {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
  cursor: pointer;
  border: 0;
  padding: 13px 24px;
  border-radius: 10px;
  transition: all 220ms cubic-bezier(0.2, 0.7, 0.1, 1);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.btn.primary { background: var(--lcc-navy); color: var(--surface-canvas); box-shadow: var(--shadow-2); }
.btn.primary:hover { background: var(--lcc-navy-700); transform: translateY(-1px); box-shadow: var(--shadow-3); }
.btn.secondary { background: transparent; color: var(--lcc-teal); border: 1.5px solid var(--lcc-teal); }
.btn.secondary:hover { background: var(--lcc-teal-100); }
.btn.secondary.on-dark { color: white; border-color: rgba(255,255,255,0.3); }
.btn.secondary.on-dark:hover { background: rgba(255,255,255,0.08); border-color: var(--lcc-teal-300); color: var(--lcc-teal-300); }
.btn.accent { background: var(--lcc-magenta); color: white; box-shadow: var(--shadow-glow-magenta); }
.btn.accent:hover { transform: translateY(-1px); }
.btn.tertiary {
  background: transparent;
  color: var(--lcc-teal);
  padding: 13px 0;
  font-weight: 600;
}
.btn.tertiary:hover { color: var(--lcc-navy); }
.btn.tertiary svg { transition: transform 200ms; }
.btn.tertiary:hover svg { transform: translateX(4px); }

/* Status pill */
.pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.pill .dot {
  width: 7px; height: 7px; border-radius: 999px; background: currentColor;
  animation: pulse 1.6s infinite;
}
.pill.next { background: var(--lcc-magenta-100); color: #8C1F2F; }
.pill.live { background: #DDEFE5; color: #1F5E3F; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

/* Page-wide background washes (subtle, atmospheric) */
.bg-wash {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0;
}
.bg-wash::before, .bg-wash::after {
  content: ""; position: absolute; width: 720px; height: 720px; border-radius: 50%; filter: blur(80px);
}
.bg-wash::before {
  top: -300px; right: -200px;
  background: radial-gradient(circle, rgba(45,169,161,0.20) 0%, transparent 70%);
}
.bg-wash::after {
  bottom: -300px; left: -200px;
  background: radial-gradient(circle, rgba(224,55,106,0.16) 0%, transparent 70%);
}

/* Section variants */
.section-tint { background: var(--surface-tint); }
.section-ink {
  background: var(--lcc-navy); color: var(--fg-on-dark);
  position: relative; overflow: hidden;
}
.section-ink .display { color: white; }
.section-ink .lede { color: rgba(255,255,255,0.7); }

/* Card */
.card {
  background: var(--surface-card);
  border-radius: 18px;
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-2), inset 0 1px 0 rgba(255,255,255,0.7);
  transition: transform 220ms cubic-bezier(0.2,0.7,0.1,1), box-shadow 220ms;
}
.card.hoverable:hover { transform: translateY(-4px); box-shadow: var(--shadow-3), inset 0 1px 0 rgba(255,255,255,0.7); }

/* Icon chip */
.icon-chip {
  width: 52px; height: 52px; border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--lcc-teal-100);
  color: var(--lcc-teal);
}
.icon-chip.magenta { background: var(--lcc-magenta-100); color: var(--lcc-magenta); }
.icon-chip.purple  { background: var(--lcc-purple-100); color: var(--lcc-purple); }
.icon-chip.navy    { background: rgba(14,35,71,0.07); color: var(--lcc-navy); }