/* Skip Barber Sim Racing — prototype brand styles
   Light theme matched to skipbarber.com: white surfaces, #EC2028 racing red,
   Raleway display type. Layered on top of Tailwind CDN. */

:root {
  --sb-red: #EC2028;
  --sb-reddark: #C00D17;
  --sb-ink: #FFFFFF;
  --sb-panel2: #F3F4F6;
  --sb-line: #E2E4E9;
  --sb-text: #16181D;
  --sb-muted: #646A75;
  --sb-dark: #111317;
}

html { scroll-behavior: smooth; }
body { letter-spacing: -0.005em; background: var(--sb-ink); }

::selection { background: rgba(236, 32, 40, 0.22); }

/* Brand wordmark — real Skip Barber logo PNG */
.sb-mark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.sb-mark img { height: 30px; width: auto; display: block; }

/* Nav link states (light nav) */
.sb-navlink {
  position: relative;
  padding: 6px 2px;
  color: var(--sb-muted);
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  transition: color .15s ease;
  white-space: nowrap;
}
.sb-navlink:hover { color: var(--sb-text); }
.sb-navlink.active { color: var(--sb-text); }
.sb-navlink.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -14px; height: 3px;
  background: var(--sb-red);
  border-radius: 2px;
}

/* Cards — white surface, hairline border, soft shadow */
.sb-card {
  background: #FFFFFF;
  border: 1px solid var(--sb-line);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(16, 18, 23, 0.04), 0 6px 18px rgba(16, 18, 23, 0.04);
}
.sb-card-hover { transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.sb-card-hover:hover { border-color: rgba(236,32,40,0.55); transform: translateY(-2px); box-shadow: 0 14px 34px rgba(16,18,23,0.12); }

/* Selectable tiles */
.sb-tile {
  border: 1px solid var(--sb-line);
  border-radius: 14px;
  background: #FFFFFF;
  transition: all .15s ease;
  cursor: pointer;
}
.sb-tile:hover { border-color: rgba(236,32,40,0.5); }
.sb-tile.selected {
  border-color: var(--sb-red);
  background: linear-gradient(180deg, rgba(236,32,40,0.06), rgba(236,32,40,0.01));
  box-shadow: 0 0 0 1px rgba(236,32,40,0.5) inset;
}

/* Buttons */
.sb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 11px; font-weight: 700; font-size: 14px;
  letter-spacing: 0.01em;
  padding: 11px 18px; cursor: pointer;
  transition: all .15s ease; border: 1px solid transparent;
}
.sb-btn-primary { background: var(--sb-red); color: #fff; }
.sb-btn-primary:hover { background: var(--sb-reddark); box-shadow: 0 8px 22px rgba(236,32,40,0.30); }
.sb-btn-ghost { background: #FFFFFF; color: var(--sb-text); border-color: var(--sb-line); }
.sb-btn-ghost:hover { border-color: #C9CDD4; background: var(--sb-panel2); }

/* Chips / pills */
.sb-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--sb-line); color: var(--sb-muted);
  background: #FFFFFF;
}
.sb-chip-go { color: #15824A; border-color: rgba(30,158,87,0.35); background: rgba(30,158,87,0.08); }
.sb-chip-red { color: var(--sb-red); border-color: rgba(236,32,40,0.40); background: rgba(236,32,40,0.07); }

/* Inputs */
.sb-input, .sb-select {
  width: 100%;
  background: #FFFFFF;
  border: 1px solid var(--sb-line);
  border-radius: 11px;
  color: var(--sb-text);
  padding: 11px 13px;
  font-size: 14px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.sb-input::placeholder { color: #9AA0AA; }
.sb-input:focus, .sb-select:focus { border-color: rgba(236,32,40,0.6); box-shadow: 0 0 0 3px rgba(236,32,40,0.10); }
.sb-label { font-size: 12px; font-weight: 700; color: var(--sb-muted); text-transform: uppercase; letter-spacing: 0.05em; }

/* Range slider */
input[type="range"].sb-range { -webkit-appearance: none; appearance: none; height: 6px; border-radius: 999px; background: #DDE0E6; outline: none; }
input[type="range"].sb-range::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--sb-red); cursor: pointer; box-shadow: 0 2px 8px rgba(236,32,40,0.45); }

/* Bars for analytics */
.sb-bar { border-radius: 4px 4px 0 0; }

/* fade-in for view changes */
.sb-fade { animation: sbfade .25s ease; }
@keyframes sbfade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* divider */
.sb-divider { height: 1px; background: var(--sb-line); }

/* phone frame for trailer — dark device on light page */
.sb-phone {
  width: 290px; border-radius: 30px; border: 1px solid #2A2D34;
  background: var(--sb-dark); padding: 14px; box-shadow: 0 24px 55px rgba(16,18,23,0.28);
}

/* checkered-flag accent strip (Skip Barber motif) */
.sb-checkers {
  background-image:
    linear-gradient(45deg, var(--sb-text) 25%, transparent 25%, transparent 75%, var(--sb-text) 75%),
    linear-gradient(45deg, var(--sb-text) 25%, transparent 25%, transparent 75%, var(--sb-text) 75%);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
}