/* ============================================================
   variables.css  —  fontes + tokens de design
   Carregue SEMPRE primeiro. Aqui só tem variável, nada de seletor de layout.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

:root {
    /* fontes */
    --font-main: 'Poppins', sans-serif;
    --font-mono: ui-monospace, Menlo, Consolas, monospace;

    /* cores base */
    --background-color: #121212;
    --surface-color: #1e1e1e;
    --text-primary: #e0e0e0;
    --text-secondary: #a0a0a0;
    --text-strong: #ffffff;
    --border-color: #333333;
    --accent-color: #42aaf7;
    --accent-rgb: 66, 170, 247;   /* mesma cor, pra usar em rgba(var(--accent-rgb), .15) */

    /* marcas (links de plataformas, redes sociais) */
    --brand-spotify: #1ed760;
    --brand-youtube: #ff0033;
    --brand-apple: #ff0436;
    --brand-deezer: #a238ff;
    --brand-soundcloud: #ff5500;
    --brand-amazon: #25d1da;
    --brand-tiktok-red: #fe2c55;
    --brand-tiktok-cyan: #25f4ee;
    --brand-discord: #5865f2;

    /* forma */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 15px;
    --radius-pill: 999px;

    /* movimento */
    --ease: cubic-bezier(0.25, 0.8, 0.25, 1);
}