/* ======================================================
   DESIGN TOKENS — Cyber-Architect Design System
   Altere aqui para mudar toda a paleta do site.
   ====================================================== */

:root {
    /* ——— Superfícies (fundos) ——— */
    --bg:                     #131313;
    --surface:                #131313;
    --surface-low:            #1c1b1b;
    --surface-container:      #201f1f;
    --surface-container-high: #2a2a2a;
    --surface-lowest:         #0e0e0e;

    /* ——— Cores de acento ——— */
    --primary:       #4edea3;   /* Verde esmeralda — estado ativo / sucesso */
    --primary-dark:  #10b981;   /* Verde mais escuro — gradiente do botão   */
    --secondary:     #b7c4ff;   /* Azul cobalto — elementos estruturais      */
    --tertiary:      #ffb3af;   /* Rosa — alertas e intervenções críticas    */
    --error:         #ffb4ab;

    /* ——— Texto ——— */
    --text-primary:   #e5e2e1;  /* Nunca use #fff puro — esforço visual      */
    --text-secondary: #bbcabf;  /* Metadados, labels, descrições              */

    /* ——— Bordas ——— */
    --border:        #3c4a42;
    --border-subtle: rgba(60, 74, 66, 0.2);

    /* ——— Tipografia ——— */
    --font-headline: 'Space Grotesk', sans-serif;  /* Títulos / display     */
    --font-body:     'Inter', sans-serif;           /* Corpo / labels        */

    /* ——— Espaçamento (múltiplos de 4px) ——— */
    --s1:  0.25rem;   /*  4px */
    --s2:  0.5rem;    /*  8px */
    --s3:  0.75rem;   /* 12px */
    --s4:  1rem;      /* 16px */
    --s5:  1.25rem;   /* 20px */
    --s6:  1.5rem;    /* 24px */
    --s8:  2rem;      /* 32px */
    --s10: 2.5rem;    /* 40px */
    --s12: 3rem;      /* 48px */
    --s16: 4rem;      /* 64px */
    --s20: 5rem;      /* 80px */
    --s24: 6rem;      /* 96px */

    /* ——— Bordas arredondadas ——— */
    --r-sm:   0.5rem;    /*  8px */
    --r-md:   0.75rem;   /* 12px */
    --r-lg:   1rem;      /* 16px */
    --r-xl:   1.5rem;    /* 24px */
    --r-full: 9999px;

    /* ——— Glassmorphism ——— */
    --glass-bg:   rgba(32, 31, 31, 0.6);
    --glass-blur: blur(12px);

    /* ——— Transições ——— */
    --t-fast:   0.2s ease;
    --t-normal: 0.3s ease;
    --t-slow:   0.5s ease;

    /* ——— Layout ——— */
    --container-max:    1280px;
    --container-narrow: 896px;
    --container-px:     1.5rem;
    --header-height:    72px;
}