/* LegDay — shared styles, tokens from the Claude Design prototype */

:root {
  --ink: #201e1d;
  --accent: #0088b0;
  --accent-dark: #00657f;
  --accent-grad: linear-gradient(140deg, #00a3d1, #0088b0);
  --accent-grad-hover: linear-gradient(140deg, #0095c0, #00738f);
  --chip-bg: #e2f2f8;
  --muted-58: rgba(32, 30, 29, .58);
  --muted-55: rgba(32, 30, 29, .55);
  --muted-50: rgba(32, 30, 29, .5);
  --muted-45: rgba(32, 30, 29, .45);
  --muted-42: rgba(32, 30, 29, .42);
  --hairline: rgba(32, 30, 29, .08);
  --card-border: rgba(32, 30, 29, .09);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: #fff;
  font-family: 'Source Serif 4', Georgia, serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-dark); }

img { display: block; max-width: 100%; }

@keyframes riseIn { from { transform: translateY(14px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* — layout — */
.container { max-width: 1040px; margin: 0 auto; padding: 0 28px; }

/* — sticky site nav — */
.site-nav {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255, 255, 255, .86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(32, 30, 29, .07);
}
.site-nav .nav-inner {
  max-width: 1040px; margin: 0 auto; padding: 14px 28px;
  display: flex; align-items: center; gap: 28px;
}
.site-nav .brand {
  font-size: 19px; font-weight: 600; letter-spacing: -.01em;
  color: var(--ink); cursor: pointer;
}
.site-nav .nav-links {
  display: flex; gap: 24px; margin-left: auto; font-size: 15px;
}
.site-nav .nav-links a { color: rgba(32, 30, 29, .62); }
.site-nav .nav-links a:hover { color: var(--ink); }
.site-nav .nav-links a.active { color: var(--accent); }

/* — CTA pills — */
.cta {
  display: inline-block; cursor: pointer; border: 0;
  font-family: inherit; font-size: 15px; padding: 8px 18px;
  border-radius: 999px; color: #fff; background: var(--accent-grad);
}
.cta:hover { background: var(--accent-grad-hover); color: #fff; }
.cta-lg { font-size: 17px; padding: 13px 32px; }
.cta-md { font-size: 16px; padding: 12px 28px; }

/* — small tag chip — */
.chip {
  font-size: 12px; padding: 4px 10px; border-radius: 999px;
  background: var(--chip-bg); color: var(--accent-dark);
}

/* — footer — */
.site-footer {
  font-size: 13px; color: rgba(32, 30, 29, .35);
  text-align: center; padding: 28px 0 0;
}