/* ==========================================================================
   v0-global.css — Eagle Security International
   Compiled from vercelPreview/app/globals.css
   ========================================================================== */

/* ---- CSS Custom Properties (v0 theme tokens) ---- */
:root {
  --background: #070d17;
  --foreground: #f0ede8;
  --card: #0a1220;
  --card-foreground: #f0ede8;
  --popover: #0a1220;
  --popover-foreground: #f0ede8;
  --primary: #070d17;
  --primary-foreground: #f0ede8;
  --secondary: #e9c176;
  --secondary-foreground: #070d17;
  --muted: #0c1524;
  --muted-foreground: #7a8899;
  --accent: #e9c176;
  --accent-foreground: #070d17;
  --destructive: #c1492d;
  --destructive-foreground: #fbfbfb;
  --border: #1a2535;
  --input: #1a2535;
  --ring: #e9c176;
  --radius: 0.125rem;
  --radius-sm: calc(var(--radius) - 2px);
  --radius-md: var(--radius);
  --radius-lg: calc(var(--radius) + 2px);
}

/* ---- Base Layer ---- */
* {
  border-color: var(--border);
}
html {
  scroll-behavior: smooth;
}
body {
  background-color: var(--background);
  color: var(--foreground);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---- Tailwind-mapped utility classes (v0 design tokens) ---- */
/* Backgrounds */
.bg-background         { background-color: var(--background); }
.bg-card               { background-color: var(--card); }
.bg-muted              { background-color: var(--muted); }
.bg-secondary          { background-color: var(--secondary); }
.bg-transparent        { background-color: transparent; }
/* Text colors */
.text-foreground       { color: var(--foreground); }
.text-muted-foreground { color: var(--muted-foreground); }
.text-secondary        { color: var(--secondary); }
.text-secondary-foreground { color: var(--secondary-foreground); }
.text-border           { color: var(--border); }
.text-white            { color: #ffffff; }
/* Border colors */
.border-background     { border-color: var(--background); }
.border-card           { border-color: var(--card); }
.border-muted          { border-color: var(--muted); }
.border-border         { border-color: var(--border); }
.border-secondary      { border-color: var(--secondary); }
.border-foreground     { border-color: var(--foreground); }
.border-transparent    { border-color: transparent; }
/* Opacity variants for border */
.border-foreground\/20 { border-color: rgba(240,237,232,0.20); }
.border-foreground\/30 { border-color: rgba(240,237,232,0.30); }
.border-secondary\/25  { border-color: rgba(233,193,118,0.25); }
.border-secondary\/30  { border-color: rgba(233,193,118,0.30); }
.border-secondary\/40  { border-color: rgba(233,193,118,0.40); }
/* Hover border */
.hover\:border-secondary:hover { border-color: var(--secondary); }
/* Hover text */
.hover\:text-secondary:hover   { color: var(--secondary); }
.hover\:text-foreground:hover  { color: var(--foreground); }
/* Hover background */
.hover\:bg-secondary\/85:hover  { background-color: rgba(233,193,118,0.85); }
.hover\:bg-secondary:hover      { background-color: var(--secondary); }
/* Hover text for secondary bg */
.hover\:bg-secondary:hover .hover\:text-secondary-foreground,
.hover\:bg-secondary:hover.hover\:text-secondary-foreground { color: var(--secondary-foreground); }
/* Group hover */
.group:hover .group-hover\:scale-\[1\.04\] { transform: scale(1.04); }
.group:hover .group-hover\:gap-3           { gap: 0.75rem; }

/* ---- Overlay backgrounds ---- */
.bg-background\/68   { background-color: rgba(7,13,23,0.68); }
.bg-background\/80   { background-color: rgba(7,13,23,0.80); }
.bg-background\/96   { background-color: rgba(7,13,23,0.96); }
.bg-background\/40   { background-color: rgba(7,13,23,0.40); }
.bg-background\/65   { background-color: rgba(7,13,23,0.65); }
.bg-card\/95         { background-color: rgba(10,18,32,0.95); }

/* ---- Filters ---- */
.backdrop-blur-md    { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }

/* ---- Radius ---- */
.rounded-sm          { border-radius: var(--radius-sm); }
.rounded-md          { border-radius: var(--radius-md); }
.rounded-lg          { border-radius: var(--radius-lg); }
.rounded-full        { border-radius: 9999px; }

/* ==========================================================================
   Keyframe Animations (from v0 globals.css)
   ========================================================================== */

/* Preloader animations */
@keyframes preloaderCircle {
  0%   { stroke-dashoffset: 220; opacity: 0; }
  8%   { opacity: 1; }
  100% { stroke-dashoffset: 0; }
}
@keyframes preloaderCircleInner {
  0%   { stroke-dashoffset: 80; opacity: 0; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes preloaderLine {
  0%   { stroke-dashoffset: 46; }
  100% { stroke-dashoffset: 0; }
}
@keyframes preloaderDot {
  0%   { opacity: 0; transform: scale(0); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes preloaderFadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes loadBar {
  0%   { width: 0%; }
  55%  { width: 72%; }
  100% { width: 100%; }
}
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Fingerprint scanner preloader */
@keyframes fpDraw {
  0%   { stroke-dashoffset: var(--fp-len); opacity: 0.15; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes fpScanSweep {
  0%   { transform: translateY(-6%); }
  50%  { transform: translateY(106%); }
  100% { transform: translateY(-6%); }
}
@keyframes fpPulse {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1; }
}
@keyframes fpRingSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes fpDotBlink {
  0%, 100% { opacity: 0.2; }
  50%      { opacity: 1; }
}

/* ---- Scrollbar hide for carousel ---- */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* ---- Disabled state ---- */
.disabled\:opacity-25:disabled { opacity: 0.25; }

/* ==========================================================================
   Tailwind CDN complement (loaded via enqueue)
   The CDN provides: flex, grid, gap, padding, margin, typography, sizing,
   positioning, display, overflow, etc. All standard Tailwind utilities.
   Custom theme tokens and animations above override/extend the CDN.
   ========================================================================== */