/* CourtHeat — court brand (black / #FF6B00 / #F5F5F5). Load after shared-styles.css */

:root {
  --color-primary: #0a0a0a;
  --color-accent: #ff6b00;
  --color-accent-hover: #ff8533;
  --color-accent-soft: rgba(255, 107, 0, 0.22);
  --color-secondary: #f5f5f5;
  /* Hierarchy (social-style: not everything pure white) */
  --color-secondary-muted: rgba(245, 245, 245, 0.72);
  --color-secondary-subtle: rgba(245, 245, 245, 0.48);

  /* Surfaces & chrome */
  --surface-elevated: rgba(22, 22, 22, 0.94);
  --surface-border: rgba(255, 255, 255, 0.08);
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.45), 0 8px 24px rgba(0, 0, 0, 0.28);
  --shadow-card-hover: 0 2px 4px rgba(0, 0, 0, 0.5), 0 12px 32px rgba(0, 0, 0, 0.35);

  /* Legacy names used across HTML/CSS */
  --accent-blue: #ff6b00;
  --accent-blue-2: #ff8533;
  --accent-pink: #ff8533;
  --accent-pink-2: #ff9a4d;

  --ice-border: rgba(255, 107, 0, 0.28);
  --ice-border-soft: rgba(255, 107, 0, 0.14);
  --ice-glow: rgba(255, 107, 0, 0.22);
  --ice-shadow: rgba(0, 0, 0, 0.45);
  --text-primary: #f5f5f5;
  --text-muted: rgba(245, 245, 245, 0.72);
  --text-subtle: rgba(245, 245, 245, 0.48);

  --font-card: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* WCAG 2.5.5 (AAA) / platform HIG friendly tap targets */
  --touch-target-min: 44px;
}

/*
 * Narrow viewports & touch: fixed background attachment is janky on many mobile
 * browsers (extra compositing, scroll hitch). !important wins over duplicated
 * per-page body { background-attachment: fixed } in HTML <style> blocks.
 */
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  body {
    background-attachment: scroll, scroll !important;
  }
}

/* --- Touch / mobile polish: min tap targets, discover search, vote CTAs --- */
a,
button {
  -webkit-tap-highlight-color: rgba(255, 107, 0, 0.18);
}

button.tab-btn,
button.mode-btn {
  min-height: var(--touch-target-min);
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
}

.vote-buttons button {
  min-height: var(--touch-target-min);
  box-sizing: border-box;
  touch-action: manipulation;
}

button.add-shoe-btn,
button.add-fit-btn {
  min-height: var(--touch-target-min);
  touch-action: manipulation;
}

button.load-more-btn {
  min-height: var(--touch-target-min);
  touch-action: manipulation;
}

@media (max-width: 768px), (hover: none) and (pointer: coarse) {
  .search-input,
  select.search-input,
  input[type="text"].search-input,
  button.search-btn {
    min-height: var(--touch-target-min);
  }

  /* Keep custom chevrons vertically centered when select grows */
  select.search-input {
    background-position:
      calc(100% - 1.25rem) 50%,
      calc(100% - 0.95rem) 50%;
  }
}