/* =================================================================
   Monitor24 — main.css
   Design system + custom utilities (works alongside Tailwind CDN)
   ================================================================= */

/* ----- Design tokens — Light ----- */
:root {
  --radius: 0.75rem;

  --background: oklch(0.99 0.005 180);
  --foreground: oklch(0.18 0.02 200);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.18 0.02 200);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.18 0.02 200);
  --primary: oklch(0.62 0.13 175);
  --primary-foreground: oklch(0.99 0 0);
  --secondary: oklch(0.96 0.01 180);
  --secondary-foreground: oklch(0.25 0.02 200);
  --muted: oklch(0.96 0.008 180);
  --muted-foreground: oklch(0.5 0.02 200);
  --accent: oklch(0.94 0.03 175);
  --accent-foreground: oklch(0.25 0.05 175);
  --destructive: oklch(0.58 0.22 27);
  --border: oklch(0.9 0.01 180);
  --input: oklch(0.92 0.01 180);
  --ring: oklch(0.62 0.13 175);

  --brand: oklch(0.62 0.13 175);
  --brand-foreground: oklch(0.99 0 0);
  --success: oklch(0.65 0.17 155);
  --warning: oklch(0.78 0.16 85);
}

/* ----- Design tokens — Dark ----- */
.dark {
  --background: oklch(0.14 0.02 220);
  --foreground: oklch(0.97 0.01 180);
  --card: oklch(0.19 0.025 220);
  --card-foreground: oklch(0.97 0.01 180);
  --popover: oklch(0.19 0.025 220);
  --popover-foreground: oklch(0.97 0.01 180);
  --primary: oklch(0.7 0.15 170);
  --primary-foreground: oklch(0.12 0.02 220);
  --secondary: oklch(0.24 0.025 220);
  --secondary-foreground: oklch(0.97 0.01 180);
  --muted: oklch(0.24 0.025 220);
  --muted-foreground: oklch(0.7 0.02 200);
  --accent: oklch(0.3 0.05 170);
  --accent-foreground: oklch(0.95 0.05 170);
  --destructive: oklch(0.7 0.2 22);
  --border: oklch(0.28 0.02 220 / 60%);
  --input: oklch(0.26 0.02 220);
  --ring: oklch(0.7 0.15 170);

  --brand: oklch(0.7 0.15 170);
  --brand-foreground: oklch(0.12 0.02 220);
  --success: oklch(0.72 0.18 155);
  --warning: oklch(0.82 0.17 85);
}

/* ----- Tailwind-style color bindings (manual, since we use CDN) ----- */
.bg-background { background-color: var(--background); }
.bg-card { background-color: var(--card); }
.bg-popover { background-color: var(--popover); }
.bg-primary { background-color: var(--primary); }
.bg-secondary { background-color: var(--secondary); }
.bg-muted { background-color: var(--muted); }
.bg-muted\/50 { background-color: color-mix(in oklab, var(--muted) 50%, transparent); }
.bg-muted\/60 { background-color: color-mix(in oklab, var(--muted) 60%, transparent); }
.bg-muted\/70 { background-color: color-mix(in oklab, var(--muted) 70%, transparent); }
.bg-muted\/40 { background-color: color-mix(in oklab, var(--muted) 40%, transparent); }
.bg-muted\/30 { background-color: color-mix(in oklab, var(--muted) 30%, transparent); }
.bg-muted\/20 { background-color: color-mix(in oklab, var(--muted) 20%, transparent); }
.bg-accent { background-color: var(--accent); }
.bg-accent\/60 { background-color: color-mix(in oklab, var(--accent) 60%, transparent); }
.bg-destructive { background-color: var(--destructive); }
.bg-destructive\/60 { background-color: color-mix(in oklab, var(--destructive) 60%, transparent); }
.bg-warning { background-color: var(--warning); }
.bg-warning\/60 { background-color: color-mix(in oklab, var(--warning) 60%, transparent); }
.bg-warning\/15 { background-color: color-mix(in oklab, var(--warning) 15%, transparent); }
.bg-success { background-color: var(--success); }
.bg-success\/60 { background-color: color-mix(in oklab, var(--success) 60%, transparent); }
.bg-success\/15 { background-color: color-mix(in oklab, var(--success) 15%, transparent); }
.bg-brand { background-color: var(--brand); }
.bg-brand\/10 { background-color: color-mix(in oklab, var(--brand) 10%, transparent); }
.bg-brand\/15 { background-color: color-mix(in oklab, var(--brand) 15%, transparent); }
.bg-brand\/20 { background-color: color-mix(in oklab, var(--brand) 20%, transparent); }
.bg-brand\/5 { background-color: color-mix(in oklab, var(--brand) 5%, transparent); }
.bg-primary\/90 { background-color: color-mix(in oklab, var(--primary) 90%, transparent); }

