/* ✅ CRITICAL CSS - AUTO-GENERATED FOR LCP OPTIMIZATION */
/* This file contains only above-the-fold critical styles */

/* ✅ OPTIMIZED FOR PERFORMANCE */

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

/* Force modal width */
.resume-checkout-modal {
  max-width: 620px !important;
  width: 620px !important;}

@layer base {
  :root {
    --background: white;
    --foreground: black;
    --card: white;
    --card-foreground: black;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: #26a6fb;
    --primary-foreground: white;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;
    --radius: 0.5rem;
    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217.2 91.2% 59.8%;

    /* Enhanced contrast colors for better accessibility */
    --text-primary: #1f2937;
    /* Dark gray for primary text */
    --text-secondary: #4b5563;
    /* Medium gray for secondary text */
    --text-muted: #6b7280;
    /* Muted text with better contrast */
    --text-disabled: #9ca3af;
    /* Disabled text with sufficient contrast */
    --bg-light: #f9fafb;
    /* Light background */
    --bg-lighter: #f3f4f6;
    /* Lighter background */
    --border-light: #e5e7eb;
    /* Light border */
    --border-medium: #d1d5db;
    /* Medium border */}

.dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 210 100% 40%;
    --primary-foreground: 222.2 47.4% 11.2%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;

    /* Dark mode enhanced contrast colors */
    --text-primary: #f9fafb;
    /* Light gray for primary text */
    --text-secondary: #e5e7eb;
    /* Lighter gray for secondary text */
    --text-muted: #d1d5db;
    /* Muted text with better contrast */
    --text-disabled: #9ca3af;
    /* Disabled text with sufficient contrast */
    --bg-light: #374151;
    /* Dark light background */
    --bg-lighter: #4b5563;
    /* Darker lighter background */
    --border-light: #6b7280;
    /* Dark light border */
    --border-medium: #9ca3af;
    /* Dark medium border */}

@layer base {
  * {
    @apply border-border;}

body {
    @apply bg-background text-foreground antialiased;
    font-feature-settings:
      "rlig" 1,
      "calt" 1;
    background-color: var(--background);
    color: var(--foreground);
    font-family: "Roboto", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji", sans-serif;}

html {
    -webkit-text-size-adjust: 100%;
    touch-action: manipulation;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: "Roboto", sans-serif;
    background-color: var(--background);
    color: var(--foreground);}

.font-roboto {
  font-family: "Roboto", sans-serif;}

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;}

.container {
  @apply w-full mx-auto px-4 sm:px-6 lg:px-8 xl:px-10 2xl:px-12 3xl:px-16;
  max-width: 1920px;}

.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;}

@layer base {
  html {
    @apply scroll-smooth;}

body {
    font-family: "Roboto", sans-serif;}

/* Enhanced contrast utility classes */
  .text-contrast-primary {
    color: var(--text-primary);}

/* High contrast status badge variants */
  .badge-contrast-success {
    background-color: #dcfce7;
    color: #166534;
    border-color: #bbf7d0;}

/* Enhanced form element contrast */
  .input-contrast {
    background-color: white;
    border-color: var(--border-medium);
    color: var(--text-primary);}

/* Enhanced button contrast variants */
  .btn-contrast-secondary {
    background-color: var(--bg-lighter);
    color: var(--text-primary);
    border-color: var(--border-medium);}

@media (min-width: 1921px) {
  .container {
    @apply max-w-[1920px];}

@media (min-width: 2561px) {
  .container {
    @apply max-w-[1920px];}

body {
  overflow-x: hidden;
  min-height: 100vh;
  min-height: -webkit-fill-available;}

body {
    font-size: 12pt;
    background: white;
    color: black;}

.container {
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;}

.aspect-ratio-box::before {
  content: "";
  display: block;
  padding-bottom: calc(100% * 9 / 16);}

.focus-visible:focus-visible {
  @apply outline-none ring-2 ring-offset-2 ring-primary;}

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

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

.bg-white {
  background-color: white !important;}

* {
  scrollbar-width: thin;
  scrollbar-color: rgba(156, 163, 175, 0.5) transparent;}

/* ✅ PERFORMANCE: Additional critical optimizations */
.hero-carousel {
  contain: layout style paint;
  content-visibility: auto;
}

.hero-carousel img {
  content-visibility: auto;
  contain-intrinsic-size: 640px 572px;
}

.product-card {
  content-visibility: auto;
  contain-intrinsic-size: 200px 250px;
}

.critical-above-fold {
  contain: layout style paint;
  content-visibility: auto;
}

/* Reduce layout shifts */
.loading-placeholder {
  min-height: 200px;
  background: #f0f0f0;
  background-image: linear-gradient(90deg, #f0f0f0 0%, #e0e0e0 50%, #f0f0f0 100%);
  background-size: 200px 100%;
  background-repeat: no-repeat;
  animation: loading 1.2s ease-in-out infinite;
}

@keyframes loading {
  0% { background-position: -200px 0; }
  100% { background-position: calc(200px + 100%) 0; }
}