/* Softball Game Plan shared visual system: website, demo, app, and public profiles. */
:root {
  color-scheme: light;
  --sgp-navy: #0b1d36;
  --sgp-navy-2: #18304f;
  --sgp-ink: #0b1d36;
  --sgp-muted: #61708d;
  --sgp-line: #dfe5ec;
  --sgp-bg: #f7f8fb;
  --sgp-surface: #ffffff;
  --sgp-coral: #f06449;
  --sgp-coral-action: #cc4632;
  --sgp-coral-hover: #b93828;
  --sgp-yellow: #f5d547;
  --sgp-green: #286b5d;
  --sgp-green-soft: #e5f5f0;
  --sgp-blue-soft: #eef2f8;
  --sgp-radius-control: 12px;
  --sgp-radius-card: 20px;
  --sgp-shadow-card: 0 8px 26px rgba(11, 29, 54, .05);
  --sgp-text-xs: .75rem;
  --sgp-text-sm: .875rem;
  --sgp-text-base: 1rem;
  --sgp-text-lg: 1.125rem;
  --sgp-text-xl: 1.25rem;
  --sgp-text-2xl: 1.5rem;
  --sgp-text-3xl: 2rem;

  /* Existing component aliases all resolve to the same brand tokens. */
  --fc-navy: var(--sgp-navy);
  --fc-blue: var(--sgp-navy-2);
  --fc-coral: var(--sgp-coral);
  --fc-yellow: var(--sgp-yellow);
  --fc-green: var(--sgp-green);
  --fc-bg: var(--sgp-bg);
  --fc-line: var(--sgp-line);
  --fc-muted: var(--sgp-muted);
  --ri-navy: var(--sgp-navy);
  --ri-navy-2: var(--sgp-navy-2);
  --ri-ink: var(--sgp-ink);
  --ri-muted: var(--sgp-muted);
  --ri-line: var(--sgp-line);
  --ri-bg: var(--sgp-bg);
  --ri-coral: var(--sgp-coral);
  --ri-green: var(--sgp-green);
  --ri-green-soft: var(--sgp-green-soft);
  --ri-blue-soft: var(--sgp-blue-soft);
  --pp-navy: var(--sgp-navy);
  --pp-navy-2: var(--sgp-navy-2);
  --pp-ink: var(--sgp-ink);
  --pp-muted: var(--sgp-muted);
  --pp-line: var(--sgp-line);
  --pp-bg: var(--sgp-bg);
  --pp-coral: var(--sgp-coral);
  --pp-green: var(--sgp-green);
  --pp-green-soft: var(--sgp-green-soft);
  --pp-blue-soft: var(--sgp-blue-soft);
  --fs-navy: var(--sgp-navy);
  --fs-navy-2: var(--sgp-navy-2);
  --fs-ink: var(--sgp-ink);
  --fs-muted: var(--sgp-muted);
  --fs-line: var(--sgp-line);
  --fs-bg: var(--sgp-bg);
  --fs-coral: var(--sgp-coral);
  --fs-yellow: var(--sgp-yellow);
  --fs-green: var(--sgp-green);
}

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

body,
.responsive-page,
.signup-flow,
.fc-shell,
.ri-shell,
.pp-shell {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--sgp-ink);
  font-size: var(--sgp-text-base);
  line-height: 1.5;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.fc-shell,
.ri-shell,
.pp-shell {
  background: var(--sgp-bg);
}

.responsive-page h1,
.responsive-page h2,
.responsive-page h3,
.signup-flow h1,
.signup-flow h2,
.signup-flow h3,
.fc-shell h1,
.fc-shell h2,
.fc-shell h3,
.ri-shell h1,
.ri-shell h2,
.ri-shell h3,
.pp-shell h1,
.pp-shell h2,
.pp-shell h3,
.fs-hero h1,
.fs-section h2,
.fs-card h3 {
  font-family: inherit;
  font-weight: 900;
  text-wrap: balance;
}

.fc-hero h1,
.ri-hero h1 {
  font-size: clamp(2.25rem, 4.25vw, 3.5rem);
  line-height: 1.02;
  letter-spacing: -.045em;
}

.fc-heading h1 {
  font-size: clamp(2rem, 3.25vw, 2.75rem);
  line-height: 1.08;
  letter-spacing: -.04em;
}

.pp-hero h1 {
  font-size: clamp(2.5rem, 6vw, 4rem);
  line-height: 1;
  letter-spacing: -.05em;
}

