@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap');

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

/* Trisatech Design System - Yellow brand, modern tech aesthetic */

@layer base {
  :root {
    /* Dark mode as default (best for yellow highlights) */
    --background: 222 47% 4%;
    --foreground: 214 32% 91%;

    --card: 222 47% 11%;
    --card-foreground: 214 32% 91%;

    --popover: 222 47% 11%;
    --popover-foreground: 214 32% 91%;

    /* Brand Yellow Primary */
    --primary: 48 96% 53%;
    --primary-foreground: 222 47% 4%;

    --secondary: 217 33% 17%;
    --secondary-foreground: 214 32% 91%;

    --muted: 217 33% 17%;
    --muted-foreground: 215 16% 65%;

    --accent: 48 96% 53%;
    --accent-foreground: 222 47% 4%;

    /* Error/Destructive */
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;

    --border: 217 33% 17%;
    --input: 217 33% 17%;
    --ring: 48 96% 53%;

    --radius: 0.75rem;

    /* Custom Trisatech tokens */
    --brand-glow: 48 96% 53%;
    --brand-gradient: linear-gradient(135deg, hsl(48 96% 53%) 0%, hsl(45 93% 47%) 100%);
    --hero-gradient: radial-gradient(ellipse 80% 50% at 50% -20%, hsl(48 96% 53% / 0.15), transparent);
    --card-gradient: linear-gradient(180deg, hsl(222 47% 11%) 0%, hsl(222 47% 7%) 100%);
    --text-gradient: linear-gradient(135deg, hsl(48 96% 53%) 0%, hsl(53 98% 63%) 100%);

    /* Sidebar */
    --sidebar-background: 222 47% 6%;
    --sidebar-foreground: 214 32% 91%;
    --sidebar-primary: 48 96% 53%;
    --sidebar-primary-foreground: 222 47% 4%;
    --sidebar-accent: 217 33% 17%;
    --sidebar-accent-foreground: 214 32% 91%;
    --sidebar-border: 217 33% 17%;
    --sidebar-ring: 48 96% 53%;
  }

  /* Light mode support */
  .light {
    --background: 0 0% 100%;
    --foreground: 222 47% 11%;

    --card: 210 40% 98%;
    --card-foreground: 222 47% 11%;

    --popover: 0 0% 100%;
    --popover-foreground: 222 47% 11%;

    --primary: 48 96% 53%;
    --primary-foreground: 222 47% 4%;

    --secondary: 210 40% 96%;
    --secondary-foreground: 217 33% 17%;

    --muted: 210 40% 96%;
    --muted-foreground: 215 19% 35%;

    --accent: 48 96% 53%;
    --accent-foreground: 222 47% 4%;

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

    --border: 213 27% 84%;
    --input: 213 27% 84%;
    --ring: 48 96% 53%;

    --brand-glow: 48 96% 53%;
    --brand-gradient: linear-gradient(135deg, hsl(48 96% 53%) 0%, hsl(45 93% 47%) 100%);
    --hero-gradient: radial-gradient(ellipse 80% 50% at 50% -20%, hsl(48 96% 53% / 0.1), transparent);
    --card-gradient: linear-gradient(180deg, hsl(210 40% 98%) 0%, hsl(210 40% 96%) 100%);
    --text-gradient: linear-gradient(135deg, hsl(45 93% 47%) 0%, hsl(40 94% 40%) 100%);

    --sidebar-background: 210 40% 98%;
    --sidebar-foreground: 222 47% 11%;
    --sidebar-primary: 48 96% 53%;
    --sidebar-primary-foreground: 222 47% 4%;
    --sidebar-accent: 210 40% 96%;
    --sidebar-accent-foreground: 222 47% 11%;
    --sidebar-border: 213 27% 84%;
    --sidebar-ring: 48 96% 53%;
  }
}

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

  html {
    scroll-behavior: smooth;
  }

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

@layer utilities {
  .text-gradient {
    background: var(--text-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .bg-brand-gradient,
  .bg-blaze-gradient {
    background: var(--brand-gradient);
  }

  .bg-hero-gradient {
    background: var(--hero-gradient);
  }

  .bg-card-gradient {
    background: var(--card-gradient);
  }

  .glow {
    box-shadow: 0 0 40px hsl(var(--brand-glow) / 0.3);
  }

  .glow-sm {
    box-shadow: 0 0 20px hsl(var(--brand-glow) / 0.2);
  }

  .animate-float {
    animation: float 6s ease-in-out infinite;
  }

  .animate-pulse-glow {
    animation: pulse-glow 2s ease-in-out infinite;
  }

  @keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
  }

  @keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 20px hsl(var(--brand-glow) / 0.3); }
    50% { box-shadow: 0 0 40px hsl(var(--brand-glow) / 0.5); }
  }

  .glass {
    background: hsl(222 47% 11% / 0.8);
    backdrop-filter: blur(12px);
    border: 1px solid hsl(217 33% 20% / 0.5);
  }

  .light .glass {
    background: hsl(0 0% 100% / 0.85);
    backdrop-filter: blur(12px);
    border: 1px solid hsl(213 27% 84% / 0.6);
  }

  .navbar-scrolled {
    background-color: hsl(var(--background) / 0.95);
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 24px 0 rgb(0 0 0 / 0.12);
  }

  /* Prose styles for Markdown-rendered blog content */
  .prose {
    @apply text-foreground;
  }
  .prose h1, .prose h2, .prose h3, .prose h4 {
    @apply text-foreground font-bold mt-8 mb-4;
  }
  .prose h1 { @apply text-3xl; }
  .prose h2 { @apply text-2xl; }
  .prose h3 { @apply text-xl; }
  .prose p { @apply text-muted-foreground mb-4 leading-7; }
  .prose ul, .prose ol { @apply text-muted-foreground mb-4 pl-6; }
  .prose ul { @apply list-disc; }
  .prose ol { @apply list-decimal; }
  .prose li { @apply mb-1; }
  .prose code {
    @apply text-primary font-mono bg-secondary px-1.5 py-0.5 rounded text-sm;
  }
  .prose pre {
    @apply bg-secondary rounded-lg p-4 overflow-x-auto mb-4;
  }
  .prose pre code {
    @apply bg-transparent p-0 text-foreground;
  }
  .prose blockquote {
    @apply border-l-4 border-primary pl-4 italic text-muted-foreground my-4;
  }
  .prose a {
    @apply text-primary hover:underline;
  }
  .prose strong {
    @apply text-foreground font-semibold;
  }
  .prose hr {
    @apply border-border my-8;
  }
  .prose table {
    @apply w-full border-collapse mb-4;
  }
  .prose th, .prose td {
    @apply border border-border px-4 py-2 text-left;
  }
  .prose th {
    @apply bg-secondary font-semibold text-foreground;
  }
}