:root { color-scheme: light only; }
* { color-scheme: light only; }
@media (prefers-color-scheme: dark) {
  :root, body, * {
    color-scheme: light only;
    background-color: revert;
    color: revert;
  }
}

:root {
  /* Header/Footer - Dark Blue (constant across themes) */
  --color-header-footer: #0a1628;
  --color-header-footer-light: #0f1d33;
  --color-header-footer-dark: #070d19;
  
  /* Primary Color - Dark Blue for light theme */
  --color-primary: #0a1628;
  --color-primary-light: #1e3a5f;
  --color-primary-dark: #070d19;
  
  /* Accent - Red for branding only */
  --color-accent: #A30000;
  --color-accent-light: #cc0000;
  --color-accent-dark: #800000;
  
  /* Light Theme Background */
  --bg-light: #ffffff;
  --bg-light-secondary: #f8fafc;
  --bg-light-tertiary: #f1f5f9;
  
  /* Dark Theme Background */
  --bg-dark: #111827;
  --bg-dark-secondary: #1f2937;
  --bg-dark-tertiary: #374151;
  
  /* Light Theme Text */
  --text-light-primary: #0a1628;
  --text-light-secondary: #475569;
  --text-light-muted: #64748b;
  
  /* Dark Theme Text */
  --text-dark-primary: #f8fafc;
  --text-dark-secondary: #cbd5e1;
  --text-dark-muted: #94a3b8;
  
  /* Active Theme - Light by default */
  --bg-primary: var(--bg-light);
  --bg-secondary: var(--bg-light-secondary);
  --bg-tertiary: var(--bg-light-tertiary);
  --text-primary: var(--text-light-primary);
  --text-secondary: var(--text-light-secondary);
  --text-muted: var(--text-light-muted);
  --border-color: #e2e8f0;
}

/* Light theme explicit styles */
body {
  background-color: var(--bg-light);
  color: var(--text-light-primary);
}

/* Light mode only - no dark mode support */
/* Global Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  background-color: #ffffff;
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background-color: #ffffff;
  color: #1e293b;
  transition: background-color 0.3s ease, color 0.3s ease;
}
/* Typography */
h1, h2, h3, h4, h5, h6 {
  color: var(--color-primary);
  font-weight: 700;
}

/* Light mode only */
h1 {
  font-size: 2.5rem;
  line-height: 1.2;
}

h2 {
  font-size: 2rem;
  line-height: 1.3;
}

h3 {
  font-size: 1.5rem;
  line-height: 1.4;
}

p {
  color: var(--text-secondary);
  line-height: 1.6;
}

/* Header & Footer Styling */
.header-footer-bg {
  background-color: var(--color-header-footer);
  color: white;
}

.header-footer-bg h1,
.header-footer-bg h2,
.header-footer-bg h3,
.header-footer-bg h4,
.header-footer-bg h5,
.header-footer-bg h6 {
  color: white;
}

.header-footer-bg p {
  color: rgba(255, 255, 255, 0.8);
}

/* Accent Utilities */
.text-accent {
  color: var(--color-accent);
}

.bg-accent {
  background-color: var(--color-accent);
}

.bg-header-footer {
  background-color: var(--color-header-footer);
}
/* Card Styling */
.card {
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
  border-color: var(--color-primary);
}

.dark .card:hover {
  border-color: var(--color-accent);
}
/* Light mode only */
/* Button Styling */
.btn-primary {
  background-color: var(--color-accent);
  color: white;
  transition: background-color 0.2s ease;
}

.btn-primary:hover {
  background-color: var(--color-accent-light);
}

.btn-secondary {
  background-color: transparent;
  border: 1px solid #e2e8f0;
  color: #1e293b;
  transition: all 0.2s ease;
}
.btn-secondary:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* Light mode only */
/* Animation */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.6s ease-out forwards;
}

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

.animate-fade-up {
  animation: fadeUp 0.8s ease-out forwards;
}

/* Scroll-triggered animations with improved performance */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), 
              transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, transform;
}

.animate-on-scroll.animate-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children animations */
.stagger-children > .animate-on-scroll:nth-child(1) { transition-delay: 0.05s; }
.stagger-children > .animate-on-scroll:nth-child(2) { transition-delay: 0.1s; }
.stagger-children > .animate-on-scroll:nth-child(3) { transition-delay: 0.15s; }
.stagger-children > .animate-on-scroll:nth-child(4) { transition-delay: 0.2s; }
.stagger-children > .animate-on-scroll:nth-child(5) { transition-delay: 0.25s; }
.stagger-children > .animate-on-scroll:nth-child(6) { transition-delay: 0.3s; }

/* Hover lift effect */
.hover-lift {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-lift:hover {
  transform: translateY(-4px);
}

/* Button press effect */
.btn-press {
  transition: transform 0.15s ease;
}

.btn-press:active {
  transform: scale(0.97);
}

/* Smooth image loading */
img {
  opacity: 1;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

img[loading] {
  opacity: 0;
}

/* Focus styles for accessibility */
a:focus-visible,
button:focus-visible {
  outline: 2px solid #A30000;
  outline-offset: 2px;
}

/* Reduced motion support */
@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;
  }
  
  .animate-on-scroll {
    opacity: 1;
    transform: none;
  }
}
/* Smooth image loading */
img {
  opacity: 1;
  transition: opacity 0.3s ease;
}

img[loading] {
  opacity: 0;
}
/* Smooth scrolling with padding for fixed header */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

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

::-webkit-scrollbar-track {
  background: var(--bg-secondary, #f1f5f9);
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Light mode only */
/* Selection color */
::selection {
  background-color: var(--color-primary);
  color: white;
}

/* Light mode only */
/* Adjust main content for fixed header */
main {
  padding-top: 0;
  min-height: calc(100vh - 72px);
  background-color: #ffffff;
}

/* Light mode only */

/* Remove any extra spacing below header */
.header + main,
animated-header + main,
page-loader + animated-header + main {
  margin-top: 0;
  padding-top: 0;
}
/* Page-specific main adjustments */
.products-page main,
.projects-page main,
.media-page main,
.about-page main {
  padding-top: 0;
}
/* Custom selection for product cards */
product-card::part(card) {
  user-select: none;
}

/* Responsive typography scaling */
@media (max-width: 640px) {
  html {
    font-size: 14px;
  }
}

@media (min-width: 1536px) {
  html {
    font-size: 18px;
  }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
  .hover-lift:hover {
    transform: none;
  }
  
  .animate-on-scroll {
    transition-duration: 0.3s;
  }
}

/* Safe area insets for notched devices */
@supports (padding-top: env(safe-area-inset-top)) {
  main {
    padding-top: max(72px, calc(72px + env(safe-area-inset-top)));
  }
}
/* Print styles */
@media print {
  .no-print,
  animated-header,
  animated-footer,
  whatsapp-button,
  page-loader {
    display: none !important;
  }
  
  main {
    padding-top: 0 !important;
    background-color: #ffffff !important;
  }
  
  body {
    background-color: #ffffff !important;
    color: #000000 !important;
  }
  
  /* Light mode only */
}

/* Ensure no gap between header and first section */
body > page-loader + animated-header + main > section:first-child,
body > animated-header + main > section:first-child {
  margin-top: 0;
}
/* RTL Support - Disabled, English only */
html[dir="ltr"] {
  direction: ltr;
}

html[dir="rtl"] {
  direction: ltr !important;
}
/* Container query support for components */
@container (max-width: 400px) {
  .container-small {
    padding: 1rem;
  }
}