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

@layer base {
  :root {
    /* ── Radix / shadcn CSS vars (light mode defaults) ── */
    --background:   0 0% 98%;          /* #FBFBFA */
    --foreground:   0 0% 7%;           /* #111111 */
    --card:         0 0% 100%;
    --card-foreground: 0 0% 7%;
    --popover:      0 0% 100%;
    --popover-foreground: 0 0% 7%;
    --primary:      150 90% 28%;       /* #098E4B brand green */
    --primary-foreground: 0 0% 100%;
    --secondary:    0 0% 96%;
    --secondary-foreground: 0 0% 7%;
    --muted:        0 0% 95%;
    --muted-foreground: 0 0% 40%;      /* #666666 */
    --accent:       150 90% 28%;
    --accent-foreground: 0 0% 100%;
    --destructive:  356 82% 45%;       /* #C41B27 brand red */
    --destructive-foreground: 0 0% 98%;
    --border:       60 5% 91%;         /* #E8E8E6 */
    --input:        60 5% 91%;
    --ring:         150 90% 28%;
    --radius:       0.75rem;

    /* ── Wild Dubai Legacy Tokens ── */
    --sandy:        #C5A880;
    --sandy-light:  #fedeb2;
    --sandy-dark:   #725b38;
    --navy:         #0d1c32;
    --navy-light:   #1a3050;
    --cream:        #f7f9fb;

    /* ── Wild Dubai Brand System ── */
    --brand-green:       #098E4B;
    --brand-green-light: #E8F5EE;
    --brand-red:         #C41B27;
    --brand-red-light:   #FDECEA;
    --brand-dark:        #111111;
    --brand-bg:          #FBFBFA;
    --brand-surface:     #FFFFFF;
    --brand-border:      #E8E8E6;
    --brand-muted:       #666666;

    /* ── Legacy CSS var aliases ── */
    --brand-emerald: #098E4B;
    --brand-crimson: #C41B27;
    --bg-dark:       #111111;
    --header-height: 72px;
    --header-height-md: 80px;
  }
}

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

  html {
    scroll-behavior: smooth;
  }

  body {
    background-color: var(--brand-bg);
    color: var(--brand-dark);
    @apply antialiased;
    font-feature-settings: "rlig" 1, "calt" 1;
  }
}

/* ─── Wild Dubai Premium Utilities ─────────────────────────── */
@layer utilities {
  /* ── Brand surface tokens ── */
  .bg-surface        { background-color: var(--brand-surface); }
  .bg-page           { background-color: var(--brand-bg); }
  .text-on-surface   { color: var(--brand-dark); }
  .font-body-md      { font-family: var(--font-inter), sans-serif; font-size: 1rem; line-height: 1.5; }

  /* ── Brand colors ── */
  .text-brand-green  { color: var(--brand-green); }
  .text-brand-red    { color: var(--brand-red); }
  .text-brand-dark   { color: var(--brand-dark); }
  .text-brand-muted  { color: var(--brand-muted); }
  .bg-brand-green    { background-color: var(--brand-green); }
  .bg-brand-green-light { background-color: var(--brand-green-light); }
  .bg-brand-red      { background-color: var(--brand-red); }
  .bg-brand-red-light { background-color: var(--brand-red-light); }
  .border-brand-green { border-color: var(--brand-green); }
  .border-brand-border { border-color: var(--brand-border); }

  /* ── Legacy sandy/navy utilities ── */
  .text-sandy        { color: #C5A880; }
  .text-sandy-dark   { color: #725b38; }
  .text-navy         { color: #0d1c32; }
  .bg-sandy          { background-color: #C5A880; }
  .bg-navy           { background-color: #0d1c32; }
  .bg-cream          { background-color: #f7f9fb; }
  .border-sandy      { border-color: #C5A880; }

  /* ── Legacy gold utilities – kept for dashboard / listing pages ── */
  .text-gold    { color: hsl(45 93% 47%); }
  .bg-gold      { background-color: hsl(45 93% 47%); }
  .border-gold  { border-color: hsl(45 93% 47%); }
  .gradient-gold { background: linear-gradient(135deg, #D4AF37 0%, #B8960C 100%); }

  /* ── Glass utilities ── */
  .glass-dark {
    background: rgba(10, 10, 10, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }
  .glass-card {
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(232, 232, 230, 0.8);
  }
  .glass-light {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(232, 232, 230, 0.6);
  }

  /* ── Hover lift ── */
  .hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  .hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(9, 142, 75, 0.08);
  }

  /* ── Text shadow (for dark image overlays only) ── */
  .text-shadow    { text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
  .text-shadow-sm { text-shadow: 0 1px 4px rgba(0,0,0,0.35); }

  /* ── Buttons ── */
  .btn-primary {
    @apply px-6 py-3 bg-[#098E4B] text-white font-bold uppercase tracking-wide text-sm;
    @apply hover:bg-[#077a3f] transition-colors duration-200;
  }
  .btn-secondary {
    @apply px-6 py-3 bg-white text-[#111111] font-semibold border border-[#E8E8E6];
    @apply hover:border-[#098E4B] hover:text-[#098E4B] transition-all duration-200;
  }
  .btn-outline-brand {
    @apply px-6 py-3 border border-[#098E4B] text-[#098E4B] font-bold uppercase tracking-wide text-sm;
    @apply hover:bg-[#098E4B] hover:text-white transition-all duration-200;
  }
}

/* ─── Custom Scrollbar ──────────────────────────────────────── */
::-webkit-scrollbar       { width: 6px; }
::-webkit-scrollbar-track { background: #FBFBFA; }
::-webkit-scrollbar-thumb { background: #098E4B; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #077a3f; }

/* ─── Keyframe Animations ───────────────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.animate-fade-in-up  { animation: fadeInUp  0.6s ease-out forwards; }
.animate-fade-in     { animation: fadeIn    0.4s ease-out forwards; }
.animate-slide-down  { animation: slideDown 0.25s ease-out forwards; }

/* ─── Hero gradient overlay (dark photo backgrounds) ───────── */
.hero-bg {
  background: linear-gradient(
    to bottom,
    rgba(13, 28, 50, 0.55) 0%,
    rgba(13, 28, 50, 0.25) 40%,
    rgba(13, 28, 50, 0.65) 100%
  );
}

/* ─── Section divider ───────────────────────────────────────── */
.section-divider {
  border-top: 1px solid var(--brand-border);
}