@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');
@import "tailwindcss";

*,
*::before,
*::after {
  box-sizing: border-box !important;
}

html,
body {
  scroll-behavior: smooth;
  overflow-x: hidden;

}

:root {
  /* =========================
     BRAND COLORS
     Elegant, premium, and creator-focused
  ========================= */
  --color-primary: #6D28D9;
  --color-primary-dark: #4C1D95;
  --color-primary-light: #8B5CF6;

  --color-accent: #F59E0B;
  --color-accent-dark: #D97706;
  --color-accent-light: #FCD34D;

  --color-white: #FFFFFF;

  /* =========================
     BACKGROUND COLORS
  ========================= */
  --bg-main: #FFFFFF;
  --bg-section-alt: #F9F7FF;
  --bg-dark: #1F1147;

  /* =========================
     TEXT COLORS
  ========================= */
  --text-primary: #1E1B4B;
  --text-secondary: #5B5B73;
  --text-inverse: #FFFFFF;

  /* =========================
     BORDER & UI ELEMENTS
  ========================= */
  --border-color: #E9E2FF;
  --input-bg: #FAFAFC;

  /* =========================
     BUTTONS
  ========================= */
  --btn-primary-bg: #F59E0B;
  --btn-primary-text: #1E1B4B;
  --btn-primary-hover: #D97706;

  --btn-secondary-bg: transparent;
  --btn-secondary-text: #6D28D9;
  --btn-secondary-border: #6D28D9;

  /* =========================
     GRADIENTS (optional)
  ========================= */
  --gradient-primary: linear-gradient(135deg, #6D28D9, #8B5CF6);
  --gradient-accent: linear-gradient(135deg, #F59E0B, #FCD34D);
}

body {
  margin: 0;
  padding: 0;
  font-family: "Outfit", sans-serif;
  color: var(--text-primary);
}