:root {
  --primary-color: #59057B;
  --secondary-color: #FFD23F;
  --accent-color: #AB0E86;
  --light-color: #FDFAFF;
  --dark-color: #0F0766;
  --gradient-primary: linear-gradient(to right, #59057B, #AB0E86);
  --hover-color: #4a0468;
  --background-color: #F9F9F9;
  --text-color: #4B5563;
  --border-color: rgba(89, 5, 123, 0.15);
  --divider-color: rgba(171, 14, 134, 0.1);
  --shadow-color: rgba(89, 5, 123, 0.08);
  --highlight-color: #FFEB00;
  --main-font: 'Roboto', sans-serif;
  --alt-font: 'Montserrat', sans-serif;
}

body {
    font-family: var(--main-font);
    background-color: var(--light-color);
    color: var(--text-color);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

h1, h2, h3, .heading-font {
    font-family: var(--alt-font);
}

.card-shadow {
    box-shadow: 0 10px 30px var(--shadow-color);
}

.btn-action {
    background: var(--gradient-primary);
    color: white;
    border-radius: 8px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.btn-action:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 30px var(--shadow-color);
}

.accent-box {
    border: 1px solid var(--border-color);
    background: white;
}

/* Abstract Pattern SVG background */
.pattern-bg {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%2359057B' fill-opacity='0.03'%3E%3Cpath d='M50 50c0-5.523 4.477-10 10-10s10 4.477 10 10-4.477 10-10 10c0 5.523-4.477 10-10 10s-10-4.477-10-10 4.477-10 10-10zM10 10c0-5.523 4.477-10 10-10s10 4.477 10 10-4.477 10-10 10c0 5.523-4.477 10-10 10S0 25.523 0 20s4.477-10 10-10zm10 8c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm40 40c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}