@import 'tailwindcss';

@theme {
  --color-barber-bg: #0a0b0f;
  --color-barber-surface: #12141c;
  --color-barber-gold: #e8b84a;
  --color-barber-gold-muted: #c49a3a;
  --color-barber-cream: #f1f3f7;
  --color-barber-stone: #181b26;
  --color-barber-border: oklch(1 0 0 / 0.08);
  --color-barber-glow: oklch(0.82 0.13 82 / 0.2);
  --font-serif: 'Fraunces', ui-serif, Georgia, serif;
  --font-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
}

@layer base {
  html {
    scroll-behavior: smooth;
  }

  body {
    @apply m-0 min-h-svh font-sans text-barber-cream antialiased;
    background-color: var(--color-barber-bg);
    background-image:
      radial-gradient(ellipse 100% 80% at 50% -30%, rgba(232, 184, 74, 0.09), transparent 55%),
      radial-gradient(ellipse 50% 40% at 100% 20%, rgba(99, 102, 241, 0.06), transparent 50%),
      radial-gradient(ellipse 40% 30% at 0% 80%, rgba(232, 184, 74, 0.04), transparent 45%);
  }

  #root {
    @apply min-h-svh w-full max-w-none;
  }

  ::selection {
    background-color: oklch(0.82 0.13 82 / 0.45);
    color: var(--color-barber-bg);
  }
}