@entro314labs/at3-toolkit/templates/ait3e/src/app/globals.css

Advanced development toolkit for AT3 Stack projects

@import "tailwindcss";

/* AIT3E Stack Global Styles */

@theme {
  /* Color System - AIT3E optimized */
  --color-background: hsl(0 0% 100%);
  --color-foreground: hsl(240 10% 3.9%);
  --color-primary: hsl(222.2 47.4% 11.2%);
  --color-primary-foreground: hsl(210 40% 98%);
  --color-secondary: hsl(210 40% 96%);
  --color-secondary-foreground: hsl(222.2 84% 4.9%);
  --color-accent: hsl(210 40% 96%);
  --color-accent-foreground: hsl(222.2 84% 4.9%);
  --color-muted: hsl(210 40% 96%);
  --color-muted-foreground: hsl(215.4 16.3% 46.9%);
  --color-border: hsl(214.3 31.8% 91.4%);
  --color-input: hsl(214.3 31.8% 91.4%);

  /* AI-specific colors */
  --color-ai-primary: hsl(142 76% 36%);
  --color-ai-secondary: hsl(215 25% 27%);
  --color-ai-accent: hsl(263 70% 50%);
  --color-success: hsl(142 76% 36%);
  --color-warning: hsl(45 93% 47%);
  --color-error: hsl(0 72% 51%);

  /* Dark mode colors */
  &:is(.dark *) {
    --color-background: hsl(240 10% 3.9%);
    --color-foreground: hsl(0 0% 98%);
    --color-primary: hsl(210 40% 98%);
    --color-primary-foreground: hsl(222.2 84% 4.9%);
    --color-secondary: hsl(217.2 32.6% 17.5%);
    --color-secondary-foreground: hsl(210 40% 98%);
    --color-accent: hsl(217.2 32.6% 17.5%);
    --color-accent-foreground: hsl(210 40% 98%);
    --color-muted: hsl(217.2 32.6% 17.5%);
    --color-muted-foreground: hsl(215 20.2% 65.1%);
    --color-border: hsl(217.2 32.6% 17.5%);
    --color-input: hsl(217.2 32.6% 17.5%);

    /* AI colors in dark mode */
    --color-ai-primary: hsl(142 76% 36%);
    --color-ai-secondary: hsl(215 25% 67%);
    --color-ai-accent: hsl(263 70% 65%);
  }

  /* Typography - AIT3E optimized */
  --font-family-sans: "Inter", system-ui, sans-serif;
  --font-family-mono: "JetBrains Mono", "Fira Code", monospace;
  --font-family-heading: "Inter", system-ui, sans-serif;

  /* Spacing scale */
  --spacing-0: 0;
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-5: 1.25rem;
  --spacing-6: 1.5rem;
  --spacing-8: 2rem;
  --spacing-10: 2.5rem;
  --spacing-12: 3rem;
  --spacing-16: 4rem;
  --spacing-20: 5rem;
  --spacing-24: 6rem;
  --spacing-32: 8rem;

  /* Breakpoints for responsive design */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;

  /* Border radius */
  --radius-none: 0;
  --radius-sm: 0.125rem;
  --radius-base: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

  /* Animation durations */
  --duration-75: 75ms;
  --duration-100: 100ms;
  --duration-150: 150ms;
  --duration-200: 200ms;
  --duration-300: 300ms;
  --duration-500: 500ms;
  --duration-700: 700ms;
  --duration-1000: 1000ms;

  /* Transitions */
  --transition-all: all var(--duration-150) ease-in-out;
  --transition-colors:
    color var(--duration-150) ease-in-out, background-color var(--duration-150) ease-in-out,
    border-color var(--duration-150) ease-in-out;
  --transition-opacity: opacity var(--duration-150) ease-in-out;
  --transition-transform: transform var(--duration-150) ease-in-out;
}

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

  html {
    @apply scroll-smooth;
  }

  body {
    @apply bg-background text-foreground antialiased;
    font-feature-settings:
      "rlig" 1,
      "calt" 1;
  }

  /* Focus styles for accessibility */
  :focus-visible {
    @apply outline-none ring-2 ring-primary ring-offset-2 ring-offset-background;
  }

  /* Custom scrollbar */
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  ::-webkit-scrollbar-track {
    @apply bg-muted;
  }

  ::-webkit-scrollbar-thumb {
    @apply bg-border rounded-full;
  }

  ::-webkit-scrollbar-thumb:hover {
    @apply bg-muted-foreground;
  }
}

@layer components {
  /* AI-specific component styles */
  .ai-message {
    @apply rounded-lg p-4 mb-4;
  }

  .ai-message--user {
    @apply bg-primary text-primary-foreground ml-8;
  }

  .ai-message--assistant {
    @apply bg-muted mr-8;
  }

  .ai-thinking {
    @apply animate-pulse bg-muted rounded-lg p-4 mb-4 mr-8;
  }

  /* Loading animations for AI responses */
  .ai-loading {
    @apply inline-flex items-center space-x-1;
  }

  .ai-loading-dot {
    @apply w-2 h-2 bg-current rounded-full animate-bounce;
    animation-delay: 0ms;
  }

  .ai-loading-dot:nth-child(2) {
    animation-delay: 150ms;
  }

  .ai-loading-dot:nth-child(3) {
    animation-delay: 300ms;
  }

  /* Syntax highlighting for code blocks */
  .code-block {
    @apply bg-muted rounded-lg p-4 overflow-x-auto;
  }

  .code-block pre {
    @apply text-sm font-mono;
  }

  /* Gradient backgrounds for AI features */
  .ai-gradient {
    background: linear-gradient(
      135deg,
      hsl(var(--color-ai-primary)) 0%,
      hsl(var(--color-ai-accent)) 100%
    );
  }

  .ai-gradient-text {
    background: linear-gradient(
      135deg,
      hsl(var(--color-ai-primary)) 0%,
      hsl(var(--color-ai-accent)) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

@layer utilities {
  /* Custom utilities for AIT3E stack */
  .text-balance {
    text-wrap: balance;
  }

  .text-pretty {
    text-wrap: pretty;
  }

  /* Animation utilities */
  @keyframes fade-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @keyframes slide-up {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes slide-down {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .animate-fade-in {
    animation: fade-in var(--duration-300) ease-out;
  }

  .animate-slide-up {
    animation: slide-up var(--duration-300) ease-out;
  }

  .animate-slide-down {
    animation: slide-down var(--duration-300) ease-out;
  }

  /* Responsive text utilities */
  .text-responsive-sm {
    font-size: clamp(0.875rem, 2.5vw, 1rem);
  }

  .text-responsive-base {
    font-size: clamp(1rem, 3vw, 1.125rem);
  }

  .text-responsive-lg {
    font-size: clamp(1.125rem, 4vw, 1.25rem);
  }

  .text-responsive-xl {
    font-size: clamp(1.25rem, 5vw, 1.5rem);
  }

  .text-responsive-2xl {
    font-size: clamp(1.5rem, 6vw, 2rem);
  }

  .text-responsive-3xl {
    font-size: clamp(2rem, 8vw, 3rem);
  }
}

/* Print styles */
@media print {
  .no-print {
    display: none !important;
  }

  body {
    @apply text-black bg-white;
  }

  .ai-message,
  .code-block {
    @apply border border-gray-300;
  }
}