:root {
    --color-background: #ffffff;
    --color-surface: #ffe4f0;
    --color-text: #4a1942;
    --color-text-secondary: #8b5a83;
    --color-primary: #d946a6;
    --color-primary-hover: #c23d94;
    --color-border: rgba(217, 70, 166, 0.2);
    --color-card-border: rgba(217, 70, 166, 0.12);
    --font-family-base: "Amasis MT Pro" ;
    --space-8: 8px;
    --space-12: 12px;
    --space-16: 16px;
    --space-24: 24px;
    --space-32: 32px;
    --space-48: 48px;
    --radius-base: 8px;
    --radius-lg: 12px;
    
}

* {  
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-family-base);
    background: var(--color-background);
    color: var(--color-text);
    line-height: 1.6;
}

h1 {
    font-size: 2.5rem;
    color: var(--color-primary);
    margin-bottom: var(--space-16);
}

h2 {
    font-size: 1.8rem;
    margin-bottom: var(--space-24);
    color: var(--color-text);
    border-left: 4px solid var(--color-primary);
    padding-left: var(--space-16);
}

h3 {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: var(--space-12);
    color: var(--color-primary);
}

p {
    margin-bottom: var(--space-16);
    font-size: 1.1rem;      
}

ul {
    list-style: none;
    padding-left: 0;
}

ul li {
    padding: var(--space-8) 0;
    padding-left: var(--space-24);
    position: relative;
}

ul li:before {
    content: "✦";
    position: absolute;
    left: 0;
    color: var(--color-primary);
    font-weight: bold;
}