@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 {
    /* Professional B2B palette - Navy, Orange, White */
    --background: 218 51% 12%;
    --foreground: 210 17% 98%;

    --card: 218 48% 15%;
    --card-foreground: 210 17% 98%;

    --popover: 218 48% 15%;
    --popover-foreground: 210 17% 98%;

    /* Warm orange for primary CTAs */
    --primary: 28 88% 56%;
    --primary-foreground: 0 0% 100%;

    /* Muted blue-gray for secondary elements */
    --secondary: 214 20% 35%;
    --secondary-foreground: 210 17% 98%;

    --muted: 214 15% 22%;
    --muted-foreground: 214 10% 60%;

    /* Light blue accent for highlights */
    --accent: 210 50% 55%;
    --accent-foreground: 0 0% 100%;
    
    /* Bright blue for CTAs */
    --cta-blue: 213 94% 55%;
    --cta-blue-foreground: 0 0% 100%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 100%;

    --border: 214 15% 25%;
    --input: 214 15% 25%;
    --ring: 28 88% 56%;

    --radius: 0.75rem;

    /* Gradients - Navy depth with subtle variation */
    --gradient-hero: linear-gradient(135deg, hsl(218 51% 12%) 0%, hsl(218 48% 8%) 100%);
    --gradient-subtle: linear-gradient(180deg, hsl(218 50% 14%) 0%, hsl(218 48% 10%) 100%);
    --gradient-depth: linear-gradient(to bottom, hsl(218 51% 12%) 0%, hsl(218 48% 8%) 100%);
  }

  .dark {
    --background: 218 51% 12%;
    --foreground: 210 17% 98%;

    --card: 218 48% 15%;
    --card-foreground: 210 17% 98%;

    --popover: 218 48% 15%;
    --popover-foreground: 210 17% 98%;

    --primary: 28 88% 56%;
    --primary-foreground: 0 0% 100%;

    --secondary: 214 20% 35%;
    --secondary-foreground: 210 17% 98%;

    --muted: 214 15% 22%;
    --muted-foreground: 214 10% 60%;

    --accent: 210 50% 55%;
    --accent-foreground: 0 0% 100%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 17% 98%;

    --border: 214 15% 25%;
    --input: 214 15% 25%;
    --ring: 28 88% 56%;
  }
}

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

  body {
    @apply bg-background text-foreground antialiased;
    background: linear-gradient(to bottom, hsl(218 51% 12%), hsl(218 48% 8%));
    background-attachment: fixed;
    font-display: swap;
  }
  
  body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.04;
    background-image: 
      radial-gradient(ellipse at 20% 30%, hsl(28 88% 56%) 1.5px, transparent 1.5px),
      radial-gradient(ellipse at 60% 70%, hsl(210 50% 55%) 1px, transparent 1px),
      radial-gradient(circle at 80% 10%, hsl(214 20% 35%) 0.8px, transparent 0.8px);
    background-size: 80px 80px, 120px 120px, 150px 150px;
    background-position: 0 0, 40px 60px, 130px 270px;
  }

  html {
    scroll-behavior: smooth;
  }

  /* Enhanced focus indicators for accessibility */
  *:focus-visible {
    outline: 3px solid hsl(28 88% 56%);
    outline-offset: 2px;
    border-radius: 4px;
  }

  /* Skip to content link */
  .skip-to-content {
    position: absolute;
    left: -9999px;
    z-index: 999;
    padding: 1rem 1.5rem;
    background-color: hsl(28 88% 56%);
    color: white;
    text-decoration: none;
    border-radius: 0 0 0.5rem 0;
    font-weight: 600;
  }

  .skip-to-content:focus {
    left: 0;
    top: 0;
  }
}

@layer utilities {
  .section-padding {
    @apply py-20 px-6 md:px-12 lg:px-20;
  }

  .container-custom {
    @apply max-w-7xl mx-auto;
  }

  .text-gradient {
    background: linear-gradient(90deg, hsl(217 80% 56%), hsl(22 80% 56%));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  
  .text-gradient-light {
    background: linear-gradient(135deg, hsl(28 88% 65%) 0%, hsl(210 17% 98%) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  
  .text-gradient-bi {
    background: linear-gradient(135deg, hsl(218 70% 70%) 0%, hsl(45 95% 75%) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  /* Screen reader only content */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }
}