/*
  Kenz Al-Remal static site (cPanel ready)
  - Tailwind utilities are loaded via CDN in index.html
  - This file contains brand tokens + custom gradients + small animation helpers
*/

@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800;900&family=Cairo:wght@400;600;700;800;900&display=swap');

:root {
  --background: 210 25% 97%;
  --foreground: 210 50% 10%;

  --card: 0 0% 100%;
  --card-foreground: 210 50% 10%;

  --primary: 210 85% 40%;
  --primary-foreground: 0 0% 100%;

  --secondary: 42 90% 55%;
  --secondary-foreground: 210 50% 10%;

  --muted: 210 20% 92%;
  --muted-foreground: 210 15% 45%;

  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;

  --border: 210 20% 88%;
  --ring: 210 85% 40%;

  --radius: 0.75rem;

  --gold: 42 90% 55%;
  --blue-deep: 210 90% 25%;
  --blue-light: 205 80% 60%;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Tajawal', sans-serif;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Cairo', sans-serif;
}

/* Brand utilities (match the original project) */
.bg-gradient-hero {
  background: linear-gradient(
    180deg,
    hsl(var(--blue-deep) / 0.85) 0%,
    hsl(var(--primary) / 0.70) 50%,
    hsl(var(--blue-deep) / 0.90) 100%
  );
}

.bg-gradient-section {
  background: linear-gradient(180deg, hsl(var(--background)) 0%, hsl(var(--muted)) 100%);
}

.bg-gradient-dark {
  background: linear-gradient(180deg, hsl(210 50% 8%) 0%, hsl(210 60% 12%) 100%);
}

.shadow-brand { box-shadow: 0 10px 40px -10px hsl(var(--primary) / 0.30); }
.shadow-gold  { box-shadow: 0  8px 30px  -8px hsl(var(--gold) / 0.40); }

/* Subtle reveal animations (replaces framer-motion) */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms ease, transform 700ms ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-right { transform: translateX(24px); }
.reveal-right.is-visible { transform: translateX(0); }
.reveal-left { transform: translateX(-24px); }
.reveal-left.is-visible { transform: translateX(0); }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-right, .reveal-left {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Better focus style */
:focus-visible { outline: 3px solid hsl(var(--ring) / 0.35); outline-offset: 2px; }

/* Fixed header anchor offset */
.anchor { scroll-margin-top: 90px; }

/* Toast */
.toast {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
  min-width: 260px;
  max-width: 420px;
  background: hsl(var(--card));
  color: hsl(var(--foreground));
  border: 1px solid hsl(var(--border));
  border-radius: 16px;
  box-shadow: 0 18px 50px -18px rgba(0,0,0,.35);
  padding: 14px 16px;
  display: none;
}
.toast.show { display: block; }

.toast .title { font-weight: 800; font-family: 'Cairo', sans-serif; margin-bottom: 4px; }
.toast .desc { font-size: 14px; color: hsl(var(--muted-foreground)); }
.toast .close {
  position: absolute;
  left: 10px;
  top: 10px;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: hsl(var(--muted-foreground));
}

/* Simple spinner */
.spinner {
  width: 18px;
  height: 18px;
  border-radius: 9999px;
  border: 2px solid rgba(255,255,255,.45);
  border-top-color: rgba(255,255,255,1);
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }