@font-face {
    font-family: "Calibri";
    src: url(../fonts/calibri.ttf)
}

@font-face {
    font-family: "Calibri-bold";
    src: url(../../fonts/calibri.ttf)
}


:root {
    /* 🎨 CORES BASE */
    --background: #251d28;
    --background-alt: #000000;
    --background-soft: #2f2633;

    /* 🟢 PRIMARY (tema principal) */
    --primary: #545454;
    --primary-hover: #2eff00;
    --primary-active: #188f00;

    /* ⚫ SECONDARY */
    --secondary: #181818;
    --secondary-hover: #222222;
    --secondary-border: #2a2a2a;

    /* ✨ VARIAÇÕES */
    --primary-plus: #e8cfb5;
    --secondary-plus: #ba742f;
    --primary-dark: #333333;
    --primary-light: rgba(106, 117, 121, 0.4);

    /* 🔗 LINKS */
    --links: #c73500;
    --links-hover: #8a2b08;

    /* 📝 TEXTO */
    --text-color: #ffffff;
    --text-light: rgba(173, 173, 173, 0.5);
    --text-muted: rgba(255, 255, 255, 0.3);

    /* 💡 EFEITOS (game UI) */
    --glow-primary: 0 0 8px var(--primary);
    --glow-strong: 0 0 15px var(--primary);
    --border-glow: 1px solid rgba(34, 206, 0, 0.4);

    /* 🧱 BORDAS E RAIO */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 14px;

    /* 📏 ESPAÇAMENTO */
    --spacing-xs: 5px;
    --spacing-sm: 10px;
    --spacing-md: 20px;
    --spacing-lg: 30px;

    /* ⚡ TRANSIÇÕES */
    --transition-fast: 0.2s;
    --transition-normal: 0.3s;
    --transition-slow: 0.5s;

    /* 🔲 SOMBRAS */
    --shadow-soft: 0 0 10px rgba(0, 0, 0, 0.4);
    --shadow-strong: 0 0 25px rgba(0, 0, 0, 0.8);
}

/* BACKGROUND GLOBAL */
.bg-gradient {
    background: linear-gradient(360deg,
            var(--background-alt) 50%,
            var(--secondary) 100%);
}

/* TEXTO GLOBAL */
/* TEXTO COM GRADIENT */
.text-gradient {
    background: linear-gradient(360deg,
            var(--primary-plus),
            var(--secondary-plus));

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    background-clip: text;
    color: transparent;

}

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

body {
    color: var(--text-color);
    font-family: 'Calibri', sans-serif;
    margin: 0;
    padding: 0;
}



/* botão estilo game */
.btn {
    background: var(--secondary);
    color: var(--primary);
    border: var(--border-glow);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    transition: var(--transition-normal);
}

.btn:hover {
    background: var(--primary);
    color: #000;
    box-shadow: var(--glow-primary);
}

/* links */
a {
    color: var(--links);
    transition: var(--transition-fast);
}

a:hover {
    color: var(--links-hover);
}