ai-wpa/app/globals.css

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

/* SiliconPin Design System - Professional hosting platform
   Modern, trust-building color palette with blue/purple tech theme
   All colors MUST be HSL.
*/

@layer base {
  :root {
    /* Main brand colors - professional blue/purple tech palette */
    --background: 240 10% 98%;
    --foreground: 234 16% 15%;

    --card: 0 0% 100%;
    --card-foreground: 234 16% 15%;

    --popover: 0 0% 100%;
    --popover-foreground: 234 16% 15%;

    /* Primary - Tech blue for CTAs and brand elements */
    --primary: 214 84% 56%;
    --primary-foreground: 0 0% 100%;
    --primary-hover: 214 84% 50%;
    --primary-glow: 214 100% 70%;

    /* Secondary - Professional purple accent */
    --secondary: 264 83% 57%;
    --secondary-foreground: 0 0% 100%;
    --secondary-hover: 264 83% 50%;

    /* Success - Green for status indicators */
    --success: 142 76% 36%;
    --success-foreground: 0 0% 100%;

    /* Warning - Orange for alerts */
    --warning: 38 92% 50%;
    --warning-foreground: 0 0% 100%;

    /* Muted colors for subtle elements */
    --muted: 220 14% 96%;
    --muted-foreground: 220 8.9% 46.1%;

    /* Accent colors for highlights */
    --accent: 220 14% 96%;
    --accent-foreground: 220 8.9% 46.1%;

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

    /* Borders and inputs */
    --border: 220 13% 91%;
    --input: 220 13% 91%;
    --ring: 214 84% 56%;

    --radius: 0.5rem;

    --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 theme - professional dark blue with brand consistency */
    --background: 234 16% 6%;
    --foreground: 240 10% 95%;

    --card: 234 16% 8%;
    --card-foreground: 240 10% 95%;

    --popover: 234 16% 8%;
    --popover-foreground: 240 10% 95%;

    /* Primary stays consistent in dark mode */
    --primary: 214 84% 56%;
    --primary-foreground: 0 0% 100%;
    --primary-hover: 214 84% 60%;
    --primary-glow: 214 100% 70%;

    /* Secondary adjusted for dark mode */
    --secondary: 264 83% 62%;
    --secondary-foreground: 0 0% 100%;
    --secondary-hover: 264 83% 65%;

    /* Success/Warning adjusted for dark mode */
    --success: 142 76% 40%;
    --success-foreground: 0 0% 100%;

    --warning: 38 92% 55%;
    --warning-foreground: 0 0% 100%;

    --muted: 234 16% 12%;
    --muted-foreground: 240 5% 65%;

    --accent: 234 16% 12%;
    --accent-foreground: 240 5% 65%;

    --destructive: 0 62.8% 50%;
    --destructive-foreground: 0 0% 100%;

    --border: 234 16% 18%;
    --input: 234 16% 18%;
    --ring: 214 84% 56%;
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
}

/* Custom gradients and animations for SiliconPin */
:root {
  /* Beautiful gradients using brand colors */
  --gradient-primary: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--primary-glow)));
  --gradient-secondary: linear-gradient(135deg, hsl(var(--secondary)), hsl(var(--secondary-hover)));
  --gradient-hero: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--secondary)));
  --gradient-glass: linear-gradient(135deg, hsl(var(--background) / 0.8), hsl(var(--muted) / 0.9));

  /* Elegant shadows using brand colors */
  --shadow-primary: 0 10px 30px -10px hsl(var(--primary) / 0.3);
  --shadow-secondary: 0 10px 30px -10px hsl(var(--secondary) / 0.3);
  --shadow-card: 0 4px 12px hsl(var(--foreground) / 0.1);
  --shadow-glow: 0 0 40px hsl(var(--primary-glow) / 0.4);

  /* Smooth transitions */
  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

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

  body {
    @apply bg-background text-foreground font-sans;
    font-feature-settings:
      'rlig' 1,
      'calt' 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @apply font-heading font-semibold tracking-tight;
    font-feature-settings:
      'rlig' 1,
      'calt' 1;
  }

  h1 {
    @apply text-4xl md:text-5xl lg:text-6xl;
  }

  h2 {
    @apply text-3xl md:text-4xl lg:text-5xl;
  }

  h3 {
    @apply text-2xl md:text-3xl;
  }
}

@layer components {
  /* Gradient text utility */
  .bg-gradient-text {
    @apply bg-gradient-hero bg-clip-text text-transparent;
  }

  /* Font optimization utilities */
  .text-balance {
    text-wrap: balance;
  }

  .font-feature-default {
    font-feature-settings:
      'kern' 1,
      'liga' 1,
      'calt' 1,
      'pnum' 1,
      'tnum' 0,
      'onum' 1,
      'lnum' 0,
      'dlig' 0;
  }

  .font-feature-numeric {
    font-feature-settings:
      'kern' 1,
      'liga' 1,
      'calt' 1,
      'pnum' 0,
      'tnum' 1,
      'onum' 0,
      'lnum' 1,
      'dlig' 0;
  }

  /* Dev-Portfolio Topic Design System */
  .container-custom {
    @apply container px-4 md:px-6 mx-auto max-w-7xl;
  }

  .section-heading {
    @apply text-3xl md:text-4xl font-bold mb-8 relative;
  }

  .section-heading::after {
    content: "";
    @apply block w-16 h-1 bg-primary mt-2 mx-auto;
  }

  .topic-card {
    @apply bg-card rounded-lg overflow-hidden border border-border hover:shadow-lg transition-all duration-300;
  }
}