/* ============================================================================
   PH Sports Finder — Shared Design Tokens
   Generated from design-tokens.json. Do not edit by hand.
   ============================================================================ */

:root {
  /* ---- Color: Dark (default) ---- */
  --color-bg: #0e1116;
  --color-card: #151b24;
  --color-card-border: rgba(255, 255, 255, 0.07);
  --color-accent: #2dd4bf;
  --color-accent-secondary: #ffb800;
  --color-accent-ink: #04221d;
  --color-text: #e8edf3;
  --color-muted: #93a1b3;
  --color-free: #1f7a4d;
  --color-busy: #7a2f2f;
  --color-nav-bg: rgba(18, 28, 40, 0.85);
  --color-nav-border: rgba(255, 255, 255, 0.18);
  --color-nav-label: #94a3b8;
  --color-nav-label-active-text: #04221d;
  --color-badge-bg: #e11d48;
  --color-badge-text: #ffffff;
  --color-input-bg: #0a0e14;
  --color-chip-bg: #1a222b;
  --color-slot-free: #13402c;
  --color-slot-taken: #3a1c1c;
  --color-slot-text-taken: #ff8585;
  --color-danger-bg: #2a1518;
  --color-danger-border: rgba(239, 68, 68, 0.3);
  --color-danger-text: #ff8585;
  --color-shadow: #000000;
  --color-pending-bg: #4a3c12;
  --color-pending-text: #f5d97a;
  --color-confirmed-text: #022c22;
  --color-on-accent: #ffffff;
  --color-raised: #1a222b;
  --color-hairline: rgba(255, 255, 255, 0.07);
  --color-gold: #c9a227;
  --color-rating-star: #f59e0b;
  --color-status-pay: #059669;
  --color-status-pending-btn: #d97706;
  --color-status-cancel-btn: #b91c1c;
  --color-chat-bubble-own: rgba(4, 34, 29, 0.85);
  --color-scanner-bg: #0d1117;
  --color-thumb-tint: #15232d;
  --color-court-lines: #2dd4bf;
  --color-court-lines-opacity: 0.07;
  --color-mono-stat: #93a1b3;
  --color-stat-strip: #2fb8a4;
  --color-kicker: #2fb8a4;

  /* ---- Typography ---- */
  --font-family-sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-family-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --font-size-caption: 11px;
  --font-size-label: 12px;
  --font-size-body-sm: 13px;
  --font-size-body: 14px;
  --font-size-body-lg: 15px;
  --font-size-subheading: 17px;
  --font-size-heading: 20px;
  --font-size-display: 28px;
  --font-size-hero: 32px;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  --letter-spacing-display: -0.02em;
  --letter-spacing-heading: -0.01em;
  --letter-spacing-body: 0;
  --letter-spacing-caption: 0.08em;
  --letter-spacing-label: 0.08em;

  --line-height-display: 1.15;
  --line-height-heading: 1.25;
  --line-height-subheading: 1.35;
  --line-height-body: 1.55;
  --line-height-caption: 1.4;

  /* ---- Spacing ---- */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 20px;
  --spacing-xxl: 24px;
  --spacing-section: 32px;

  /* ---- Radius ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 999px;

  /* ---- Icon Sizes ---- */
  --icon-size-sm: 16px;
  --icon-size-md: 20px;
  --icon-size-lg: 24px;

  /* ---- Layout ---- */
  --max-width-page: 1100px;
  --max-width-content: 640px;
  --max-width-dashboard: 960px;

  /* ---- Motion ---- */
  --duration-fast: 90ms;
  --duration-normal: 200ms;
  --duration-slow: 450ms;
  --easing-default: cubic-bezier(0.16, 1, 0.3, 1);
  --easing-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --easing-exit: cubic-bezier(0.4, 0, 1, 1);
  --easing-linear: linear;
}

/* ---- Color: Light (opt-in via [data-theme="light"]) ---- */
[data-theme="light"] {
    --color-bg: #f6f7f9;
    --color-card: #ffffff;
    --color-card-border: #cbd5e1;
    --color-accent: #0b7d6f;
    --color-accent-secondary: #d97706;
    --color-accent-ink: #ffffff;
    --color-text: #0b1220;
    --color-muted: #5b6672;
    --color-free: #0c4a3c;
    --color-busy: #8b2521;
    --color-nav-bg: rgba(255, 255, 255, 0.82);
    --color-nav-border: rgba(15, 23, 42, 0.10);
    --color-nav-label: #1e293b;
    --color-nav-label-active-text: #ffffff;
    --color-badge-bg: #e11d48;
    --color-badge-text: #ffffff;
    --color-input-bg: #e8ecf1;
    --color-chip-bg: #e8ecf1;
    --color-slot-free: #0f9d6b;
    --color-slot-taken: #fecaca;
    --color-slot-text-taken: #a83227;
    --color-danger-bg: #fdecee;
    --color-danger-border: #f6c6cf;
    --color-danger-text: #d61f3c;
    --color-shadow: #1f2a3a;
    --color-pending-bg: #fef3c7;
    --color-pending-text: #92400e;
    --color-confirmed-text: #eafff5;
    --color-on-accent: #0d1321;
    --color-raised: #f0f3f7;
    --color-hairline: rgba(15, 23, 42, 0.08);
    --color-gold: #a3490a;
    --color-rating-star: #d97706;
    --color-status-pay: #059669;
    --color-status-pending-btn: #d97706;
    --color-status-cancel-btn: #b91c1c;
    --color-chat-bubble-own: #0e9c8a;
    --color-scanner-bg: #0d1117;
    --color-thumb-tint: #e2e8f0;
    --color-court-lines: #f6f7f9;
    --color-court-lines-opacity: 0.03;
    --color-mono-stat: #5b6672;
    --color-stat-strip: #0b7d6f;
    --color-kicker: #0b7d6f;
  }


/* ============================================================================
   Base Styles
   ============================================================================ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  min-height: 100vh;
}

/* ============================================================================
   Typography Scale
   ============================================================================ */

.mono {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-label);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
}

h1, .h1 {
  font-weight: var(--font-weight-extrabold);
  font-size: var(--font-size-hero);
  line-height: var(--line-height-display);
  letter-spacing: var(--letter-spacing-display);
}

h2, .h2 {
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-heading);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-heading);
}

h3, .h3 {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-subheading);
  line-height: var(--line-height-subheading);
}

label, .label, .badge {
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
}

.caption {
  font-size: var(--font-size-caption);
  line-height: var(--line-height-caption);
  letter-spacing: var(--letter-spacing-caption);
}

/* ============================================================================
   Utility Classes
   ============================================================================ */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.text-muted {
  color: var(--color-muted);
}

.text-accent {
  color: var(--color-accent);
}

.text-accent-secondary {
  color: var(--color-accent-secondary);
}

.bg-card {
  background-color: var(--color-card);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-lg);
}

/* ============================================================================
   Motion
   ============================================================================ */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.animate-hero {
  animation: fadeInUp var(--duration-slow) var(--easing-enter) forwards;
}

.animate-hero-sub {
  animation: fadeInUp var(--duration-slow) var(--easing-enter) 0.15s forwards;
  opacity: 0;
}

.animate-cta {
  animation: fadeInUp var(--duration-slow) var(--easing-enter) 0.3s forwards;
  opacity: 0;
}

.spinning {
  animation: spinSlow 0.8s var(--easing-linear) infinite;
}

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