/* VARIABLES.css */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
    /* ── Discord-inspired ocean dark ───────────────────── */
    --c1: #0f1117;          /* background principal */
    --c2: #0b0d12;          /* background mais escuro */
    --c3: #131720;          /* hover sutil */
    --c4: #1e2535;          /* elevated */

    /* ── Surface layers ────────────────── */
    --s1: #141921;          /* card / painel */
    --s2: #1a2133;          /* hover dentro de card */
    --s3: #1e2840;          /* active / pressed */

    /* ── Accent blues ───────── */
    --accent:       #3b82f6;
    --accent-dim:   #1d5cd8;
    --accent-glow:  rgba(59, 130, 246, 0.16);
    --accent-muted: rgba(59, 130, 246, 0.07);

    /* ── Text ──────── */
    --text:          #d4dce8;   /* corpo padrão */
    --text-bright:   #f0f4fa;   /* headings / títulos ativos */
    --text-dim:      #8896aa;   /* labels secundários, itens inativos */
    --text-muted:    #5a6a80;   /* placeholders, meta */
    --text-faint:    #3a4a5c;   /* decorativo, separadores */

    /* ── Borders ─────────────────────────────────────────── */
    --border:        rgba(59, 130, 246, 0.14);
    --border-hover:  rgba(59, 130, 246, 0.32);
    --border-dim:    rgba(255, 255, 255, 0.045);
    --border-strong: rgba(59, 130, 246, 0.28);

    /* ── Fields ──────────────────────────────────────────── */
    --f-c1:     #0d1220;
    --f-c2:     #162030;
    --f-border: rgba(59, 130, 246, 0.16);

    /* ── Semantic ─────────────────────────────────────────── */
    --danger:      #ed4245;
    --danger-dim:  rgba(237, 66, 69, 0.12);
    --success:     #3ba55d;
    --warn:        #faa61a;
    --warn-dim:    rgba(250, 166, 26, 0.12);

    /* ── Tipografia ───────────────────── */
    /* section-label → 10px/700/tracking wide  */
    /* card-title    → 13px/600               */
    /* body          → 14px/400               */
    /* header-title  → 15px/600               */
    /* page-title    → 18px/700               */
    --p18: 18px;
    --p16: 16px;
    --p15: 15px;
    --p14: 14px;
    --p13: 13px;
    --p12: 12px;
    --p11: 11px;
    --p10: 10px;

    /* Pesos padronizados (não use outros) */
    --fw-regular: 400;
    --fw-medium:  500;
    --fw-semi:    600;
    --fw-bold:    700;

    /* ── Typography ──────────────────────────────────────── */
    --font-ui:   'Outfit', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    /* ── Motion ──────────────────────────────────────────── */
    --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
    --ease-snap: cubic-bezier(0.34, 1.56, 0.64, 1);
    --t-fast:    110ms;
    --t-med:     210ms;
    --t-slow:    340ms;
}