/* CRITICAL: Base CSS - Phase 1 (First Load) */
/* Google Fonts now loaded via preload in index.html */

/* CRITICAL: CSS Custom Properties with Fallbacks */
:root {
  /* Core colors optimized */
  --background: 0 0% 100%;
  --foreground: 0 0% 10%;
  --card: 0 0% 100%;
  --card-foreground: 0 0% 10%;

  --popover: 0 0% 100%;
  --popover-foreground: 0 0% 10%;

  --primary: 45 100% 50%;
  --primary-foreground: 0 0% 10%;

  --secondary: 0 0% 13%;
  --secondary-foreground: 0 0% 98%;

  /* Brand Colors */
  --crunch-yellow: 45 100% 50%;
  --crunch-black: 0 0% 10%;

  --muted: 0 0% 96%;
  --muted-foreground: 0 0% 45%;

  --accent: 45 100% 96%;
  --accent-foreground: 45 100% 30%;

  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 100%;

  --border: 0 0% 90%;
  --input: 0 0% 90%;
  --ring: 45 100% 50%;

  --radius: 0.25rem;

  --sidebar-background: 0 0% 98%;
  --sidebar-foreground: 0 0% 10%;
  --sidebar-primary: 45 100% 50%;
  --sidebar-primary-foreground: 0 0% 10%;
  --sidebar-accent: 45 100% 96%;
  --sidebar-accent-foreground: 45 100% 30%;
  --sidebar-border: 0 0% 90%;
  --sidebar-ring: 45 100% 50%;
}

.dark {
  --background: 0 0% 10%;
  --foreground: 0 0% 98%;

  --card: 0 0% 13%;
  --card-foreground: 0 0% 98%;

  --popover: 0 0% 13%;
  --popover-foreground: 0 0% 98%;

  --primary: 45 100% 50%;
  --primary-foreground: 0 0% 10%;

  --secondary: 0 0% 13%;
  --secondary-foreground: 0 0% 98%;

  /* Brand Colors - consistent in dark mode */
  --crunch-yellow: 45 100% 50%;
  --crunch-black: 0 0% 98%;

  --muted: 0 0% 20%;
  --muted-foreground: 0 0% 60%;

  --accent: 45 100% 15%;
  --accent-foreground: 45 100% 70%;

  --destructive: 0 62% 45%;
  --destructive-foreground: 0 0% 100%;

  --border: 0 0% 20%;
  --input: 0 0% 20%;
  --ring: 45 100% 50%;

  --sidebar-background: 0 0% 13%;
  --sidebar-foreground: 0 0% 90%;
  --sidebar-primary: 45 100% 50%;
  --sidebar-primary-foreground: 0 0% 10%;
  --sidebar-accent: 45 100% 15%;
  --sidebar-accent-foreground: 45 100% 70%;
  --sidebar-border: 0 0% 20%;
  --sidebar-ring: 45 100% 50%;
}

/* CRITICAL: Base styles with inline fallbacks */
* {
  border-color: hsl(var(--border, 0 0% 90%));
  box-sizing: border-box;
}

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: Inter, system-ui, -apple-system, sans-serif;
  line-height: 1.5;
  margin: 0;
  padding: 0;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  font-family: Inter, system-ui, -apple-system, sans-serif;
  /* Better mobile heading sizes */
  line-height: 1.2;
}

/* Mobile-first typography scaling */
h1 {
  font-size: 1.5rem; /* 24px */
}

h2 {
  font-size: 1.25rem; /* 20px */
}

h3 {
  font-size: 1.125rem; /* 18px */
}

@media (min-width: 768px) {
  h1 {
    font-size: 1.875rem; /* 30px */
  }
  
  h2 {
    font-size: 1.5rem; /* 24px */
  }
  
  h3 {
    font-size: 1.25rem; /* 20px */
  }
}

@media (min-width: 1024px) {
  h1 {
    font-size: 2.25rem; /* 36px */
  }
  
  h2 {
    font-size: 1.875rem; /* 30px */
  }
  
  h3 {
    font-size: 1.5rem; /* 24px */
  }
}

@media (min-width: 1280px) {
  h1 {
    font-size: 3rem; /* 48px */
  }
  
  h2 {
    font-size: 2.25rem; /* 36px */
  }
  
  h3 {
    font-size: 1.875rem; /* 30px */
  }
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Enhanced mobile touch targets */
button, a, input, select, textarea {
  min-height: 44px;
  min-width: 44px;
}

/* Mobile-friendly focus states */
*:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px hsl(var(--crunch-yellow)), 0 0 0 4px hsl(var(--crunch-yellow) / 0.2);
  outline-offset: 2px;
}

/* Performance: Prevent forced reflows with GPU acceleration */
/* GPU-accelerate animated elements to prevent layout recalculations */
[class*="motion-"],
[data-radix-collection-item],
[role="dialog"],
[role="menu"],
[role="listbox"] {
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

/* Optimize animations to use only transform and opacity */
@media (prefers-reduced-motion: no-preference) {
  * {
    /* Enable hardware acceleration for transforms */
    will-change: auto;
  }
  
  /* Only hint will-change for actively animating elements */
  [data-state="open"],
  [data-state="closed"],
  [aria-expanded="true"],
  [aria-expanded="false"] {
    will-change: transform, opacity;
  }
  
  /* Remove will-change after animation completes */
  *:not(:hover):not(:focus):not(:active) {
    will-change: auto;
  }
}

/* Containment for isolated components to prevent layout thrashing */
.dashboard-card,
.chart-container,
.stats-card,
[class*="Card"] {
  contain: layout style paint;
}

/* Optimize image rendering */
img, picture, video {
  content-visibility: auto;
  contain-intrinsic-size: 100% 100%;
}