/*
Theme Name: Access Pro Systems
Theme URI: https://example.com/
Author: ChatGPT
Description: Custom WordPress theme for Access Pro Systems LLC (mobile diagnostics + key programming + repairs). Built from your Lovable/Vite React design; Elementor compatible.
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: access-pro-systems
*/

/* Design tokens + custom utilities (ported from your app's src/index.css) */
:root{
  --background: 0 0% 5%;
  --foreground: 0 0% 95%;
  --card: 0 0% 8%;
  --card-foreground: 0 0% 95%;
  --popover: 0 0% 8%;
  --popover-foreground: 0 0% 95%;
  --primary: 0 85% 50%;
  --primary-foreground: 0 0% 100%;
  --secondary: 0 70% 25%;
  --secondary-foreground: 0 0% 100%;
  --muted: 0 0% 15%;
  --muted-foreground: 0 0% 65%;
  --accent: 0 85% 50%;
  --accent-foreground: 0 0% 100%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 0 0% 100%;
  --border: 0 0% 20%;
  --input: 0 0% 15%;
  --ring: 0 85% 50%;
  --radius: 0.5rem;

  --glow-primary: 0 85% 50%;
  --gradient-hero: linear-gradient(135deg, hsl(0 0% 5%) 0%, hsl(0 0% 10%) 50%, hsl(0 70% 10%) 100%);
  --gradient-card: linear-gradient(180deg, hsl(0 0% 10%) 0%, hsl(0 0% 6%) 100%);
  --shadow-glow: 0 0 40px hsl(0 85% 50% / 0.3);
  --shadow-card: 0 10px 40px hsl(0 0% 0% / 0.5);
}

html { scroll-behavior: smooth; }
body { background: hsl(var(--background)); color: hsl(var(--foreground)); }

/* custom component helpers */
.hero-gradient { background: var(--gradient-hero); }
.card-gradient { background: var(--gradient-card); }
.glow-text { text-shadow: 0 0 20px hsl(var(--primary) / 0.5); }
.glow-box { box-shadow: var(--shadow-glow); }
.text-gradient{
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  background-image: linear-gradient(90deg, hsl(var(--primary)) 0%, #fb7185 100%);
}

/* animations */
.animate-fade-up { animation: fadeUp 0.8s ease-out forwards; }
.animate-fade-in { animation: fadeIn 0.6s ease-out forwards; }
.animate-slide-in { animation: slideIn 0.5s ease-out forwards; }
.animate-glow-pulse { animation: glowPulse 2s ease-in-out infinite; }

@keyframes fadeUp { from { opacity:0; transform: translateY(30px);} to { opacity:1; transform: translateY(0);} }
@keyframes fadeIn { from { opacity:0;} to { opacity:1;} }
@keyframes slideIn { from { opacity:0; transform: translateX(-20px);} to { opacity:1; transform: translateX(0);} }
@keyframes glowPulse { 0%,100% { box-shadow: 0 0 20px hsl(0 85% 50% / 0.3);} 50% { box-shadow: 0 0 40px hsl(0 85% 50% / 0.5);} }

/* WordPress niceties */
a { text-decoration: none; }
img { max-width: 100%; height: auto; }