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

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Roboto:wght@300;400;500;700&display=swap');

/* Ensure font-display: swap for all fonts */
@font-face {
  font-family: 'Playfair Display';
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  font-display: swap;
}

@layer base {
  :root {
    /* Graphite-Amber Color Scheme */
    --background: 0 0% 98%;
    --foreground: 220 15% 15%;

    --card: 0 0% 100%;
    --card-foreground: 220 15% 15%;

    --popover: 0 0% 100%;
    --popover-foreground: 220 15% 15%;

    /* Graphite Primary */
    --primary: 220 15% 20%;
    --primary-foreground: 0 0% 98%;

    /* Secondary - Lighter Graphite */
    --secondary: 220 10% 92%;
    --secondary-foreground: 220 15% 20%;

    --muted: 220 10% 96%;
    --muted-foreground: 220 10% 45%;

    /* Amber Accent */
    --accent: 38 92% 50%;
    --accent-foreground: 220 15% 10%;

    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 98%;

    --border: 220 13% 88%;
    --input: 220 13% 88%;
    --ring: 38 92% 50%;

    --radius: 0.5rem;

    /* Custom Colors */
    --graphite-dark: 220 15% 12%;
    --graphite: 220 15% 20%;
    --graphite-light: 220 10% 35%;
    --graphite-muted: 220 10% 55%;
    
    --amber: 38 92% 50%;
    --amber-light: 38 92% 60%;
    --amber-dark: 38 92% 40%;
    --amber-glow: 38 100% 65%;

    /* Gradients */
    --gradient-hero: linear-gradient(135deg, hsl(220 15% 12% / 0.95) 0%, hsl(220 15% 20% / 0.85) 100%);
    --gradient-amber: linear-gradient(135deg, hsl(38 92% 50%) 0%, hsl(38 92% 60%) 100%);
    --gradient-card: linear-gradient(180deg, hsl(0 0% 100%) 0%, hsl(220 10% 98%) 100%);

    /* Shadows */
    --shadow-sm: 0 1px 2px hsl(220 15% 20% / 0.05);
    --shadow-md: 0 4px 6px -1px hsl(220 15% 20% / 0.1), 0 2px 4px -2px hsl(220 15% 20% / 0.1);
    --shadow-lg: 0 10px 15px -3px hsl(220 15% 20% / 0.1), 0 4px 6px -4px hsl(220 15% 20% / 0.1);
    --shadow-xl: 0 20px 25px -5px hsl(220 15% 20% / 0.1), 0 8px 10px -6px hsl(220 15% 20% / 0.1);
    --shadow-amber: 0 4px 14px hsl(38 92% 50% / 0.4);

    /* Sidebar */
    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 220 15% 20%;
    --sidebar-primary: 220 15% 20%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 38 92% 50%;
    --sidebar-accent-foreground: 220 15% 10%;
    --sidebar-border: 220 13% 88%;
    --sidebar-ring: 38 92% 50%;
  }

  .dark {
    --background: 220 15% 8%;
    --foreground: 0 0% 95%;

    --card: 220 15% 12%;
    --card-foreground: 0 0% 95%;

    --popover: 220 15% 12%;
    --popover-foreground: 0 0% 95%;

    --primary: 38 92% 50%;
    --primary-foreground: 220 15% 10%;

    --secondary: 220 15% 18%;
    --secondary-foreground: 0 0% 95%;

    --muted: 220 15% 18%;
    --muted-foreground: 220 10% 60%;

    --accent: 38 92% 50%;
    --accent-foreground: 220 15% 10%;

    --destructive: 0 62% 30%;
    --destructive-foreground: 0 0% 95%;

    --border: 220 15% 20%;
    --input: 220 15% 20%;
    --ring: 38 92% 50%;

    --sidebar-background: 220 15% 10%;
    --sidebar-foreground: 0 0% 95%;
    --sidebar-primary: 38 92% 50%;
    --sidebar-primary-foreground: 220 15% 10%;
    --sidebar-accent: 220 15% 18%;
    --sidebar-accent-foreground: 0 0% 95%;
    --sidebar-border: 220 15% 20%;
    --sidebar-ring: 38 92% 50%;
  }
}

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

  html {
    scroll-behavior: smooth;
  }

  body {
    @apply bg-background text-foreground font-body antialiased;
  }

  h1, h2, h3, h4, h5, h6 {
    @apply font-heading;
  }
}

@layer components {
  .text-gradient-amber {
    @apply bg-gradient-to-r from-amber to-amber-light bg-clip-text text-transparent;
  }

  .btn-amber {
    @apply bg-gradient-to-r from-amber to-amber-light text-accent-foreground font-semibold 
           shadow-amber hover:shadow-lg transition-all duration-300 hover:scale-105;
  }

  .card-elevated {
    @apply bg-card rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300;
  }

  .section-padding {
    @apply py-16 md:py-24 lg:py-32;
  }

  .container-custom {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
  }
}

@layer utilities {
  .parallax {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .text-shadow {
    text-shadow: 0 2px 4px hsl(220 15% 12% / 0.5);
  }

  .animate-float {
    animation: float 6s ease-in-out infinite;
  }

  @keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
  }

  .animate-pulse-amber {
    animation: pulse-amber 2s ease-in-out infinite;
  }

  @keyframes pulse-amber {
    0%, 100% { box-shadow: 0 0 0 0 hsl(38 92% 50% / 0.4); }
    50% { box-shadow: 0 0 0 15px hsl(38 92% 50% / 0); }
  }
}