.text-foreground { color: var(--foreground); }
.text-card-foreground { color: var(--card-foreground); }
.text-popover-foreground { color: var(--popover-foreground); }
.text-primary { color: var(--primary); }
.text-primary-foreground { color: var(--primary-foreground); }
.text-secondary-foreground { color: var(--secondary-foreground); }
.text-muted-foreground { color: var(--muted-foreground); }
.text-muted-foreground\/60 { color: color-mix(in oklab, var(--muted-foreground) 60%, transparent); }
.text-muted-foreground\/70 { color: color-mix(in oklab, var(--muted-foreground) 70%, transparent); }
.text-accent-foreground { color: var(--accent-foreground); }
.text-destructive { color: var(--destructive); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-brand { color: var(--brand); }

.border-border { border-color: var(--border); }
.border-border\/60 { border-color: color-mix(in oklab, var(--border) 60%, transparent); }
.border-border\/40 { border-color: color-mix(in oklab, var(--border) 40%, transparent); }
.border-success\/30 { border-color: color-mix(in oklab, var(--success) 30%, transparent); }
.border-brand { border-color: var(--brand); }

.ring-background { --tw-ring-color: var(--background); }
.fill-warning { fill: var(--warning); }

.from-brand { --tw-gradient-from: var(--brand); }
.to-emerald-500 { --tw-gradient-to: oklch(0.7 0.15 170); }
.to-emerald-600 { --tw-gradient-to: oklch(0.6 0.15 170); }
.from-emerald-500 { --tw-gradient-from: oklch(0.7 0.15 170); }
.from-emerald-600 { --tw-gradient-from: oklch(0.6 0.15 170); }
.to-cyan-600 { --tw-gradient-to: oklch(0.6 0.15 200); }
.from-cyan-500 { --tw-gradient-from: oklch(0.7 0.13 200); }
.from-teal-500 { --tw-gradient-from: oklch(0.7 0.13 190); }
.to-green-600 { --tw-gradient-to: oklch(0.6 0.18 150); }

.from-brand\/5 { --tw-gradient-from: color-mix(in oklab, var(--brand) 5%, transparent); }
.from-brand\/20 { --tw-gradient-from: color-mix(in oklab, var(--brand) 20%, transparent); }
.via-emerald-500\/10 { --tw-gradient-via: color-mix(in oklab, oklch(0.7 0.15 170) 10%, transparent); }
.to-transparent { --tw-gradient-to: transparent; }

/* Base styles */
* { border-color: var(--border); outline-color: color-mix(in oklab, var(--ring) 50%, transparent); }
html { scroll-behavior: smooth; }
body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: 'Cairo', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  font-feature-settings: "ss01", "cv01";
}

/* Selection */
::selection {
  background: color-mix(in oklab, var(--brand) 30%, transparent);
  color: var(--foreground);
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: color-mix(in oklab, var(--muted-foreground) 30%, transparent);
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: color-mix(in oklab, var(--brand) 50%, transparent);
}

/* =================================================================
   Utilities
   ================================================================= */

/* Gradient text */
.text-gradient-brand {
  background: linear-gradient(135deg, var(--brand) 0%, var(--primary) 50%, oklch(0.65 0.18 200) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Glow */
.glow-brand {
  box-shadow:
    0 0 0 1px color-mix(in oklab, var(--brand) 20%, transparent),
    0 0 40px -8px color-mix(in oklab, var(--brand) 35%, transparent);
}
.glow-brand-strong {
  box-shadow:
    0 0 0 1px color-mix(in oklab, var(--brand) 30%, transparent),
    0 0 60px -10px color-mix(in oklab, var(--brand) 55%, transparent);
}

/* Glass card */
.glass-card {
  background: linear-gradient(135deg, color-mix(in oklab, var(--foreground) 6%, transparent) 0%, color-mix(in oklab, var(--foreground) 2%, transparent) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid color-mix(in oklab, var(--foreground) 8%, transparent);
  border-radius: 0.75rem;
}

/* Grid background */
.bg-grid {
  background-image:
    linear-gradient(to right, color-mix(in oklab, var(--muted-foreground) 8%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklab, var(--muted-foreground) 8%, transparent) 1px, transparent 1px);
  background-size: 48px 48px;
}
.dark .bg-grid {
  background-image:
    linear-gradient(to right, color-mix(in oklab, var(--brand) 6%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklab, var(--brand) 6%, transparent) 1px, transparent 1px);
}

/* Radial mask */
.mask-radial {
  -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 40%, black 40%, transparent 100%);
  mask-image: radial-gradient(ellipse 60% 50% at 50% 40%, black 40%, transparent 100%);
}

/* Pulse dot */
.pulse-dot { position: relative; }
.pulse-dot::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 9999px;
  background: color-mix(in oklab, var(--success) 60%, transparent);
  animation: pulse-ring 2s ease-out infinite;
}

/* Animations */
@keyframes pulse-ring {
  0% { transform: scale(0.8); opacity: 0.8; }
  100% { transform: scale(2.2); opacity: 0; }
}
@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes marquee-rtl {
  0% { transform: translateX(0); }
  100% { transform: translateX(50%); }
}
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.animate-float-y { animation: float-y 6s ease-in-out infinite; }
.animate-marquee { animation: marquee 30s linear infinite; }
.animate-bounce { animation: bounce 2s ease-in-out infinite; }
.animate-ping { animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite; }

[dir="rtl"] .animate-marquee { animation: marquee-rtl 30s linear infinite; }

/* Reveal-on-scroll */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* SVG path drawing animation */
.draw-path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: draw-line 1.5s ease-out 0.3s forwards;
}
@keyframes draw-line {
  to { stroke-dashoffset: 0; }
}

/* FAQ item */
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item[open] summary { margin-bottom: 0.5rem; }

/* Tab states */
.feature-tab[aria-selected="true"] {
  background-color: var(--accent);
  color: var(--accent-foreground);
}

/* Mobile menu open state */
.mobile-menu-open\:block { display: none; }
.mobile-menu-open\:hidden { display: block; }
.menu-open .mobile-menu-open\:block { display: block; }
.menu-open .mobile-menu-open\:hidden { display: none; }

/* SR-only helper (in case Tailwind CDN doesn't include it) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Tabular nums */
.tabular-nums { font-variant-numeric: tabular-nums; }

/* No transitions (used by theme toggle to prevent flash) */
.no-transitions * { transition: none !important; }