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

/* Fonts: Inter Tight (display) + Inter (body) loaded via Google Fonts <link> in index.html. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v13/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter var';
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
  font-named-instance: 'Regular';
  src: url(https://fonts.gstatic.com/s/inter/v13/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7.woff2) format('woff2');
}

@font-face {
  font-family: 'Lexend';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/lexend/v19/wlpwgwvFAVdoq2_v9KQU4Wc.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@layer base {
  :root, .dark {
    /* Deep black canvas with subtle cool tint */
    --background: 240 10% 4%;
    --foreground: 220 10% 96%;

    /* Elevated surfaces */
    --card: 240 8% 7%;
    --card-foreground: 220 10% 96%;

    --popover: 240 8% 7%;
    --popover-foreground: 220 10% 96%;

    /* Vibrant futuristic green — signature accent */
    --primary: 152 92% 51%;
    --primary-foreground: 240 10% 4%;

    /* Secondary accent — electric cyan-green for gradients */
    --secondary-accent: 168 100% 60%;
    --secondary-accent-foreground: 240 10% 4%;

    --secondary: 240 6% 12%;
    --secondary-foreground: 220 10% 96%;

    --muted: 240 6% 12%;
    --muted-foreground: 220 8% 60%;

    --accent: 240 6% 12%;
    --accent-foreground: 220 10% 96%;

    --destructive: 0 75% 55%;
    --destructive-foreground: 220 10% 96%;

    --border: 240 6% 16%;
    --input: 240 6% 14%;
    --ring: 152 92% 51%;

    --radius-pill: 9999px;
    --radius-xl: 24px;
    --radius-lg: 20px;
    --radius-md: 16px;
    --radius-sm: 12px;
    --radius-xs: 10px;
    --radius-none: 0px;
    --radius: var(--radius-md);

    --sidebar-background: 240 8% 7%;
    --sidebar-foreground: 220 10% 96%;
    --sidebar-primary: 152 92% 51%;
    --sidebar-primary-foreground: 240 10% 4%;
    --sidebar-accent: 240 6% 12%;
    --sidebar-accent-foreground: 220 10% 96%;
    --sidebar-border: 240 6% 16%;
    --sidebar-ring: 152 92% 51%;
  }

  /* Force dark mode globally — light mode is disabled site-wide */
  html {
    color-scheme: dark;
    background-color: hsl(var(--background));
  }

  /* Primary buttons - pill shape */
  .btn-primary, 
  .cta-button, 
  button[size="lg"] {
    @apply rounded-full;
  }

  /* Secondary buttons */
  .btn-secondary,
  button[variant="outline"] {
    @apply rounded-2xl;
  }

  /* Cards and containers */
  .card,
  .content-box,
  .panel {
    @apply rounded-[var(--radius-lg)];
  }

  /* Form elements */
  input,
  select,
  textarea {
    @apply rounded-[var(--radius-sm)];
  }

  /* Smaller UI components */
  .badge,
  .tag,
  .chip {
    @apply rounded-[var(--radius-xs)];
  }

  /* Modal windows */
  .modal,
  .dialog {
    @apply rounded-[var(--radius-md)];
  }

  /* Images and thumbnails */
  .thumbnail,
  .avatar {
    @apply rounded-[var(--radius-md)];
  }

  /* Navigation elements */
  .nav-item,
  .menu-item {
    @apply rounded-[var(--radius-sm)];
  }
  
  /* Enhanced Typography */
  h1, h2, h3, h4, h5, h6 {
    @apply font-sans font-bold tracking-tight;
  }
  
  .font-display {
    @apply font-sans;
  }
  
  h1 {
    @apply text-4xl md:text-5xl lg:text-6xl leading-tight;
  }
  
  h2 {
    @apply text-3xl md:text-4xl lg:text-5xl leading-tight;
  }
  
  h3 {
    @apply text-2xl md:text-3xl lg:text-4xl;
  }
  
  p {
    @apply leading-relaxed text-balance;
  }
  
  /* Blog Post Styling - Enhanced for better HTML formatting */
  .blog-content {
    @apply space-y-6;
  }
  
  .blog-content h1 {
    @apply text-3xl font-bold mt-8 mb-4;
  }
  
  .blog-content h2 {
    @apply text-2xl font-bold mt-6 mb-3;
  }
  
  .blog-content h3 {
    @apply text-xl font-bold mt-5 mb-2;
  }
  
  .blog-content h4 {
    @apply text-lg font-bold mt-4 mb-2;
  }
  
  .blog-content p {
    @apply my-4 leading-relaxed;
  }
  
  .blog-content ul, .blog-content ol {
    @apply my-4 ml-6;
  }
  
  .blog-content ul {
    @apply list-disc;
  }
  
  .blog-content ol {
    @apply list-decimal;
  }
  
  .blog-content li {
    @apply mb-2;
  }
  
  .blog-content a {
    @apply text-primary underline hover:text-primary/80 transition-colors;
  }
  
  .blog-content blockquote {
    @apply pl-4 border-l-4 border-primary/30 italic my-4;
  }
  
  .blog-content pre {
    @apply bg-muted p-4 rounded-md overflow-x-auto my-4;
  }
  
  .blog-content code {
    @apply font-mono text-sm bg-muted px-1 py-0.5 rounded;
  }
  
  .blog-content img {
    @apply rounded-lg my-6 max-w-full h-auto mx-auto;
  }
  
  .blog-content hr {
    @apply my-8 border-muted;
  }
  
  .blog-content table {
    @apply w-full border-collapse my-6;
  }
  
  .blog-content th, .blog-content td {
    @apply border border-border p-2;
  }
  
  .blog-content th {
    @apply bg-muted;
  }
}

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

  body {
    @apply bg-background text-foreground;
    font-feature-settings: "rlig" 1, "calt" 1;
    font-family: 'Inter', 'Clash Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
      Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  }
}

