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

@layer base {
  :root {
    --background: 0 0% 98%;
    --foreground: 220 40% 10%;
    
    --card: 0 0% 100%;
    --card-foreground: 220 40% 10%;
    
    --popover: 0 0% 100%;
    --popover-foreground: 220 40% 10%;
    
    --primary: 45 93% 50%;
    --primary-foreground: 220 40% 10%;
    
    --secondary: 220 85% 35%;
    --secondary-foreground: 0 0% 100%;
    
    --accent: 140 75% 38%;
    --accent-foreground: 0 0% 100%;
    
    --muted: 220 20% 92%;
    --muted-foreground: 220 20% 45%;
    
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;
    
    --border: 220 20% 88%;
    --input: 220 20% 88%;
    --ring: 45 93% 50%;
    
    --radius: 1rem;

    --winning-gold: 43 100% 50%;
    --winning-green: 142 71% 45%;
    --winning-accent: 348 83% 47%;
    --winning-text: 220 40% 10%;

    --blog-surface: 0 0% 100%;
    --blog-border: 220 20% 90%;
    --blog-muted: 220 14% 96%;
    --blog-card-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05);

    --match-card-bg: 0 0% 100%;
    --match-card-hover: 220 20% 97%;
    --stat-bar-home: 220 85% 45%;
    --stat-bar-away: 340 80% 50%;
    --stat-bar-bg: 220 20% 92%;
  }
  
  .dark {
    --background: 220 40% 5%;
    --foreground: 220 20% 95%;
    
    --card: 220 40% 8%;
    --card-foreground: 220 20% 95%;
    
    --popover: 220 40% 8%;
    --popover-foreground: 220 20% 95%;
    
    --primary: 45 93% 50%;
    --primary-foreground: 220 40% 10%;
    
    --secondary: 215 90% 45%;
    --secondary-foreground: 0 0% 100%;
    
    --accent: 140 75% 45%;
    --accent-foreground: 220 40% 10%;
    
    --muted: 220 30% 15%;
    --muted-foreground: 220 20% 65%;
    
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;
    
    --border: 220 30% 20%;
    --input: 220 30% 20%;
    --ring: 45 93% 50%;

    --winning-gold: 45 100% 55%;
    --winning-green: 142 70% 50%;
    --winning-accent: 348 80% 55%;
    --winning-text: 0 0% 100%;

    --blog-surface: 220 40% 7%;
    --blog-border: 220 30% 18%;
    --blog-muted: 220 30% 12%;
    --blog-card-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.3);

    --match-card-bg: 220 40% 8%;
    --match-card-hover: 220 35% 12%;
    --stat-bar-home: 220 80% 60%;
    --stat-bar-away: 340 75% 60%;
    --stat-bar-bg: 220 30% 18%;
  }

  /* Optional Custom Font loading with swap */
  @font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap; /* Performance optimization for fonts */
    src: url('https://fonts.gstatic.com/s/dmsans/v14/rP2Hp2ywxg089UriCZOIHTWEBlw.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
}

@layer base {
  * {
    border-color: hsl(var(--border));
  }
  
  body {
    /* Optimization: System fonts to avoid FOUT/FOIT and network requests */
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
    line-height: 1.625;
  }
  
  html {
    scroll-behavior: smooth;
  }
  
  h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
    line-height: 1.1;
  }

  /* GPU Acceleration for standard animated properties */
  img, video, canvas, svg {
    transform: translateZ(0);
    will-change: transform, opacity;
  }
}

@layer utilities {
  .text-shadow-sm {
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  }
  
  .text-shadow-glow {
    text-shadow: 0 0 20px hsla(var(--winning-gold) / 0.5);
  }

  /* Hide scrollbar for Chrome, Safari and Opera */
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }
  /* Hide scrollbar for IE, Edge and Firefox */
  .scrollbar-hide {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }

  /* Custom scrollbar utility */
  .scrollbar-custom::-webkit-scrollbar {
    height: 6px;
    width: 6px;
  }
  .scrollbar-custom::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
  }
  .dark .scrollbar-custom::-webkit-scrollbar-track {
    background: #2a2a2a;
  }
  .scrollbar-custom::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
  }
  .scrollbar-custom::-webkit-scrollbar-thumb:hover {
    background: #555;
  }

  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }
  .no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  /* Reflow/Repaint isolation utilities for component optimization */
  .contain-content {
    contain: layout paint style;
  }
  .contain-strict {
    contain: layout style paint size;
  }
  .contain-layout {
    contain: layout;
  }
  .contain-paint {
    contain: paint;
  }
  
  /* Animation Optimization utilities */
  .will-change-transform {
    will-change: transform;
  }
  .will-change-opacity {
    will-change: opacity;
  }
  .gpu-accelerated {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
  }
}