@tailwind base;
@tailwind components;
@tailwind utilities;

/* ──────────────────────────────────────────────────────────────
   Wasiyyah Vault — Premium Design System
   Aesthetic: Refined Islamic Fintech — warm neutrals, emerald
   accents, gold highlights. Benchmarked against Wealthsimple,
   Mercury, Ramp, and Carta for wealthtech conformity.
   ────────────────────────────────────────────────────────────── */

@layer base {
  :root {
    /* Surface hierarchy */
    --background: 40 20% 99%;
    --foreground: 200 25% 8%;
    --card: 0 0% 100%;
    --card-foreground: 200 25% 8%;
    --popover: 0 0% 100%;
    --popover-foreground: 200 25% 8%;

    /* Brand: Emerald + Gold */
    --primary: 160 84% 24%;
    --primary-foreground: 40 20% 99%;
    --secondary: 40 30% 96%;
    --secondary-foreground: 200 25% 12%;
    --accent: 43 96% 56%;
    --accent-foreground: 200 25% 8%;

    /* Semantic */
    --muted: 40 15% 95%;
    --muted-foreground: 200 10% 46%;
    --destructive: 0 72% 51%;
    --destructive-foreground: 0 0% 100%;

    /* Borders & inputs */
    --border: 40 15% 90%;
    --input: 40 15% 87%;
    --ring: 160 84% 24%;
    --radius: 0.625rem;

    /* Extended semantic tokens */
    --success: 160 84% 24%;
    --success-foreground: 40 20% 99%;
    --warning: 38 92% 50%;
    --warning-foreground: 200 25% 8%;
    --info: 210 92% 45%;
    --info-foreground: 0 0% 100%;

    /* Surface elevations */
    --surface-sunken: 40 15% 97%;
    --surface-raised: 0 0% 100%;
    --surface-overlay: 0 0% 100%;

    /* Chart palette */
    --chart-1: 160 84% 24%;
    --chart-2: 43 96% 56%;
    --chart-3: 210 92% 45%;
    --chart-4: 280 65% 55%;
    --chart-5: 0 72% 51%;
    --chart-6: 200 25% 65%;

    /* Shadows — warm undertone for light mode */
    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.03);
    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.04), 0 1px 2px -1px rgb(0 0 0 / 0.04);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.04);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.06), 0 4px 6px -4px rgb(0 0 0 / 0.04);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.08), 0 8px 10px -6px rgb(0 0 0 / 0.04);
    --shadow-glow: 0 0 20px rgb(12 120 72 / 0.12);

    /* Sidebar */
    --sidebar-width: 16.5rem;
    --sidebar-collapsed: 4.5rem;
  }

  .dark {
    --background: 210 20% 6%;
    --foreground: 40 15% 95%;
    --card: 210 18% 9%;
    --card-foreground: 40 15% 95%;
    --popover: 210 18% 9%;
    --popover-foreground: 40 15% 95%;

    --primary: 160 72% 40%;
    --primary-foreground: 210 20% 6%;
    --secondary: 210 15% 14%;
    --secondary-foreground: 40 15% 90%;
    --accent: 43 80% 50%;
    --accent-foreground: 210 20% 6%;

    --muted: 210 15% 14%;
    --muted-foreground: 210 10% 55%;
    --destructive: 0 62% 45%;
    --destructive-foreground: 0 0% 100%;

    --border: 210 15% 16%;
    --input: 210 15% 18%;
    --ring: 160 72% 40%;

    --success: 160 72% 40%;
    --success-foreground: 210 20% 6%;
    --warning: 38 80% 50%;
    --warning-foreground: 210 20% 6%;
    --info: 210 80% 55%;
    --info-foreground: 0 0% 100%;

    --surface-sunken: 210 20% 5%;
    --surface-raised: 210 15% 12%;
    --surface-overlay: 210 15% 12%;

    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.2);
    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.25), 0 1px 2px -1px rgb(0 0 0 / 0.25);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.3);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.35), 0 4px 6px -4px rgb(0 0 0 / 0.35);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.4), 0 8px 10px -6px rgb(0 0 0 / 0.4);
    --shadow-glow: 0 0 20px rgb(34 197 94 / 0.2);
  }
}

@layer base {
  * {
    @apply border-border;
  }

  html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    scroll-behavior: smooth;
  }

  body {
    @apply bg-background text-foreground;
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  }

  /* Premium focus ring — thinner, more refined */
  :focus-visible {
    @apply outline-none ring-2 ring-ring/40 ring-offset-2 ring-offset-background;
  }

  /* Selection color */
  ::selection {
    @apply bg-primary/15 text-foreground;
  }

  /* Premium input focus state */
  input:focus-visible,
  textarea:focus-visible,
  select:focus-visible {
    @apply ring-2 ring-primary/30 border-primary/50;
    box-shadow: 0 0 0 3px hsl(var(--primary) / 0.08);
  }
}

/* ──────────────────────────────────────────────────────────────
   Animation keyframes
   ────────────────────────────────────────────────────────────── */
