@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;600;700;900&family=Raleway:wght@300;400;500;600;700&display=swap');

/* HYC-specific presentation layer. The reusable club workflow stays in app.js. */
:root {
  --navy: #181b3e;
  --navy-2: #252957;
  --cream: #f3f5f8;
  --paper: #ffffff;
  --line: #dce2eb;
  --ink: #1f2d3a;
  --muted: #5d687b;
  --sea: #bd1e2e;
  --sea-soft: #fce9eb;
  --gold: #e4242b;
  --coral: #e4242b;
  --shadow: 0 7px 25px rgba(24,27,62,.055);
}

body { font-family: Lato, system-ui, sans-serif; }
.demo-bar { background: #fbe9eb; color: #63303a; border-bottom: 1px solid #f1c7cc; }
.demo-dot { background: #e4242b; }
.sidebar { background: #181b3e; color: #e8ebf5; }
.brand { min-height: 92px; border-bottom: 1px solid #343959; gap: 13px; }
.brand-burgee { width: 72px; height: 54px; object-fit: contain; flex: none; }
.brand strong { font-family: Raleway, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.25; letter-spacing: .025em; }
.brand small { color: #b7c0d5; font-size: 10px; }
.space-switch { background: #22264e; border-color: #3c4167; }
.space-avatar { background: #e4242b; color: white; font-family: Raleway, sans-serif; font-weight: 700; }
.space-switch small, .sidebar-foot p, .nav-label { color: #adb7d1; }
.sidebar-foot { border-top-color: #3c4167; }
.sidebar-foot strong { color: #f2f3fa; }
nav button { color: #e1e5f2; }
nav button:hover { background: #30365f; }
nav button.active { background: #c51f2d; color: #fff; }
nav .nav-phase { color: #f5d6d8; border-color: #a86068; }
nav button.active .nav-phase { border-color: #fff9; color: white; }
.topbar { border-bottom: 2px solid #e4242b; }
.preview-pill { background: #fff1f2; color: #a7192a; border-color: #f0c7cc; }
.account-avatar { background: #e8eaf5; color: #232857; }
.page h1, .section-row h2, .hero h2, .public-hero h2, .roadmap-card b { font-family: Raleway, sans-serif; }
.page h1 { font-size: 34px; font-weight: 400; letter-spacing: .015em; }
.section-row h2 { font-weight: 500; letter-spacing: .01em; }
.eyebrow { color: #b71f2d; }
.button { border-radius: 3px; }
.button:hover { background: #991725; }
.button.dark { background: #181b3e; }
.button.dark:hover { background: #30365f; }
.button.outline { border-color: #e6b8bf; }
.button.outline:hover { background: #fff1f2; }
.card, .roadmap-card { border-radius: 5px; }
.feature-card .iconbox { background: #fce9eb; }
.hero, .public-hero {
  background-image: linear-gradient(90deg, rgba(17,20,48,.9) 0%, rgba(17,20,48,.58) 55%, rgba(17,20,48,.28) 100%), url('sailing-sunset.jpg');
  background-size: cover;
  background-position: center 57%;
  border-radius: 5px;
}
.hero:before, .hero:after, .public-hero:before { display: none; }
.hero { min-height: 270px; }
.hero .eyebrow, .public-hero .eyebrow { color: #fff; letter-spacing: .2em; }
.hero h2 { font-size: 30px; font-weight: 400; letter-spacing: .045em; }
.hero p, .public-hero p { color: #f0f2f9; }
.hero .button { background: #e4242b; color: #fff; }
.hero .button:hover { background: #bc1d29; }
.hero-stat { border-color: #ffffff88; background: #181b3e99; }
.hero-stat b { font-family: Raleway, sans-serif; }
.public-hero { min-height: 345px; display: flex; align-items: center; }
.public-hero .copy { max-width: 670px; }
.public-hero h2 { text-transform: uppercase; font-size: clamp(30px, 4vw, 56px); font-weight: 300; letter-spacing: .11em; line-height: 1.12; }
.public-hero p { max-width: 550px; }
.public-links button { border-radius: 2px; border-color: #fff9; }
.public-links button:hover { background: #e4242b; border-color: #e4242b; }
.toast { background: #181b3e; }

@media (max-width: 760px) {
  .brand { min-height: 88px; }
  .hero { min-height: 250px; }
  .hero h2 { font-size: 25px; }
  .public-hero { min-height: 300px; }
  .mobile-backdrop { background: #181b3eaa; }
}