@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% 4%;
    --foreground: 0 0% 99%;

    --card: 0 0% 6%;
    --card-foreground: 0 0% 97%;

    --popover: 0 0% 6%;
    --popover-foreground: 0 0% 97%;

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

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

    /* Muted dark greys - improved contrast */
    --muted: 0 0% 10%;
    --muted-foreground: 0 0% 75%;

    /* 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% 5%;
    --card-light: 0 0% 98%;
    --card-foreground-light: 0 0% 8%;
    --muted-light: 0 0% 95%;
    --muted-foreground-light: 0 0% 30%;

    /* 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 h1,
  .light-section h2,
  .light-section h3,
  .light-section h4,
  .light-section h5,
  .light-section h6 {
    color: hsl(var(--foreground-light)) !important;
    font-weight: 700;
  }

  .light-section p {
    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)) !important;
  }

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

  /* Service cards feature lists need darker text */
  .light-section .industrial-card ul li {
    color: hsl(var(--foreground-light)) !important;
  }

  .light-section .industrial-card .text-sm {
    color: hsl(var(--foreground-light)) !important;
  }

  /* 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);
  }

  /* Jagged/organic divider styles */
  .jagged-divider-top {
    position: relative;
  }

  .jagged-divider-top::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 120px;
    background: hsl(var(--background-light));
    clip-path: polygon(0 0, 12% 30%, 25% 10%, 38% 40%, 50% 20%, 62% 45%, 75% 25%, 88% 35%, 100% 15%, 100% 0);
    z-index: 10;
    border: none;
  }

  .jagged-divider-bottom {
    position: relative;
    overflow: hidden;
  }

  .jagged-divider-bottom::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100px;
    background: white;
    clip-path: polygon(0 100%, 12% 70%, 25% 90%, 38% 60%, 50% 80%, 62% 55%, 75% 75%, 88% 65%, 100% 85%, 100% 100%);
    z-index: 10;
    transform: translateZ(0);
    will-change: transform;
  }

  .jagged-divider-light-top {
    position: relative;
  }

  .jagged-divider-light-top::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: hsl(var(--background-light));
    clip-path: polygon(0 0, 15% 25%, 30% 5%, 45% 35%, 60% 15%, 75% 40%, 90% 20%, 100% 30%, 100% 0);
    z-index: 10;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  }

  .jagged-divider-light-bottom {
    position: relative;
  }

  .jagged-divider-light-bottom::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: hsl(var(--background-light));
    clip-path: polygon(0 100%, 15% 75%, 30% 95%, 45% 65%, 60% 85%, 75% 60%, 90% 80%, 100% 70%, 100% 100%);
    z-index: 10;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  }

  /* Clean jagged divider for Employee Notice page */
  .jagged-divider-clean {
    position: relative;
  }

  .jagged-divider-clean::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(180deg, hsl(var(--background)) 0%, hsl(var(--background-light)) 100%);
    clip-path: polygon(0 90%, 33% 90%, 36% 85%, 39% 80%, 42% 75%, 45% 70%, 47% 70%, 48% 70%, 49% 70%, 50% 70%, 51% 70%, 52% 70%, 53% 70%, 55% 70%, 58% 75%, 61% 80%, 64% 85%, 67% 90%, 70% 90%, 100% 90%);
    z-index: 10;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.3);
  }

  /* 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%);
  }

  /* Enhanced contrast for dark sections */
  .dark-section {
    background: hsl(var(--background)) !important;
  }

  .dark-section h1,
  .dark-section h2,
  .dark-section h3,
  .dark-section h4,
  .dark-section h5,
  .dark-section h6 {
    color: white !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8) !important;
  }

  .dark-section p,
  .dark-section span:not(.text-primary):not(.text-glow) {
    color: #e5e7eb !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;
  }

  .dark-section .text-muted-foreground {
    color: #d1d5db !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;
  }
}

@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;
  }
}
