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

@font-face {
  font-family: 'Space Grotesk';
  src: url('/fonts/SpaceGrotesk-VariableFont_wght.woff2') format('woff2-variations');
  font-weight: 300 700;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-VariableFont_slnt,wght.woff2') format('woff2-variations');
  font-weight: 300 700;
  font-display: swap;
}

@layer base {
  :root {
    --brand-dark: 24 24 27; /* Very deep charcoal */
    --brand-bg: 39 39 42; /* Main background */
    --brand-surface: 63 63 70; /* Cards, forms */
    
    --brand-cyan: 0 188 212; /* Vibrant Cyan */
    --brand-purple: 103 58 183; /* Deep Purple */
    --brand-light-purple: 148 0 211; /* Lighter Purple for gradient */
    
    --brand-text: 248 250 252;   /* Off-white */
    --brand-text-muted: 161 161 170; /* Gray muted text */
    --brand-border: 82 82 91; /* Subtle border */

    --background: var(--brand-bg);
    --foreground: var(--brand-text);
    --primary: var(--brand-purple); /* Using purple as a base for primary elements */
    --primary-foreground: var(--brand-text);
    --input: var(--brand-surface);
    --ring: var(--brand-cyan);
  }

  body {
    @apply bg-brand-bg text-brand-text font-sans antialiased;
  }

  .prose {
    --tw-prose-body: theme('colors.brand-text-muted');
    --tw-prose-headings: theme('colors.brand-text');
    --tw-prose-lead: theme('colors.brand-text-muted');
    --tw-prose-links: theme('colors.brand-cyan');
    --tw-prose-bold: theme('colors.brand-text');
    --tw-prose-counters: theme('colors.brand-text-muted');
    --tw-prose-bullets: theme('colors.brand-cyan');
    --tw-prose-hr: theme('colors.brand-border');
    --tw-prose-quotes: theme('colors.brand-text');
    --tw-prose-quote-borders: theme('colors.brand-border');
    --tw-prose-captions: theme('colors.brand-text-muted');
    --tw-prose-code: theme('colors.brand-text');
    --tw-prose-pre-code: theme('colors.brand-text-muted');
    --tw-prose-pre-bg: theme('colors.brand-dark');
    --tw-prose-th-borders: theme('colors.brand-border');
    --tw-prose-td-borders: theme('colors.brand-surface');
  }
}

@layer components {
  .btn {
    @apply inline-flex items-center justify-center px-6 py-3 rounded-lg font-semibold tracking-wide transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-brand-bg;
  }
  .btn-primary {
    @apply bg-gradient-to-r from-brand-cyan to-brand-purple text-white shadow-lg shadow-brand-purple/20 hover:shadow-xl hover:shadow-brand-purple/30 hover:-translate-y-px;
  }
  .btn-secondary {
    @apply bg-brand-surface text-brand-text border border-brand-border hover:bg-brand-surface/50;
  }
  .btn-tertiary {
    @apply bg-transparent text-brand-text hover:bg-brand-surface/50;
  }
  .form-input {
    @apply w-full bg-brand-dark border border-brand-border rounded-lg px-4 py-3 text-brand-text placeholder-brand-text-muted focus:outline-none focus:ring-2 focus:ring-brand-cyan transition-all;
  }
  .nav-link {
    @apply relative font-medium text-brand-text-muted hover:text-brand-text transition-colors duration-200 py-1;
  }
  .nav-link::after {
    @apply content-[''] absolute bottom-0 left-0 w-full h-0.5 bg-brand-cyan transform scale-x-0 group-hover:scale-x-100 transition-transform origin-center duration-300;
  }
}

.brand-gradient-text {
  @apply text-transparent bg-clip-text bg-gradient-to-r from-brand-cyan to-brand-purple;
}

/* Custom utility classes based on new palette */
.bg-brand-dark { background-color: rgb(var(--brand-dark)); }
.bg-brand-bg { background-color: rgb(var(--brand-bg)); }
.bg-brand-surface { background-color: rgb(var(--brand-surface)); }
.text-brand-text { color: rgb(var(--brand-text)); }
.text-brand-text-muted { color: rgb(var(--brand-text-muted)); }
.text-brand-cyan { color: rgb(var(--brand-cyan)); }
.text-brand-purple { color: rgb(var(--brand-purple)); }

.from-brand-cyan { --tw-gradient-from: rgb(var(--brand-cyan)) var(--tw-gradient-from-position); }
.to-brand-purple { --tw-gradient-to: rgb(var(--brand-purple)) var(--tw-gradient-to-position); }

.border-brand-cyan { border-color: rgb(var(--brand-cyan)); }
.border-brand-border { border-color: rgb(var(--brand-border)); }

.shadow-brand-purple\/30 { box-shadow: 0 10px 15px -3px rgba(var(--brand-purple), 0.3), 0 4px 6px -4px rgba(var(--brand-purple), 0.3); }
.shadow-brand-purple\/20 { box-shadow: 0 4px 6px -1px rgba(var(--brand-purple), 0.2), 0 2px 4px -2px rgba(var(--brand-purple), 0.2); }

.bg-white\/5 { background-color: rgba(255, 255, 255, 0.05); }
.bg-white\/10 { background-color: rgba(255, 255, 255, 0.1); }
.bg-white\/20 { background-color: rgba(255, 255, 255, 0.2); }
.border-white\/10 { border-color: rgba(255, 255, 255, 0.1); }
.border-white\/20 { border-color: rgba(255, 255, 255, 0.2); }

.mask-gradient {
  -webkit-mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
  mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
}

body {
  font-family: 'Inter', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Space Grotesk', sans-serif;
}