.fc-card h2,
.ri-card h2,
.pp-card h2 {
  font-size: var(--sgp-text-xl);
  line-height: 1.25;
  letter-spacing: -.02em;
}

.fc-card h3,
.ri-card h3,
.pp-card h3 {
  font-size: var(--sgp-text-base);
  line-height: 1.35;
  letter-spacing: -.01em;
}

.fc-card,
.ri-card,
.pp-card,
.fs-card {
  border-color: var(--sgp-line);
  border-radius: var(--sgp-radius-card);
  box-shadow: var(--sgp-shadow-card);
}

.fc-card,
.ri-card,
.pp-card {
  padding: 22px;
}

.fc-card p,
.ri-card p,
.pp-copy,
.pp-subtitle,
.fs-card ul {
  color: var(--sgp-muted);
  font-size: var(--sgp-text-base);
  line-height: 1.65;
}

.fc-eyebrow,
.ri-eyebrow,
.pp-kicker,
.fs-eyebrow {
  font-size: var(--sgp-text-xs);
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: .12em;
}

.fc-field,
.ri-field label,
.ri-field > span {
  color: #45556d;
  font-size: var(--sgp-text-sm);
  font-weight: 800;
  line-height: 1.4;
}

input[class],
select[class],
textarea[class],
.fc-input,
.fc-select,
.fc-textarea,
.ri-input,
.ri-select,
.ri-textarea {
  color: var(--sgp-ink);
  font-family: inherit;
  font-size: var(--sgp-text-base);
  line-height: 1.4;
}

.fc-input,
.fc-select,
.ri-input,
.ri-select {
  min-height: 46px;
}

.fc-input,
.fc-select,
.fc-textarea,
.ri-input,
.ri-select,
.ri-textarea {
  border-color: #cfd9e3;
  border-radius: var(--sgp-radius-control);
}

.fc-field-help,
.ri-field .ri-field-help,
.pp-source-note {
  color: var(--sgp-muted);
  font-size: var(--sgp-text-xs);
  line-height: 1.5;
}

.fc-button,
.fc-link,
.ri-button,
.ri-link-button,
.pp-button,
.fs-button {
  min-height: 44px;
  border-radius: var(--sgp-radius-control);
  font-size: var(--sgp-text-sm);
  font-weight: 900;
  line-height: 1.25;
}

.fc-button,
.ri-button,
.pp-button,
.fs-button.coral {
  background: var(--sgp-coral-action);
  color: #fff;
}

.fc-button:hover,
.ri-button:hover,
.pp-button:hover,
.fs-button.coral:hover {
  background: var(--sgp-coral-hover);
}

.bg-\[\#f06449\] {
  background-color: var(--sgp-coral-action);
}

.hover\:bg-\[\#d95039\]:hover {
  background-color: var(--sgp-coral-hover);
}

.fc-stat strong,
.ri-stat strong {
  font-size: var(--sgp-text-2xl);
  line-height: 1.15;
}

.fc-stat span,
.ri-stat span {
  color: var(--sgp-muted);
  font-size: var(--sgp-text-xs);
  line-height: 1.4;
}

.pp-stat span {
  color: #b5c5d4;
  font-size: var(--sgp-text-xs);
  line-height: 1.4;
}

.fc-table th,
.ri-table th {
  color: #45556d;
  font-size: var(--sgp-text-xs);
}

.fc-table td,
.ri-table td {
  color: var(--sgp-ink);
  font-size: var(--sgp-text-sm);
  line-height: 1.5;
}

.fc-nav button,
.ri-nav button,
.fc-mobile-select select,
.ri-mobile-nav select {
  font-size: var(--sgp-text-sm);
  font-weight: 800;
}

.fc-button:focus-visible,
.fc-link:focus-visible,
.ri-button:focus-visible,
.ri-link-button:focus-visible,
.pp-button:focus-visible,
.fs-button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(240, 100, 73, .34);
  outline-offset: 3px;
}

@media (max-width: 700px) {
  .fc-card,
  .ri-card,
  .pp-card,
  .fs-card {
    padding: 18px;
  }

  .fc-hero h1,
  .ri-hero h1 {
    font-size: clamp(2.1rem, 10vw, 3rem);
  }

  .pp-hero h1 {
    font-size: clamp(2.25rem, 12vw, 3.25rem);
  }

  input[class],
  select[class],
  textarea[class] {
    font-size: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}