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

/* Definition of the design system. All colors, gradients, fonts, etc should be defined here. 
All colors MUST be HSL.
*/

@layer base {
  :root {
    /* Core black and orange luxury industrial theme */
    --background: 0 0% 6%;
    --foreground: 0 0% 98%;

    --card: 0 0% 8%;
    --card-foreground: 0 0% 95%;

    --popover: 0 0% 8%;
    --popover-foreground: 0 0% 95%;

    /* Orange primary - industrial glow */
    --primary: 24 100% 50%;
    --primary-foreground: 0 0% 98%;
    --primary-glow: 24 100% 60%;

    /* Steel grey secondary */
    --secondary: 210 15% 15%;
    --secondary-foreground: 0 0% 90%;

    /* Muted dark greys */
    --muted: 0 0% 12%;
    --muted-foreground: 0 0% 70%;

    /* Orange accent */
    --accent: 24 100% 50%;
    --accent-foreground: 0 0% 10%;

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

    /* Dark borders and inputs */
    --border: 0 0% 20%;
    --input: 0 0% 12%;
    --ring: 24 100% 50%;

    --radius: 0.5rem;

    /* Light theme variants for white sections */
    --background-light: 0 0% 100%;
    --foreground-light: 0 0% 10%;
    --card-light: 0 0% 98%;
    --card-foreground-light: 0 0% 15%;
    --muted-light: 0 0% 95%;
    --muted-foreground-light: 0 0% 40%;

    /* Custom luxury industrial tokens */
    --industrial-orange: 24 100% 50%;
    --industrial-orange-glow: 24 100% 60%;
    --industrial-orange-dark: 24 100% 40%;
    --charcoal: 0 0% 8%;
    --charcoal-light: 0 0% 12%;
    --steel: 210 15% 25%;
    --steel-light: 210 15% 35%;

    /* Gradients */
    --gradient-orange: linear-gradient(135deg, hsl(var(--industrial-orange)), hsl(var(--industrial-orange-glow)));
    --gradient-dark: linear-gradient(180deg, hsl(var(--background)), hsl(var(--charcoal)));
    --gradient-energy: linear-gradient(90deg, transparent, hsl(var(--industrial-orange) / 0.3), transparent);

    /* Shadows and glows */
    --shadow-orange-glow: 0 0 40px hsl(var(--industrial-orange) / 0.3);
    --shadow-orange-intense: 0 0 60px hsl(var(--industrial-orange) / 0.5);
    --shadow-dark: 0 10px 30px hsl(0 0% 0% / 0.5);

    /* Animations */
    --transition-smooth: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-glow: box-shadow 0.3s ease, transform 0.3s ease;

    --sidebar-background: 0 0% 98%;

    --sidebar-foreground: 240 5.3% 26.1%;

    --sidebar-primary: 240 5.9% 10%;

    --sidebar-primary-foreground: 0 0% 98%;

    --sidebar-accent: 240 4.8% 95.9%;

    --sidebar-accent-foreground: 240 5.9% 10%;

    --sidebar-border: 220 13% 91%;

    --sidebar-ring: 217.2 91.2% 59.8%;
  }

  .dark {
    /* Dark mode uses same colors - we're already dark themed */
    --background: 0 0% 6%;
    --foreground: 0 0% 98%;
    --card: 0 0% 8%;
    --card-foreground: 0 0% 95%;
    --popover: 0 0% 8%;
    --popover-foreground: 0 0% 95%;
    --primary: 24 100% 50%;
    --primary-foreground: 0 0% 98%;
    --secondary: 210 15% 15%;
    --secondary-foreground: 0 0% 90%;
    --muted: 0 0% 12%;
    --muted-foreground: 0 0% 70%;
    --accent: 24 100% 50%;
    --accent-foreground: 0 0% 10%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 0 0% 20%;
    --input: 0 0% 12%;
    --ring: 24 100% 50%;

    --sidebar-background: 0 0% 8%;
    --sidebar-foreground: 0 0% 95%;
    --sidebar-primary: 24 100% 50%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 0 0% 12%;
    --sidebar-accent-foreground: 0 0% 90%;
    --sidebar-border: 0 0% 20%;
    --sidebar-ring: 24 100% 50%;
  }
}

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

  body {
    @apply bg-background text-foreground font-sans;
    font-family: 'Montserrat', system-ui, sans-serif;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', system-ui, sans-serif;
    font-weight: 700;
  }
}

@layer components {
  /* Light theme classes */
  .light-section {
    background: hsl(var(--background-light));
    color: hsl(var(--foreground-light));
  }

  .light-section .card {
    background: hsl(var(--card-light));
    color: hsl(var(--card-foreground-light));
    border-color: hsl(0 0% 90%);
  }

  .light-section .text-muted-foreground {
    color: hsl(var(--muted-foreground-light));
  }

  /* Orange glow button variant */
  .btn-orange-glow {
    @apply bg-primary text-primary-foreground font-semibold px-8 py-4 rounded-lg;
    @apply transition-all duration-300 ease-out;
    @apply hover:shadow-[var(--shadow-orange-glow)] hover:scale-105;
    @apply border border-primary/30;
  }

  /* Parallax container */
  .parallax-container {
    transform-style: preserve-3d;
    perspective: 1000px;
  }

  .parallax-element {
    will-change: transform;
  }

  /* Diagonal cut sections */
  .diagonal-cut-bottom {
    position: relative;
  }

  .diagonal-cut-bottom::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: hsl(var(--background));
    clip-path: polygon(0 50%, 100% 100%, 0 100%);
  }

  .diagonal-cut-top {
    position: relative;
    padding-top: 100px;
  }

  .diagonal-cut-top::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: hsl(var(--background-light));
    clip-path: polygon(0 0, 100% 50%, 100% 0);
  }

  /* Energy flow animation */
  .energy-flow {
    @apply relative overflow-hidden;
  }
  
  .energy-flow::before {
    content: '';
    @apply absolute inset-0 bg-gradient-to-r from-transparent via-primary/20 to-transparent;
    @apply -translate-x-full animate-[slideRight_3s_ease-in-out_infinite];
  }

  /* Industrial card hover effect */
  .industrial-card {
    @apply bg-card border border-border rounded-lg p-6;
    @apply transition-all duration-300 ease-out;
    @apply hover:border-primary/50 hover:shadow-[var(--shadow-orange-glow)];
    @apply hover:-translate-y-1;
  }

  /* Light theme industrial card */
  .light-section .industrial-card {
    @apply bg-white border-gray-200;
    @apply hover:border-primary/50 hover:shadow-[var(--shadow-orange-glow)];
  }

  /* Glowing text */
  .text-glow {
    @apply text-primary;
    text-shadow: 0 0 20px hsl(var(--primary) / 0.5);
  }

  /* Hero overlay */
  .hero-overlay {
    @apply absolute inset-0;
    background: linear-gradient(135deg, 
      hsl(var(--background) / 0.9) 0%, 
      hsl(var(--background) / 0.7) 50%, 
      hsl(var(--primary) / 0.1) 100%);
  }
}

@layer utilities {
  /* Custom animations */
  @keyframes slideRight {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
  }
  
  @keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 20px hsl(var(--primary) / 0.3); }
    50% { box-shadow: 0 0 40px hsl(var(--primary) / 0.6); }
  }

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