/* =========================================================
   PROFEON — DESIGN TOKENS
   Arquivo base do sistema visual
========================================================= */
:root {
    /* =========================
     Typography
     ========================= */
    /* Fonte principal do sistema */
    --font-family: "Poppins", sans-serif;

    /* Tamanhos de fonte (escala semântica) */
    --fs-xs: 12px;

    /* legendas, badges pequenos */
    --fs-sm: 14px;

    /* textos auxiliares */
    --fs-md: 16px;

    /* texto padrão */
    --fs-lg: 20px;

    /* subtítulos */
    --fs-xl: 24px;

    /* títulos */
    --fs-2xl: 32px;

    /* destaques / nomes */
    /* Peso de fonte */
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    /* =========================
     Radius
     ========================= */
    --r-sm: 10px;

    /* inputs, badges */
    --r-md: 14px;

    /* cards, botões */
    --r-lg: 18px;

    /* containers grandes */
    /* =========================
     Spacing scale
     ========================= */
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 20px;
    --s-6: 24px;
    --s-7: 28px;
    --s-8: 32px;
    --s-9: 36px;
    --s-10: 40px;

    /* =========================
     Semantic colors (fixos)
     ========================= */
    --success: #22c55e;
    --warning: #f59e0b;
    --danger: #ef4444;
    --info: #3b82f6;

    /* =========================
     Z-index layers
     ========================= */
    --z-base: 1;

    /* conteúdo normal */
    --z-dropdown: 10;

    /* menus, selects */
    --z-overlay: 50;

    /* badges, overlays */
    --z-modal: 100;

    /* modais */
    --z-tooltip: 200;

    /* tooltips, popovers */
    /* =========================
     Effects
     ========================= */
    /* Sombras */
    --shadow-sm: 0 1px 0 rgba(0,0,0,.04),
               0 10px 25px rgba(0,0,0,.08);
    --shadow-md: 0 1px 0 rgba(0,0,0,.06),
               0 18px 45px rgba(0,0,0,.12);

    /* Focus ring */
    --ring: 0 0 0 3px rgba(94,155,245,.30);

    /* =========================
     Motion
     ========================= */
    --dur-fast: 150ms;

    /* hover rápido */
    --dur-normal: 250ms;

    /* transições padrão */
    --ease: cubic-bezier(.4,0,.2,1);
}

/* =========================================================
   THEME — LIGHT
========================================================= */
body.light {
    /* Backgrounds */
    --bg: #FEFEFE;
    --surface: #FAFAFA;
    --surface-2: #f1f5f9;
    --accent-light: rgba(254, 177, 29, 0.24);

    /* Text */
    --text: #111827;
    --muted: #6b7280;

    /* Borders */
    --border: #e5e7eb;

    /* Brand */
    --primary: #2f6fe6;
    --primary-light: #5e9bf5;
    --accent: #feb11d;

    /* Text on colors */
    --on-primary: #fff;
    --on-accent: #fff;

    /* Soft gradients */
    --grad-soft: linear-gradient(135deg, #E6F0FF, #f1f5f9);

    /* XP gradient */
    --grad-xp: linear-gradient(90deg, #FFA801, #FFDB97);
}

/* =========================================================
   THEME — DARK
========================================================= */
body.dark {
    --bg: #0b1020;
    --surface: #0f172a;
    --surface-2: #111c36;
    --text: #e5e7eb;
    --muted: #9ca3af;
    --border: rgba(255,255,255,.12);
    --primary: #3b82f6;
    --primary-2: #60a5fa;
    --accent: #fbbf24;
    --on-primary: #06101f;
    --on-accent: #111827;
    --grad-soft: linear-gradient(135deg, #1e293b, #0f172a);
    --grad-xp: linear-gradient(90deg, #fbbf24, #fde68a);
}

/* =========================================================
   LEVEL GRADIENTS (gamificação)
========================================================= */
:root {
    --grad-level-1: linear-gradient(135deg, #3b82f6, #2563eb);
    --grad-level-2: linear-gradient(135deg, #7cc957, #4caf50);
    --grad-level-3: linear-gradient(135deg, #fbbf24, #f59e0b);
    --grad-level-4: linear-gradient(135deg, #fb923c, #f97316);
    --grad-level-5: linear-gradient(135deg, #a855f7, #7c3aed);
}