/**
 * Número Magia — Variáveis CSS
 * Define toda a identidade visual da plataforma em um único lugar.
 * Editar aqui propaga automaticamente para todo o site.
 *
 * @package NumeroMagia
 * @version 1.0.0
 */

:root {

    /* ─────────────────────────────────────────────────────────────────
       KADENCE PALETTE — Sobrescreve os padrões do tema pai
       Todos os blocos Kadence herdam automaticamente estas cores.
    ───────────────────────────────────────────────────────────────── */
    --global-palette1:  #6D28D9;   /* Roxo principal          */
    --global-palette2:  #1A2F4E;   /* Azul marinho            */
    --global-palette3:  #D97706;   /* Dourado — botões CTA    */
    --global-palette4:  #1A1A2E;   /* Texto escuro            */
    --global-palette5:  #5A5A72;   /* Texto secundário        */
    --global-palette6:  #9CA3AF;   /* Texto suave/placeholder */
    --global-palette7:  #F7F5FF;   /* Fundo lilás suave       */
    --global-palette8:  #FFFFFF;   /* Branco puro             */
    --global-palette9:  #EDE9FE;   /* Roxo claro              */

    /* ─────────────────────────────────────────────────────────────────
       CORES DA MARCA — Nomenclatura semântica
    ───────────────────────────────────────────────────────────────── */

    /* Roxo */
    --nm-purple-dark:    #4C1D95;
    --nm-purple:         #6D28D9;
    --nm-purple-mid:     #7C3AED;
    --nm-purple-light:   #EDE9FE;
    --nm-purple-xlight:  #F5F3FF;

    /* Azul Marinho */
    --nm-navy-dark:      #0F1F34;
    --nm-navy:           #1A2F4E;
    --nm-navy-mid:       #1E3A5F;
    --nm-navy-light:     #EFF6FF;

    /* Dourado */
    --nm-gold-dark:      #92400E;
    --nm-gold:           #B45309;
    --nm-gold-mid:       #D97706;
    --nm-gold-light:     #FEF3C7;
    --nm-gold-xlight:    #FFFBEB;

    /* Semânticas */
    --nm-success:        #059669;
    --nm-success-light:  #D1FAE5;
    --nm-error:          #DC2626;
    --nm-error-light:    #FEE2E2;
    --nm-warning:        #D97706;
    --nm-warning-light:  #FEF3C7;
    --nm-info:           #3B82F6;
    --nm-info-light:     #DBEAFE;

    /* ─────────────────────────────────────────────────────────────────
       TEXTO
    ───────────────────────────────────────────────────────────────── */
    --nm-text:           #1A1A2E;
    --nm-text-mid:       #3D3D5C;
    --nm-text-muted:     #5A5A72;
    --nm-text-soft:      #9CA3AF;
    --nm-text-placeholder: #C4C4D4;

    /* Texto claro (para fundos escuros) */
    --nm-text-light:     #F9FAFB;
    --nm-text-light-mid: #D1D5DB;
    --nm-text-light-soft: #9CA3AF;

    /* ─────────────────────────────────────────────────────────────────
       FUNDOS
    ───────────────────────────────────────────────────────────────── */
    --nm-bg-white:       #FFFFFF;
    --nm-bg-soft:        #F7F5FF;
    --nm-bg-gray:        #F9FAFB;
    --nm-bg-gray-mid:    #F3F4F6;

    /* Bordas */
    --nm-border:         rgba(0, 0, 0, 0.07);
    --nm-border-mid:     rgba(0, 0, 0, 0.13);
    --nm-border-strong:  rgba(0, 0, 0, 0.22);

    /* ─────────────────────────────────────────────────────────────────
       TIPOGRAFIA
    ───────────────────────────────────────────────────────────────── */
    --nm-font-serif:  'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --nm-font-sans:   'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --nm-font-mono:   'Fira Code', 'Courier New', monospace;

    /* Escala de tamanhos */
    --nm-text-xs:        11px;
    --nm-text-sm:        13px;
    --nm-text-base:      15px;
    --nm-text-md:        16px;
    --nm-text-lg:        18px;
    --nm-text-xl:        20px;
    --nm-text-2xl:       24px;

    /* ─────────────────────────────────────────────────────────────────
       ESPAÇAMENTO E LAYOUT
    ───────────────────────────────────────────────────────────────── */
    --nm-section-padding:  80px;
    --nm-section-padding-sm: 52px;
    --nm-content-width:    1200px;
    --nm-prose-width:      680px;
    --nm-gap-xs:           8px;
    --nm-gap-sm:           12px;
    --nm-gap-md:           20px;
    --nm-gap-lg:           32px;
    --nm-gap-xl:           48px;

    /* ─────────────────────────────────────────────────────────────────
       BORDAS
    ───────────────────────────────────────────────────────────────── */
    --nm-radius-xs:   4px;
    --nm-radius-sm:   6px;
    --nm-radius-md:   10px;
    --nm-radius-lg:   16px;
    --nm-radius-xl:   24px;
    --nm-radius-pill: 999px;

    /* ─────────────────────────────────────────────────────────────────
       SOMBRAS
    ───────────────────────────────────────────────────────────────── */
    --nm-shadow-xs:  0 1px 2px rgba(0,0,0,.05);
    --nm-shadow-sm:  0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
    --nm-shadow-md:  0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.05);
    --nm-shadow-lg:  0 10px 30px rgba(0,0,0,.10), 0 4px 8px rgba(0,0,0,.05);
    --nm-shadow-focus: 0 0 0 3px rgba(109,40,217,.18);

    /* ─────────────────────────────────────────────────────────────────
       TRANSIÇÕES
    ───────────────────────────────────────────────────────────────── */
    --nm-ease:         cubic-bezier(0.16, 1, 0.3, 1);
    --nm-transition:   all 0.18s var(--nm-ease);
    --nm-transition-slow: all 0.35s var(--nm-ease);

    /* ─────────────────────────────────────────────────────────────────
       Z-INDEX
    ───────────────────────────────────────────────────────────────── */
    --nm-z-base:    1;
    --nm-z-dropdown: 100;
    --nm-z-sticky:  200;
    --nm-z-modal:   300;
    --nm-z-toast:   400;
}

/* ─── Breakpoints de referência (use em media queries) ───────────────────────
   Mobile:   max-width: 640px
   Tablet:   max-width: 768px
   Desktop:  min-width: 1024px
   Wide:     min-width: 1280px
─────────────────────────────────────────────────────────────────────────────── */