@tailwind base;
@tailwind components;
@tailwind utilities;

/* Global CSS Variables - Extended Palette */
:root {
  /* Extended color palette - loaded after critical CSS */
  --color-surface-variant: 240 242 245; /* #F0F2F5 */
  --color-surface-container-highest: 230 232 236; /* #E6E8EC */
  --color-text-disabled: 170 170 170; /* #AAAAAA */
  
  /* Status colors */
  --color-success: 46 204 113; /* #2ECC71 */
  --color-warning: 241 196 15; /* #F1C40F */
  --color-error: 231 76 60; /* #E74C3C */
  --color-info: 52 152 219; /* #3498DB */
  
  /* Basketball specific colors */
  --color-home-team: 255 149 0; /* #FF9500 */
  --color-away-team: 74 164 255; /* #4AA4FF */
  --color-live: 231 76 60; /* #E74C3C */
  --color-win: 46 204 113; /* #2ECC71 */
  --color-loss: 231 76 60; /* #E74C3C */
  --color-upcoming: 52 152 219; /* #3498DB */
}

/* Extended dark theme colors */
[data-theme="dark"] {
  --color-surface-variant: 42 42 42; /* #2A2A2A */
  --color-surface-container-highest: 50 50 50; /* #323232 */
  --color-text-disabled: 117 117 117; /* #757575 */
}

/* Markdown/Prose styling for content pages */
.prose {
  max-width: 70ch;
}

.prose > * + * {
  margin-top: 1rem;
}

.prose h2 {
  font-family: 'Saira Condensed', 'Inter', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  color: rgb(var(--color-text-primary));
}

.prose h3 {
  font-family: 'Saira Condensed', 'Inter', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  color: rgb(var(--color-text-primary));
}

.prose p {
  font-family: 'Noto Sans JP', 'Inter', system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.75;
  color: rgb(var(--color-text-secondary));
}

.prose ul {
  list-style-type: disc;
  padding-left: 1.25rem;
  margin: 1rem 0;
}

.prose li {
  font-family: 'Noto Sans JP', 'Inter', system-ui, sans-serif;
  color: rgb(var(--color-text-secondary));
  line-height: 1.7;
}

.prose a {
  color: rgb(var(--color-primary));
  text-decoration: underline;
}

.prose strong {
  color: rgb(var(--color-text-primary));
  font-weight: 600;
}

/* Typography classes are inlined in critical CSS */

/* Card and surface styling */
.surface {
  background-color: rgb(var(--color-surface));
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(var(--color-primary), 0.1);
}

/* Button base styles */
.btn {
  @apply inline-flex items-center justify-center px-4 py-3 text-sm font-medium transition-all duration-200 rounded-lg;
}

.btn-primary {
  background-color: rgb(var(--color-primary));
  color: white;
  box-shadow: 0 2px 4px rgba(var(--color-primary), 0.3);
}

.btn-primary:hover {
  background-color: rgb(var(--color-primary-light));
  box-shadow: 0 4px 8px rgba(var(--color-primary), 0.4);
}

/* Input styles */
.input {
  background-color: rgb(var(--color-surface-variant));
  border: none;
  border-radius: 8px;
  padding: 16px;
  color: rgb(var(--color-text-primary));
  transition: all 0.2s ease;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}

.input:focus {
  outline: none;
  border: 2px solid rgb(var(--color-primary));
  background-color: rgb(var(--color-surface));
  box-shadow: 0 4px 14px rgba(var(--color-primary), 0.15);
}

/* Theme transition */
html {
  transition: color-scheme 0.3s ease;
}

html[data-theme="dark"] {
  color-scheme: dark;
}

html[data-theme="light"] {
  color-scheme: light;
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: rgb(var(--color-surface-variant));
}

::-webkit-scrollbar-thumb {
  background: rgb(var(--color-accent));
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgb(var(--color-accent-dark));
}

/* Enhanced modern utilities */
.backdrop-blur-lg {
  backdrop-filter: blur(16px);
}

.backdrop-blur-sm {
  backdrop-filter: blur(4px);
}

/* Text gradient utilities */
.bg-gradient-to-r {
  background: linear-gradient(to right, var(--tw-gradient-stops));
}

.bg-gradient-to-br {
  background: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

.bg-gradient-to-b {
  background: linear-gradient(to bottom, var(--tw-gradient-stops));
}

.bg-gradient-to-tr {
  background: linear-gradient(to top right, var(--tw-gradient-stops));
}

.bg-gradient-to-l {
  background: linear-gradient(to left, var(--tw-gradient-stops));
}

.bg-clip-text {
  -webkit-background-clip: text;
  background-clip: text;
}

.text-transparent {
  color: transparent;
}

/* Modern shadows */
.shadow-2xl {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Modern blur effects */
.blur-2xl {
  filter: blur(40px);
}

.blur-3xl {
  filter: blur(64px);
}

/* Modern transforms */
.transform {
  transform: var(--tw-transform);
}

.hover\:-translate-y-1:hover {
  transform: translateY(-0.25rem);
}

.hover\:-translate-y-2:hover {
  transform: translateY(-0.5rem);
}

.hover\:scale-110:hover {
  transform: scale(1.1);
}

/* Enhanced animations */
@keyframes bounce {
  0%, 100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: none;
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

.animate-bounce {
  animation: bounce 1s infinite;
}

/* Remove all focus rings */
*:focus { 
  outline: none !important; 
  box-shadow: none !important;
}
*:focus-visible { 
  outline: none !important; 
  box-shadow: none !important;
}
a:focus, button:focus, input:focus, textarea:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* Enhanced button hover states */

/* Modern card hover effects */
.hover\:shadow-primary\/25:hover {
  box-shadow: 0 25px 50px -12px rgba(var(--color-primary), 0.25);
}

.hover\:shadow-primary\/10:hover {
  box-shadow: 0 10px 25px -5px rgba(var(--color-primary), 0.1);
}

/* Smooth page transitions */
html.dark {
  color-scheme: dark;
}

/* Line clamp utilities */
.line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Scroll Animation Styles */
[data-scroll-animation] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-scroll-animation].animate-in {
  opacity: 1;
  transform: translateY(0);
}

[data-scroll-animation="fade-up"] {
  transform: translateY(50px);
}

[data-scroll-animation="fade-down"] {
  transform: translateY(-50px);
}

[data-scroll-animation="fade-left"] {
  transform: translateX(50px);
}

[data-scroll-animation="fade-right"] {
  transform: translateX(-50px);
}

[data-scroll-animation].animate-in {
  transform: translateY(0) translateX(0) scale(1);
}

/* Stagger animations */
[data-scroll-stagger] [data-scroll-animation] {
  transition-delay: 0s;
}

[data-scroll-stagger] [data-scroll-animation].animate-in {
  animation: slideInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

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

/* Enhanced responsive typography */
@media (max-width: 768px) {
  .text-6xl {
    font-size: 3rem;
    line-height: 1;
  }
  
  .text-8xl {
    font-size: 4rem;
    line-height: 1;
  }
  
  .text-9xl {
    font-size: 5rem;
    line-height: 1;
  }
}