@font-face {
    font-family: "Riffic";
    src: url("/fonts/RifficBold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap");

html, body {
    height: 100%;
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
}

h1, h2, h3, .brand-title, .section-title, .display {
    font-family: "Riffic", cursive;
    letter-spacing: 0.5px;
}

:root {
    --primary: #6C2569;
    --primary-600: #5c1f59;
    --primary-700: #4d1b49;
    --bg: #0f0f12;
    --card: rgba(255, 255, 255, 0.08);
    --border: rgba(255, 255, 255, 0.15);
    --text: #ffffff;
    --muted: #cfc9d6;
    --success: #30d158;
    --error: #ff4d4f;
    --radius: 18px;
    --shadow: 0 18px 40px rgba(108, 37, 105, 0.35);
}