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

@import "tailwindcss";

@theme {
  /* Core colors */
  --color-background: #0b040e;
  --color-foreground: #fdf8ff;

  --color-primary: #f16e00;
  --color-primary-foreground: #0b040e;

  --color-secondary: #64317e;
  --color-secondary-foreground: #fdf8ff;

  --color-accent: #ff8c2a;
  --color-accent-foreground: #0b040e;

  --color-muted: #1c0a24;
  --color-muted-foreground: #a385b0;

  --color-destructive: #e11d48;
  --color-destructive-foreground: #fdf8ff;

  --color-card: #16071d;
  --color-card-foreground: #fdf8ff;

  --color-popover: #1c0a24;
  --color-popover-foreground: #fdf8ff;

  --color-border: #3b184d;
  --color-input: #0f0514;
  --color-ring: #f16e00;

  /* Typography */
  --font-display: "Tajawal", sans-serif;
  --font-header: "Cairo", sans-serif;
  --font-body: "Tajawal", sans-serif;

  /* Radius */
  --radius-none: 0px;
  --radius-sm: 4px;
  --radius-base: 12px;
  --radius-lg: 24px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-card: 0 20px 40px -10px rgba(11, 4, 14, 0.8),
    inset 0 1px 1px rgba(253, 248, 255, 0.05);
  --shadow-card-sm: 0 10px 20px -5px rgba(11, 4, 14, 0.6);
  --shadow-card-lg: 0 40px 80px -20px rgba(11, 4, 14, 0.9),
    inset 0 1px 1px rgba(253, 248, 255, 0.05);
  --shadow-glow: 0 0 20px 0px rgba(241, 110, 0, 0.4);
  --shadow-cta: 0 0 30px 0px rgba(241, 110, 0, 0.5),
    inset 0 2px 4px rgba(255, 255, 255, 0.3);

  /* Animations */
  --animate-float-glow: float-glow 15s ease-in-out infinite;
  --animate-pulse-ring: pulse-ring 2s ease-out infinite;

  /* Transitions */
  --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 700ms cubic-bezier(0.22, 1, 0.36, 1);
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

@layer base {
  :root {
    /* shadcn/ui tokens (direct values, no hsl(var(...))) */
    --background: #0b040e;
    --foreground: #fdf8ff;

    --card: #16071d;
    --card-foreground: #fdf8ff;

    --popover: #1c0a24;
    --popover-foreground: #fdf8ff;

    --primary: #f16e00;
    --primary-foreground: #0b040e;

    --secondary: #64317e;
    --secondary-foreground: #fdf8ff;

    --muted: #1c0a24;
    --muted-foreground: #a385b0;

    --accent: #ff8c2a;
    --accent-foreground: #0b040e;

    --destructive: #e11d48;
    --destructive-foreground: #fdf8ff;

    --border: #3b184d;
    --input: #0f0514;
    --ring: #f16e00;

    --radius: 24px;

    /* Non-Tailwind design vars */
    --text-shadow-display: 0 0 30px rgba(253, 248, 255, 0.2);

    --bg-grain-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    --bg-ambient-glow: radial-gradient(
        circle at 20% 30%,
        rgba(100, 49, 126, 0.4) 0%,
        transparent 50%
      ),
      radial-gradient(
        circle at 80% 70%,
        rgba(241, 110, 0, 0.15) 0%,
        transparent 40%
      );
  }

  * {
    border-color: theme(--color-border);
  }

  html {
    color-scheme: dark;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    font-family: theme(--font-body);
    scroll-behavior: smooth;
  }

  body {
    margin: 0;
    min-height: 100vh;
    background-color: theme(--color-background);
    color: theme(--color-foreground);
    font-family: theme(--font-body);
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* Default RTL behavior for Arabic portal */
  [dir="rtl"] body,
  body[dir="rtl"] {
    direction: rtl;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  ::selection {
    background: rgba(241, 110, 0, 0.25);
    color: theme(--color-foreground);
  }

  :focus-visible {
    outline: none;
    box-shadow: 0 0 20px 0px rgba(241, 110, 0, 0.6);
    border-color: transparent;
  }

  /* Scrollbar */
  * {
    scrollbar-width: thin;
    scrollbar-color: rgba(241, 110, 0, 0.35) rgba(22, 7, 29, 0.65);
  }

  *::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  *::-webkit-scrollbar-track {
    background: rgba(22, 7, 29, 0.65);
  }

  *::-webkit-scrollbar-thumb {
    background: rgba(241, 110, 0, 0.35);
    border-radius: 9999px;
    border: 2px solid rgba(22, 7, 29, 0.65);
  }

  *::-webkit-scrollbar-thumb:hover {
    background: rgba(241, 110, 0, 0.5);
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    ::before,
    ::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

@keyframes float-glow {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.15;
  }
  50% {
    transform: translate(-2%, 3%) scale(1.05);
    opacity: 0.25;
  }
}

@keyframes pulse-ring {
  0% {
    box-shadow: 0 0 0 0 rgba(241, 110, 0, 0.4);
  }
  70% {
    box-shadow: 0 0 0 15px rgba(241, 110, 0, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(241, 110, 0, 0);
  }
}

@layer utilities {
  /* Background layers */
  .bg-ambient-void {
    background-color: theme(--color-background);
  }

  .bg-ambient-glow {
    background: var(--bg-ambient-glow);
  }

  .bg-space-grain {
    background-image: var(--bg-grain-image);
    background-repeat: repeat;
    background-size: 200px 200px;
  }

  /* Optional overlays (opacity caps in DS) */
  .overlay-grain {
    opacity: 0.03;
    pointer-events: none;
  }

  .overlay-glow {
    opacity: 0.15;
    pointer-events: none;
  }

  .overlay-scanlines {
    opacity: 0.04;
    pointer-events: none;
    background-image: linear-gradient(
      to bottom,
      rgba(253, 248, 255, 0.08) 1px,
      transparent 1px
    );
    background-size: 100% 6px;
  }

  .overlay-grid {
    opacity: 0.06;
    pointer-events: none;
    background-image: linear-gradient(
        to right,
        rgba(253, 248, 255, 0.08) 1px,
        transparent 1px
      ),
      linear-gradient(
        to bottom,
        rgba(253, 248, 255, 0.08) 1px,
        transparent 1px
      );
    background-size: 48px 48px;
    background-position: center;
    mask-image: radial-gradient(circle at center, black 0%, transparent 70%);
  }

  /* Typography helpers */
  .text-display {
    font-family: theme(--font-display);
    text-shadow: var(--text-shadow-display);
  }

  /* Card presets */
  .card-glass {
    background-color: rgba(22, 7, 29, 0.4);
    backdrop-filter: blur(48px);
    -webkit-backdrop-filter: blur(48px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: theme(--radius-lg);
    box-shadow: var(--shadow-card-lg);
  }

  .card-group {
    background-color: rgba(28, 10, 36, 0.3);
    border: 1px solid rgba(59, 24, 77, 0.5);
    border-radius: 16px;
    box-shadow: var(--shadow-card-sm);
  }

  /* Input preset (if used as a className) */
  .input-mishwar {
    background-color: theme(--color-input);
    color: theme(--color-foreground);
    border: 0;
    border-radius: theme(--radius-full);
    padding: 1rem 1.5rem;
    text-align: right;
    font-size: 1rem;
    transition: all theme(--transition-base);
  }
  .input-mishwar::placeholder {
    color: theme(--color-muted-foreground);
  }
  .input-mishwar:focus {
    outline: none;
    box-shadow: var(--shadow-glow);
    background-color: rgba(15, 5, 20, 0.8);
  }

  /* Icon container per DS */
  .icon-bubble {
    width: 3rem;
    height: 3rem;
    border-radius: theme(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(100, 49, 126, 0.1);
    color: theme(--color-primary);
    box-shadow: inset 0 0 10px rgba(100, 49, 126, 0.2);
  }
}