/* CustomerHub Cinematic bridge for static event pages.
 * Token values come from ch-static-tokens.css (generated from the design system).
 * Loaded after each page's own styles so it overrides legacy values. */
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap");
@import url("/events/ch-static-tokens.css");

html, body { background: hsl(var(--background)); }
body { font-family: var(--app-font-sans); color: hsl(var(--foreground)); -webkit-font-smoothing: antialiased; }
input, textarea, button, label, .btn-primary, .btn-outline, .btn-small, .not-you-btn { font-family: var(--app-font-sans); }
h1, h2, h3, .page-title, .event-title, .form-heading, .confirm-heading, .section-heading, .event-date-badge .day {
  font-family: var(--app-font-serif); letter-spacing: -0.03em; color: hsl(var(--foreground));
}
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 3px; }

/* Header / nav / footer: deep-ink surfaces */
.site-header, .nav, .site-footer.dark-footer {
  background: hsl(var(--background)); color: hsl(var(--foreground));
  border-bottom: 1px solid hsl(var(--border));
}
.site-footer { background: hsl(var(--background)); border-top: 1px solid hsl(var(--border)); }
.site-footer-copy, .site-footer-links a { color: hsl(var(--muted-foreground)); }
.site-footer-links a { transition: color .2s; }
.site-footer-links a:hover { color: hsl(var(--foreground)); }

/* Eyebrows and labels */
.eyebrow, .page-eyebrow {
  background: hsl(var(--primary) / .12); color: hsl(var(--primary));
  font-weight: 700; letter-spacing: .22em; padding: 5px 12px; border-radius: 999px; display: inline-flex;
}
.page-eyebrow { background: none; padding: 0; }
.section-label, .presenter-label, .form-note, .privacy-note, label .optional, .site-footer-copy, .not-you-btn { color: hsl(var(--muted-foreground)); }
.page-subtitle, .event-desc, .subhead, .body-text, .agenda-label, .form-subtext, .presenter-title, .confirm-body { color: hsl(var(--muted-foreground)); }
.presenter-name, label, .items-list li strong, .recording-note strong { color: hsl(var(--foreground)); }
.divider { border-top-color: hsl(var(--border)); }
.agenda-num, .event-cta { color: hsl(var(--primary)); }
.event-cta svg path { stroke: hsl(var(--primary)); }

/* Surfaces */
.presenter-card, .form-card, .event-card, .empty-state, .agenda-band {
  background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) + 4px);
  color: hsl(var(--card-foreground));
}
.agenda-band { background: hsl(var(--muted)); }
.agenda-item { border-color: hsl(var(--border)); }
.event-date-badge { background: hsl(var(--muted)); border-radius: var(--radius); }
.event-date-badge .month { color: hsl(var(--primary)); }
.event-date-badge .weekday { color: hsl(var(--muted-foreground)); }
.recording-note { background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); border-radius: var(--radius); }
.tag-live { background: hsl(var(--primary) / .14); color: hsl(var(--primary)); }
.tag-time { background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); }
.event-tag { letter-spacing: .12em; }

/* Event card hover */
.event-card { transition: transform .25s cubic-bezier(.2,.75,.25,1), border-color .2s, box-shadow .25s; }
.event-card:hover { transform: translateY(-3px); border-color: hsl(var(--primary) / .5); box-shadow: 0 18px 40px hsl(var(--foreground) / .08); }
.event-cta svg { transition: transform .2s; }
.event-card:hover .event-cta svg { transform: translateX(3px); }

/* Form controls */
input[type="email"], input[type="text"], textarea {
  background: hsl(var(--background)); color: hsl(var(--foreground)); border-color: hsl(var(--input)); border-radius: var(--radius);
}
input[type="email"]:focus, input[type="text"]:focus, textarea:focus { border-color: hsl(var(--ring)); box-shadow: 0 0 0 3px hsl(var(--ring) / .25); outline: none; }
input::placeholder, textarea::placeholder { color: hsl(var(--muted-foreground)); }
input.field-invalid { border-color: hsl(var(--destructive)); }
.form-error, .form-error a, .field-error-msg { color: hsl(var(--destructive)); }

/* Buttons: pill-shaped like the package Button */
.btn-primary, .btn-small {
  background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-radius: 999px;
  transition: transform .2s, opacity .2s, background .2s;
}
.btn-primary:hover:not(:disabled), .btn-small:hover:not(:disabled) { background: hsl(var(--primary)); opacity: .9; transform: translateY(-1px); }
.btn-outline {
  color: hsl(var(--foreground)); border-color: hsl(var(--border)); border-radius: 999px; background: transparent;
  transition: transform .2s, background .2s;
}
.btn-outline:hover { background: hsl(var(--muted)); transform: translateY(-1px); }
.items-list li::before { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
  .event-card:hover, .btn-primary:hover, .btn-small:hover, .btn-outline:hover { transform: none; }
}