:root {
  --primary: #402353;
  --secondary: #523168;
  --accent: #e04d26;
  --accent-hover: #c84624;
  --bg-dark: #2f1a3f;
  --bg: #402353;
  --bg-soft: #f4eff8;
  --bg-soft-2: #efe9f5;
  --text: #2f1a3f;
  --text-soft: #6b5a7c;
  --text-soft-2: #5f5070;
  --white: #ffffff;
  --line-light: rgba(255, 255, 255, 0.16);
  --line-dark: rgba(16, 16, 16, 0.12);
  --radius-xl: 10px;
  --radius-lg: 6px;
  --radius-pill: 999px;
  --radius-footer: 18px;
  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.08);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --veil: linear-gradient(135deg, rgba(64, 35, 83, 0.78) 0%, rgba(82, 49, 104, 0.64) 52%, rgba(225, 81, 42, 0.46) 100%);
  --grad-purple: linear-gradient(138deg, #3f2452 0%, #53336b 56%, #a835ff 100%);
  --grad-orange: linear-gradient(138deg, #c84624 0%, #d76244 52%, #ffe2db 100%);
  --grad-highlight: linear-gradient(142deg, #5b2ea8 0%, #6f43b9 48%, #4f6dc9 100%);
  --grad-footer: linear-gradient(180deg, #2b1740 0%, #1d0f31 100%);
  --font: "Outfit", sans-serif;
  --container: min(1320px, calc(100% - 64px));
}

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

html {
  min-width: 320px;
  background: var(--bg-soft);
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--text);
  background: var(--bg-soft);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

svg {
  display: block;
}

::selection {
  color: var(--white);
  background: var(--accent);
}

:focus-visible {
  outline: 3px solid rgba(64, 35, 83, 0.7);
  outline-offset: 4px;
}