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

/* Font loading is handled in index.html with preload for better LCP */
/* System font fallback while web fonts load */
@font-face {
  font-family: 'Inter';
  font-display: swap;
  src: local('Inter');
}

@layer base {
  :root {
    --background: 222 47% 11%;
    --foreground: 210 40% 98%;

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

    --popover: 222 47% 13%;
    --popover-foreground: 210 40% 98%;

    --primary: 160 84% 39%;
    --primary-foreground: 0 0% 100%;

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

    --muted: 217 33% 17%;
    --muted-foreground: 215 19% 35%;

    --accent: 160 60% 45%;
    --accent-foreground: 210 40% 98%;

    --destructive: 0 84% 60%;
    --destructive-foreground: 210 40% 98%;

    --success: 142 76% 45%;
    --success-foreground: 210 40% 98%;

    --warning: 38 92% 50%;
    --warning-foreground: 222 47% 11%;

    --border: 217 33% 20%;
    --input: 217 33% 17%;
    --ring: 160 84% 39%;

    --radius: 0.5rem;

    --sidebar-background: 222 47% 9%;
    --sidebar-foreground: 210 40% 98%;
    --sidebar-primary: 160 84% 39%;
    --sidebar-primary-foreground: 210 40% 98%;
    --sidebar-accent: 217 33% 17%;
    --sidebar-accent-foreground: 210 40% 98%;
    --sidebar-border: 217 33% 20%;
    --sidebar-ring: 160 84% 39%;

    --gradient-primary: linear-gradient(135deg, hsl(160 84% 39%) 0%, hsl(160 60% 50%) 100%);
    --gradient-subtle: linear-gradient(180deg, hsl(222 47% 13%) 0%, hsl(222 47% 11%) 100%);
    --gradient-glow: radial-gradient(ellipse at center, hsl(160 84% 39% / 0.15) 0%, transparent 70%);
    
    --shadow-glow: 0 0 40px hsl(160 84% 39% / 0.2);
    --shadow-card: 0 4px 24px -8px hsl(0 0% 0% / 0.4);
    --shadow-elevated: 0 8px 32px -8px hsl(0 0% 0% / 0.5);

    --font-display: 'Inter', system-ui, sans-serif;
    --font-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
  }

  .dark {
    --background: 222 47% 11%;
    --foreground: 210 40% 98%;
  }
}

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

  body {
    @apply bg-background text-foreground font-sans antialiased;
    font-family: var(--font-display);
  }

  code, pre, .font-mono {
    font-family: var(--font-mono);
  }
}

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

  .gradient-border {
    @apply relative;
  }

  .gradient-border::before {
    content: '';
    @apply absolute inset-0 rounded-lg p-[1px];
    background: var(--gradient-primary);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
  }

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

  .ad-zone {
    @apply border border-dashed border-border/50 rounded-lg flex items-center justify-center text-muted-foreground text-sm;
  }

  /* Prevent CLS (Cumulative Layout Shift) for ad containers */
  .ad-slot {
    min-height: 280px;
    background-color: hsl(var(--muted) / 0.3);
  }

  .code-editor {
    @apply font-mono text-sm bg-card border border-border rounded-lg p-4 resize-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all;
    tab-size: 2;
  }

  .syntax-string { @apply text-emerald-400; }
  .syntax-number { @apply text-amber-400; }
  .syntax-boolean { @apply text-purple-400; }
  .syntax-null { @apply text-red-400; }
  .syntax-key { @apply text-emerald-300; }
  .syntax-bracket { @apply text-muted-foreground; }

  /* Mobile-optimized table wrapper */
  .table-responsive {
    @apply overflow-x-auto -mx-4 px-4;
    -webkit-overflow-scrolling: touch;
  }

  .table-responsive table {
    @apply min-w-full;
  }

  /* Touch-friendly buttons */
  .touch-target {
    @apply min-h-[44px] min-w-[44px];
  }

  /* CSV preview styling */
  .csv-preview {
    @apply overflow-x-auto scrollbar-thin;
    -webkit-overflow-scrolling: touch;
  }

  .csv-preview pre {
    @apply whitespace-pre min-w-max;
  }

  /* Blog article prose styling - enhanced for AdSense high-value content */
  .blog-prose {
    @apply max-w-none text-base leading-relaxed;
  }

  .blog-prose p {
    @apply mb-6 leading-[1.8] text-muted-foreground text-[1.0625rem];
  }

  .blog-prose h2 {
    @apply mt-14 mb-6 text-[1.75rem] md:text-[2rem] font-bold text-foreground tracking-tight;
    scroll-margin-top: 100px;
  }

  .blog-prose h3 {
    @apply mt-10 mb-5 text-xl md:text-[1.375rem] font-semibold text-foreground;
  }

  .blog-prose h4 {
    @apply mt-8 mb-4 text-lg font-medium text-foreground;
  }

  .blog-prose ul,
  .blog-prose ol {
    @apply mb-6 space-y-3 pl-6 text-muted-foreground text-[1.0625rem];
  }

  .blog-prose ul {
    @apply list-disc;
  }

  .blog-prose ol {
    @apply list-decimal;
  }

  .blog-prose li {
    @apply leading-[1.75] pl-1;
  }

  .blog-prose li::marker {
    @apply text-primary/70;
  }

  .blog-prose pre {
    @apply my-8 p-5 rounded-xl bg-secondary/50 overflow-x-auto border border-border/50;
  }

  .blog-prose code:not(pre code) {
    @apply px-2 py-1 rounded-md bg-secondary text-sm text-foreground font-medium;
  }

  .blog-prose blockquote {
    @apply my-10 pl-6 border-l-4 border-primary/50 italic text-muted-foreground bg-secondary/20 py-4 pr-6 rounded-r-lg;
  }

  .blog-prose hr {
    @apply my-12 border-border;
  }

  .blog-prose a {
    @apply text-primary hover:underline underline-offset-2;
  }

  .blog-prose strong {
    @apply font-semibold text-foreground;
  }

  .blog-prose table {
    @apply w-full border-collapse my-8 rounded-lg overflow-hidden;
  }

  .blog-prose th,
  .blog-prose td {
    @apply p-4 border border-border text-left;
  }

  .blog-prose th {
    @apply bg-secondary/40 font-semibold text-foreground;
  }

  .blog-prose tr:nth-child(even) {
    @apply bg-secondary/20;
  }

  .blog-prose img {
    @apply rounded-xl my-8 shadow-lg;
  }

  /* Article intro styling for engaging first paragraph */
  .blog-prose > p:first-of-type {
    @apply text-lg md:text-xl leading-relaxed text-foreground/90;
  }

  /* Legal document prose styling */
  .legal-prose {
    @apply max-w-none text-base leading-relaxed;
  }

  .legal-prose p {
    @apply mb-4 leading-relaxed text-muted-foreground;
  }

  .legal-prose h2 {
    @apply mt-10 mb-4 text-xl font-semibold text-foreground;
  }

  .legal-prose h3 {
    @apply mt-6 mb-3 text-lg font-medium text-foreground;
  }

  .legal-prose h4 {
    @apply mt-4 mb-2 text-base font-medium text-foreground;
  }

  .legal-prose ul,
  .legal-prose ol {
    @apply mb-4 space-y-2 pl-6 text-muted-foreground;
  }

  .legal-prose ul {
    @apply list-disc;
  }

  .legal-prose ol {
    @apply list-decimal;
  }

  .legal-prose li {
    @apply leading-relaxed;
  }

  .legal-prose a {
    @apply text-primary hover:underline;
  }

  .legal-prose strong {
    @apply font-semibold text-foreground;
  }
}

@layer utilities {
  /* Animations removed for performance - static rendering only */

  .scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: hsl(var(--border)) transparent;
  }

  .scrollbar-thin::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  .scrollbar-thin::-webkit-scrollbar-track {
    background: transparent;
  }

  .scrollbar-thin::-webkit-scrollbar-thumb {
    background: hsl(var(--border));
    border-radius: 3px;
  }

  /* Sticky footer utility */
  .min-h-screen-footer {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }

  .min-h-screen-footer > main {
    flex: 1;
  }
}