/* OpenPlayPal design tokens. Every page reads colors, type and shape from here. */
@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700;12..96,800&family=Figtree:wght@400;500;600;700&display=swap");

:root {
  /* Brand palette */
  --opp-yellow: #DDF247;   /* pickleball: primary actions, selected chips, active nav */
  --opp-navy: #17324D;     /* brand, headlines, navigation, icons */
  --opp-green: #2F7D68;    /* open / available, location, positive states */
  --opp-cream: #F7F8F2;    /* page background */
  --opp-gray: #E7EBE8;     /* borders, unselected filters, dividers */
  --opp-text: #20272D;     /* body copy */

  /* Derived tints (kept close to the palette) */
  --opp-yellow-press: #CBE131;
  --opp-green-soft: #E3F1EC;
  --opp-warn: #A4520F;
  --opp-warn-soft: #FCEEDD;
  --opp-muted: #5E6A72;
  --opp-surface: #FFFFFF;
  --opp-gray-strong: #D5DBD7;

  /* Type */
  --font-display: "Bricolage Grotesque", "Figtree", system-ui, sans-serif;
  --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Shape and depth */
  --radius-card: 20px;
  --radius-control: 14px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(23, 50, 77, 0.05), 0 8px 24px rgba(23, 50, 77, 0.07);
  --shadow-float: 0 -1px 0 rgba(23, 50, 77, 0.06), 0 -8px 24px rgba(23, 50, 77, 0.06);
  --tap: 48px;
  --gutter: 16px;
  --focus: 0 0 0 3px var(--opp-surface), 0 0 0 5px var(--opp-navy);
}