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

*,
*::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: #d100c4;
  --color-primary-dark: #431f5d;
  --color-primary-light: #ff3bfa;

  --color-accent: #b700a8;
  --color-accent-dark: #320338;
  --color-accent-light: #f5a3f0;

  --color-white: #ffffff;

  /* =========================
      BACKGROUND COLORS
   ========================= */
  --bg-main: #ffffff;
  --bg-section-alt: #fff0ff;
  --bg-dark: #20042d;

  /* =========================
      TEXT COLORS
   ========================= */
  --text-primary: #1f1135;
  --text-secondary: #5c4b6e;
  --text-inverse: #ffffff;

  /* =========================
      BORDER & UI ELEMENTS
   ========================= */
  --border-color: #f3d5f5;
  --input-bg: #fcf8fd;

  /* =========================
      BUTTONS
   ========================= */
  --btn-primary-bg: #d100c4;
  --btn-primary-text: #ffffff;
  --btn-primary-hover: #b700a8;

  --btn-secondary-bg: transparent;
  --btn-secondary-text: #431f5d;
  --btn-secondary-border: #431f5d;

  /* =========================
      GRADIENTS
   ========================= */
  --gradient-primary: linear-gradient(135deg, #d100c4, #431f5d);
  --gradient-accent: linear-gradient(135deg, #ff3bfa, #b700a8);
}

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