/* Caminho: public_html/assets/css/tokens.css */
/* Social Rios: ponto único de verdade do design. Cores, tipografia, espaço, raio e motion. */

:root {
    /* ---------- Cores oficiais da marca ---------- */
    --roxo:      #701BAE;
    --roxo-900:  #2A0A47;
    --roxo-800:  #3E0F6B;
    --roxo-700:  #56138A;
    --roxo-300:  #B98BE6;
    --roxo-100:  #F1E8FA;

    --laranja:     #FF8212;
    --laranja-700: #D8650A;
    --laranja-100: #FFF0E0;

    --amarelo:  #FFD731;
    --verde:    #1CAD80;
    --vermelho: #F8434C;
    --petroleo: #68C3C9;

    --grafite:  #282828;
    --grafite-600: #4A4A4A;
    --papel:    #FBF7F2;
    --papel-2:  #F3ECE2;
    --branco:   #FFFFFF;
    --whatsapp: #25D366;

    /* ---------- Semântica (o que cada cor faz) ---------- */
    --bg:            var(--papel);
    --bg-2:          var(--papel-2);
    --fg:            var(--grafite);
    --fg-2:          var(--grafite-600);
    --linha:         rgba(40, 40, 40, .14);
    --acento:        var(--laranja);
    --hl-bg:         var(--laranja);
    --hl-fg:         var(--branco);
    --foco:          var(--laranja);

    /* ---------- Tipografia ---------- */
    --font-display: 'Lexend', 'Lexend Variable', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-body:    'Lexend', 'Lexend Variable', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono:    'JetBrains Mono', 'JetBrains Mono Variable', ui-monospace, 'SFMono-Regular', Menlo, monospace;

    /* Escala fluida: de 360px a 1440px de viewport */
    --fs-xs:   clamp(.72rem, .68rem + .2vw, .8rem);
    --fs-sm:   clamp(.84rem, .8rem + .2vw, .94rem);
    --fs-base: clamp(1rem, .96rem + .25vw, 1.125rem);
    --fs-md:   clamp(1.125rem, 1.05rem + .4vw, 1.375rem);
    --fs-lg:   clamp(1.375rem, 1.2rem + .9vw, 2rem);
    --fs-xl:   clamp(2rem, 1.5rem + 2.4vw, 3.75rem);
    --fs-2xl:  clamp(2.6rem, 1.6rem + 4.6vw, 6rem);
    --fs-hero: clamp(2.75rem, 1.2rem + 7.6vw, 8.5rem);

    --lh-tight: 1.02;
    --lh-title: 1.12;
    --lh-body:  1.6;

    --tracking-display: -.035em;
    --tracking-caps:    .14em;

    /* ---------- Espaço (ritmo de 4px) ---------- */
    --sp-1: .25rem;
    --sp-2: .5rem;
    --sp-3: .75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;
    --sp-7: 3rem;
    --sp-8: 4rem;
    --sp-9: 6rem;
    --sp-10: 8rem;

    --secao-y: clamp(5rem, 4rem + 6vw, 10rem);
    --gutter:  clamp(1rem, .5rem + 2.5vw, 3rem);
    --maxw:    1360px;
    --maxw-texto: 68ch;

    /* ---------- Geometria ---------- */
    --r-xs: 6px;
    --r-sm: 12px;
    --r-md: 20px;
    --r-lg: 32px;
    --r-pill: 999px;

    /* ---------- Sombras (suaves e coloridas, nunca cinza pesado) ---------- */
    --sombra-1: 0 1px 2px rgba(40, 40, 40, .06), 0 8px 24px -12px rgba(40, 40, 40, .18);
    --sombra-2: 0 2px 4px rgba(40, 40, 40, .06), 0 24px 48px -20px rgba(112, 27, 174, .28);
    --sombra-roxa: 0 30px 80px -30px rgba(112, 27, 174, .55);
    --sombra-laranja: 0 30px 80px -30px rgba(255, 130, 18, .55);

    /* ---------- Motion: durações ---------- */
    --d-instant:  100ms;
    --d-fast:     200ms;
    --d-base:     320ms;
    --d-slow:     420ms;
    --d-express:  700ms;
    --d-cine:     1200ms;

    /* ---------- Motion: curvas ---------- */
    --e-out:    cubic-bezier(.22, 1, .36, 1);
    --e-in:     cubic-bezier(.64, 0, .78, 0);
    --e-inout:  cubic-bezier(.83, 0, .17, 1);
    --e-rios:   cubic-bezier(.16, 1, .3, 1);   /* assinatura: saída longa e macia */
    --e-spring: cubic-bezier(.34, 1.56, .64, 1);

    /* ---------- Motion: distâncias e escalas ---------- */
    --mv-in:    28px;
    --sc-hover: 1.03;
    --sc-press: .97;
    --stagger:  60ms;

    /* ---------- Camadas ---------- */
    --z-bg: 0;
    --z-conteudo: 1;
    --z-flutuante: 40;
    --z-header: 50;
    --z-stories: 60;
    --z-preloader: 100;

    color-scheme: light dark;
}

/* Modo escuro nativo: o papel vira ameixa profunda, o texto vira papel. Blocos roxo e laranja ficam. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg:     #17111D;
        --bg-2:   #211829;
        --fg:     #F5EFE8;
        --fg-2:   #C9BFD6;
        --linha:  rgba(245, 239, 232, .14);
        --sombra-1: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px -12px rgba(0, 0, 0, .5);
        --sombra-2: 0 2px 4px rgba(0, 0, 0, .3), 0 24px 48px -20px rgba(112, 27, 174, .5);
    }
}
:root[data-theme="dark"] {
    --bg:     #17111D;
    --bg-2:   #211829;
    --fg:     #F5EFE8;
    --fg-2:   #C9BFD6;
    --linha:  rgba(245, 239, 232, .14);
}

/* Temas de seção: cada bloco redefine a semântica localmente. */
[data-tema="escuro"] {
    --bg:    var(--roxo-900);
    --bg-2:  var(--roxo-800);
    --fg:    var(--branco);
    --fg-2:  rgba(255, 255, 255, .72);
    --linha: rgba(255, 255, 255, .16);
    --hl-bg: var(--laranja);
    --hl-fg: var(--branco);
    --foco:  var(--amarelo);
}
[data-tema="roxo"] {
    --bg:    var(--roxo);
    --bg-2:  var(--roxo-700);
    --fg:    var(--branco);
    --fg-2:  rgba(255, 255, 255, .78);
    --linha: rgba(255, 255, 255, .2);
    --acento: var(--laranja);
    --hl-bg: var(--laranja);
    --hl-fg: var(--branco);
    --foco:  var(--amarelo);
}
[data-tema="laranja"] {
    --bg:    var(--laranja);
    --bg-2:  var(--laranja-700);
    --fg:    var(--branco);
    --fg-2:  rgba(255, 255, 255, .84);
    --linha: rgba(255, 255, 255, .28);
    --acento: var(--roxo);
    --hl-bg: var(--roxo);
    --hl-fg: var(--branco);
    --foco:  var(--roxo-900);
}

/* Reduced motion: tudo vira quase instantâneo. O JS lê estas variáveis também. */
@media (prefers-reduced-motion: reduce) {
    :root {
        --d-instant: 0ms;
        --d-fast:    0ms;
        --d-base:    1ms;
        --d-slow:    1ms;
        --d-express: 1ms;
        --d-cine:    1ms;
        --mv-in:     0px;
    }
}