@layer utilities {
  .text-shadow {
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  }
  
  .text-shadow-lg {
    text-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  }

  .animation-delay-200 {
    animation-delay: 0.2s;
  }
  
  .animation-delay-400 {
    animation-delay: 0.4s;
  }
  
  .animation-delay-600 {
    animation-delay: 0.6s;
  }
  
  .animation-delay-800 {
    animation-delay: 0.8s;
  }

  .text-balance {
    text-wrap: balance;
  }
  
  /* Gradient text — green to electric cyan-green */
  .text-gradient {
    @apply bg-clip-text text-transparent bg-gradient-to-r from-primary via-primary to-secondary-accent;
  }

  /* Glass effect — true dark glass */
  .glass {
    @apply bg-white/[0.03] backdrop-blur-md border border-white/[0.08];
  }

  .glass-card {
    @apply bg-white/[0.04] backdrop-blur-md border border-white/[0.08] shadow-2xl shadow-black/40 hover:border-primary/30 transition-all duration-500;
  }

  /* Premium surfaces */
  .surface-1 {
    background: linear-gradient(180deg, hsl(240 8% 7%) 0%, hsl(240 8% 5%) 100%);
    @apply border border-white/[0.06];
  }

  .surface-2 {
    background: linear-gradient(180deg, hsl(240 7% 9%) 0%, hsl(240 8% 6%) 100%);
    @apply border border-white/[0.08];
  }

  /* Signature green glow (accent halo) */
  .glow-primary {
    box-shadow:
      0 0 0 1px hsl(var(--primary) / 0.25),
      0 0 24px hsl(var(--primary) / 0.35),
      0 0 80px hsl(var(--primary) / 0.18);
  }

  .glow-primary-soft {
    box-shadow:
      0 0 32px hsl(var(--primary) / 0.18),
      0 0 120px hsl(var(--primary) / 0.10);
  }

  /* Subtle grid background — tech feel */
  .bg-grid {
    background-image:
      linear-gradient(to right, hsl(220 10% 96% / 0.04) 1px, transparent 1px),
      linear-gradient(to bottom, hsl(220 10% 96% / 0.04) 1px, transparent 1px);
    background-size: 56px 56px;
  }

  .bg-grid-fade {
    mask-image: radial-gradient(ellipse 80% 50% at 50% 50%, black 40%, transparent 100%);
  }

  /* Noise texture for organic depth (cheap CSS) */
  .bg-noise::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
    opacity: 0.03;
    pointer-events: none;
    mix-blend-mode: overlay;
  }

  /* Animated conic gradient ring */
  .conic-ring {
    background: conic-gradient(from 0deg, transparent 0deg, hsl(var(--primary) / 0.6) 90deg, transparent 180deg, hsl(var(--secondary-accent) / 0.5) 270deg, transparent 360deg);
    animation: rotate-slow 8s linear infinite;
  }
  
  /* 3D card effect */
  .card-3d {
    @apply transition-all duration-300;
    transform-style: preserve-3d;
    perspective: 1000px;
  }
  
  .card-3d:hover {
    transform: translateY(-5px) rotateX(5deg);
  }
  
  /* Pattern backgrounds */
  .bg-pattern-dots {
    background-image: radial-gradient(circle at 1px 1px, rgba(0, 0, 0, 0.1) 1px, transparent 0);
    background-size: 20px 20px;
  }
  
  .bg-pattern-grid {
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.05) 1px, transparent 1px),
                      linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
    background-size: 20px 20px;
  }
  
  /* Mouse follow effect */
  .mouse-follow {
    transition: transform 0.2s ease;
  }
  
  /* Scroll reveal animations */
  .reveal-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  
  .reveal-on-scroll.revealed {
    opacity: 1;
    transform: translateY(0);
  }
}