@layer utilities {
  /* Skeleton shimmer */
  @keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
  }

  .animate-shimmer {
    animation: shimmer 2s ease-in-out infinite;
    background: linear-gradient(
      90deg,
      hsl(var(--muted)) 25%,
      hsl(var(--muted-foreground) / 0.06) 50%,
      hsl(var(--muted)) 75%
    );
    background-size: 200% 100%;
  }

  /* Fade up entrance */
  @keyframes fade-up {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .animate-fade-up {
    animation: fade-up 0.5s ease-out forwards;
    opacity: 0;
  }

  /* Fade in */
  @keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  .animate-fade-in {
    animation: fade-in 0.4s ease-out forwards;
    opacity: 0;
  }

  /* Scale in */
  @keyframes scale-in {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
  }

  .animate-scale-in {
    animation: scale-in 0.3s ease-out forwards;
    opacity: 0;
  }

  /* Slide in from left */
  @keyframes slide-in-left {
    from { opacity: 0; transform: translateX(-16px); }
    to { opacity: 1; transform: translateX(0); }
  }

  .animate-slide-in-left {
    animation: slide-in-left 0.4s ease-out forwards;
    opacity: 0;
  }

  /* Count up number ticker */
  @keyframes count-up {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .animate-count-up {
    animation: count-up 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    opacity: 0;
  }

  /* Stagger delays */
  .delay-75 { animation-delay: 75ms; }
  .delay-150 { animation-delay: 150ms; }
  .delay-225 { animation-delay: 225ms; }
  .delay-300 { animation-delay: 300ms; }
  .delay-375 { animation-delay: 375ms; }
  .delay-450 { animation-delay: 450ms; }
  .delay-600 { animation-delay: 600ms; }

  /* Gradient text */
  .text-gradient {
    @apply bg-clip-text text-transparent;
    background-image: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--accent)));
  }

  /* Glass effect */
  .glass {
    @apply bg-white/70 dark:bg-black/40 backdrop-blur-xl;
  }

  /* Premium card hover — Mercury-style subtle lift */
  .card-hover {
    @apply transition-all duration-300 ease-out;
  }

  .card-hover:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
  }

  /* Geometric pattern overlay */
  .pattern-islamic {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%2316a34a' fill-opacity='0.03'%3E%3Cpath d='M30 0L60 30L30 60L0 30z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  }

  /* Noise texture */
  .texture-noise::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.015'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 1;
  }

  /* ──────────────────────────────────────────────────────────────
     Marketing — Obsidian Protocol Utilities
     ────────────────────────────────────────────────────────────── */

  /* Luminous gradient text */
  .text-glow-emerald {
    background: linear-gradient(135deg, #00e68a, #00d4ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  /* ──────────────────────────────────────────────────────────────
     Scroll-Triggered Reveal Animations (CSS-only)
     Intersection Observer-free, uses scroll-driven animation
     with fallback. Sections use .reveal class.
     ────────────────────────────────────────────────────────────── */

  @keyframes reveal-up {
    from {
      opacity: 0;
      transform: translateY(24px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .reveal {
    opacity: 0;
    animation: reveal-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-play-state: paused;
  }

  .reveal.revealed {
    animation-play-state: running;
  }

  /* Stagger children inside .reveal-stagger container */
  .reveal-stagger > *:nth-child(1) { animation-delay: 0ms; }
  .reveal-stagger > *:nth-child(2) { animation-delay: 80ms; }
  .reveal-stagger > *:nth-child(3) { animation-delay: 160ms; }
  .reveal-stagger > *:nth-child(4) { animation-delay: 240ms; }
  .reveal-stagger > *:nth-child(5) { animation-delay: 320ms; }
  .reveal-stagger > *:nth-child(6) { animation-delay: 400ms; }
  .reveal-stagger > *:nth-child(7) { animation-delay: 480ms; }
}

/* ──────────────────────────────────────────────────────────────
   Marketing — Theme-Aware Utilities (outside @layer for
   dynamic class toggling)
   ────────────────────────────────────────────────────────────── */

/* Glass morphism card — theme-aware */
.glass-card {
  background-color: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-card:hover {
  box-shadow: var(--shadow-md);
  border-color: hsl(var(--ring) / 0.25);
  transform: translateY(-1px);
}

.dark .glass-card {
  background-color: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: none;
}

.dark .glass-card:hover {
  background-color: rgba(255, 255, 255, 0.04);
  border-color: hsl(var(--ring) / 0.2);
  box-shadow: 0 0 40px rgba(0, 230, 138, 0.04);
  transform: translateY(-1px);
}

/* Glow CTA button — premium gradient with refined glow */
.btn-glow {
  background: linear-gradient(135deg, #00c853, #00e68a);
  box-shadow: 0 0 20px rgba(0, 230, 138, 0.2), 0 0 60px rgba(0, 230, 138, 0.06);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-glow:hover {
  box-shadow: 0 0 28px rgba(0, 230, 138, 0.35), 0 0 80px rgba(0, 230, 138, 0.1);
  transform: translateY(-1px);
  filter: brightness(1.05);
}

.btn-glow:active {
  transform: translateY(0);
  filter: brightness(0.98);
  box-shadow: 0 0 16px rgba(0, 230, 138, 0.2);
}

/* Grid overlay — theme-aware */
.grid-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 120, 60, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 120, 60, 0.04) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%);
}

.dark .grid-overlay::before {
  background-image:
    linear-gradient(rgba(0, 230, 138, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 230, 138, 0.025) 1px, transparent 1px);
}

/* Accent separator — theme-aware */
.line-glow {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 120, 60, 0.15), transparent);
}

.dark .line-glow {
  background: linear-gradient(90deg, transparent, rgba(0, 230, 138, 0.25), transparent);
}

/* ──────────────────────────────────────────────────────────────
   Scrollbar styling
   ────────────────────────────────────────────────────────────── */
@layer base {
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  ::-webkit-scrollbar-track {
    background: transparent;
  }

  ::-webkit-scrollbar-thumb {
    @apply bg-border rounded-full;
  }

  ::-webkit-scrollbar-thumb:hover {
    @apply bg-muted-foreground/30;
  }
}