@import "tailwindcss";

@theme {
  --color-primary: #0071E3;
  --color-background: #050508;
  --color-accent-blue: #5E5CE6;
  --color-accent-pink: #FF375F;
  --color-accent-teal: #4FD1B5;
  --color-neutral-white: #FFFFFF;
  --color-neutral-light: #F7F7F9;
  --color-neutral-gray: #8E8E93;
  --color-ui-dark: #18181B;
  --color-ui-border: #2A2A3A;

  --font-sans: "SF Pro Display", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "MonoLisa", "SF Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --radius-lg: 12px;
  --radius-xl: 24px;

  --blur-glass: 20px;
}

:root {
  --background: #050508;
  --foreground: #FFFFFF;
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
}

@layer components {
  .glass-effect {
    @apply backdrop-blur-[var(--blur-glass)] bg-ui-dark/75 border border-ui-border;
  }

  .text-gradient-cool {
    @apply bg-clip-text text-transparent bg-gradient-to-r from-primary to-accent-teal;
  }

  .text-gradient-vibrant {
    @apply bg-clip-text text-transparent bg-gradient-to-r from-accent-blue via-accent-pink to-accent-teal;
  }

  .blueprint-grid {
    background-image: linear-gradient(to right, rgba(0, 113, 227, 0.1) 1px, transparent 1px),
                      linear-gradient(to bottom, rgba(0, 113, 227, 0.1) 1px, transparent 1px);
    background-size: 40px 40px;
  }
}
