/* === OWLSHINE Thermal Tech Design System - Variables === */
:root {
  /* Owlshine brand colors (fallback defaults; primary source is theme-css-var.html mapping) */
  --owl-accent-cold: #00D4FF;
  --owl-accent-warm: #FF6B35;
  --owl-accent-hot: #FF2D55;
  --owl-accent-gold: #CFBE74;

  /* Gradients */
  --owl-gradient-thermal: linear-gradient(135deg, #00D4FF 0%, #FF6B35 50%, #FF2D55 100%);
  --owl-gradient-glow: linear-gradient(180deg, rgba(0, 212, 255, 0.12) 0%, transparent 100%);
  --owl-gradient-cta: linear-gradient(135deg, #FF6B35, #FF2D55);

  /* Typography (fallback defaults; primary source is theme-css-var.html mapping) */
  --owl-font-display: 'Bebas Neue', sans-serif;
  --owl-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --owl-font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  /* Layout */
  --owl-nav-height: 72px;
  --owl-radius-sm: 6px;
  --owl-radius-md: 8px;
  --owl-radius-lg: 16px;
  --owl-radius-full: 100px;

  /* Shadows */
  --owl-shadow-card: 0 20px 40px rgba(0, 0, 0, 0.08), 0 0 60px rgba(0, 212, 255, 0.05);
  --owl-shadow-button: 0 4px 20px rgba(255, 107, 53, 0.3);
  --owl-shadow-button-hover: 0 8px 30px rgba(255, 107, 53, 0.4);
}

:root {
  --body-scrollbar-width: 17px;
}
@supports (-webkit-appearance: none) {
  :root {
    --body-scrollbar-width: 15px;
  }
}

:root {
  --z-index-hover: 1;
  --z-index-active: 2;
  --z-index-focus: 3;
  --z-index-sticky: 1000;
  --z-index-dropdown: 1010;
  --z-index-fixed: 1020;
  --z-index-modal: 1030;
  --z-index-popover: 1040;
  --z-index-tooltip: 1050;
  --z-index-toast: 1060;
}

:root {
  --page-padding: 30px;
}
@media (max-width: 959px) {
  :root {
    --page-padding: 20px;
  }
}