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

/* Samadhan Digitech Brand Design System - Light Theme */

@layer base {
  :root {
    /* Brand Colors from PDF Guidelines */
    --background: 0 0% 100%;
    --foreground: 0 0% 7%;

    --card: 0 0% 100%;
    --card-foreground: 0 0% 7%;

    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 7%;

    /* Primary: Brand Blue #0047AF */
    --primary: 216 100% 34%;
    --primary-foreground: 0 0% 100%;

    /* Secondary: Light Blue */
    --secondary: 199 100% 50%;
    --secondary-foreground: 0 0% 100%;

    /* Muted */
    --muted: 210 40% 96%;
    --muted-foreground: 215 16% 47%;

    /* Accent: Yellow #FFE500 */
    --accent: 54 100% 50%;
    --accent-foreground: 0 0% 7%;

    /* Highlight: Neon Green */
    --highlight: 120 100% 40%;
    --highlight-foreground: 0 0% 100%;

    /* Purple accent */
    --purple: 270 100% 50%;
    --purple-foreground: 0 0% 100%;

    /* Red/Pink accent */
    --pink: 340 100% 50%;
    --pink-foreground: 0 0% 100%;

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

    --border: 214 32% 91%;
    --input: 214 32% 91%;
    --ring: 216 100% 34%;

    --radius: 0.75rem;

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, hsl(216 100% 34%) 0%, hsl(216 100% 45%) 100%);
    --gradient-accent: linear-gradient(135deg, hsl(54 100% 50%) 0%, hsl(45 100% 55%) 100%);
    --gradient-hero: linear-gradient(135deg, hsl(216 100% 34%) 0%, hsl(270 100% 50%) 100%);
    --gradient-multicolor: linear-gradient(90deg, hsl(54 100% 50%), hsl(340 100% 50%), hsl(270 100% 50%), hsl(199 100% 50%));

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 hsl(0 0% 0% / 0.05);
    --shadow-md: 0 4px 6px -1px hsl(0 0% 0% / 0.1), 0 2px 4px -2px hsl(0 0% 0% / 0.1);
    --shadow-lg: 0 10px 15px -3px hsl(0 0% 0% / 0.1), 0 4px 6px -4px hsl(0 0% 0% / 0.1);
    --shadow-xl: 0 20px 25px -5px hsl(0 0% 0% / 0.1), 0 8px 10px -6px hsl(0 0% 0% / 0.1);
    --shadow-glow: 0 0 40px hsl(216 100% 34% / 0.2);
    --shadow-accent-glow: 0 0 30px hsl(54 100% 50% / 0.3);

    /* Sidebar */
    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 0 0% 7%;
    --sidebar-primary: 216 100% 34%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 210 40% 96%;
    --sidebar-accent-foreground: 0 0% 7%;
    --sidebar-border: 214 32% 91%;
    --sidebar-ring: 216 100% 50%;
  }

  .dark {
    --background: 0 0% 7%;
    --foreground: 0 0% 98%;

    --card: 0 0% 12%;
    --card-foreground: 0 0% 98%;

    --popover: 0 0% 12%;
    --popover-foreground: 0 0% 98%;

    --primary: 216 100% 50%;
    --primary-foreground: 0 0% 100%;

    --secondary: 199 100% 50%;
    --secondary-foreground: 0 0% 100%;

    --muted: 0 0% 15%;
    --muted-foreground: 0 0% 65%;

    --accent: 54 100% 50%;
    --accent-foreground: 0 0% 7%;

    --destructive: 0 63% 31%;
    --destructive-foreground: 0 0% 98%;

    --border: 0 0% 20%;
    --input: 0 0% 20%;
    --ring: 216 100% 50%;

    --sidebar-background: 0 0% 10%;
    --sidebar-foreground: 0 0% 98%;
    --sidebar-primary: 216 100% 50%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 0 0% 15%;
    --sidebar-accent-foreground: 0 0% 98%;
    --sidebar-border: 0 0% 20%;
    --sidebar-ring: 216 100% 50%;
  }
}

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

  html {
    scroll-behavior: smooth;
  }

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

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

@layer components {
  .hero-gradient {
    background: var(--gradient-hero);
  }

  .gradient-text {
    @apply bg-clip-text text-transparent;
    background-image: var(--gradient-accent);
  }

  .gradient-text-primary {
    @apply bg-clip-text text-transparent;
    background-image: var(--gradient-primary);
  }

  .gradient-text-multicolor {
    @apply bg-clip-text text-transparent;
    background-image: var(--gradient-multicolor);
  }

  .gradient-border {
    position: relative;
  }

  .gradient-border::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 2px;
    border-radius: inherit;
    background: var(--gradient-multicolor);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
  }

  .glow-primary {
    box-shadow: var(--shadow-glow);
  }

  .glow-accent {
    box-shadow: var(--shadow-accent-glow);
  }

  .glass {
    @apply backdrop-blur-md bg-white/80 border border-border;
  }

  .card-hover {
    @apply transition-all duration-300 hover:shadow-xl hover:-translate-y-1;
  }

  .text-gradient-brand {
    @apply bg-clip-text text-transparent;
    background-image: linear-gradient(90deg, hsl(54 100% 50%), hsl(340 100% 50%), hsl(270 100% 50%), hsl(199 100% 50%));
  }
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}