/* =====================================================================
   Gurizada — design tokens
   As seis cores vêm direto do logo. Tudo o mais deriva delas.
   ===================================================================== */

@layer tokens {
  :root {
    /* ---------- marca ---------- */
    --gz-azul:     #1B5FC0;
    --gz-verde:    #17A67F;
    --gz-grama:    #2FA86A;
    --gz-roxo:     #7C4DC7;
    --gz-rosa:     #F04A5B;
    --gz-amarelo:  #FAB515;
    --gz-navy:     #1F3557;

    /* variações claras para fundos de destaque */
    --gz-azul-suave:    color-mix(in oklab, var(--gz-azul) 12%, white);
    --gz-verde-suave:   color-mix(in oklab, var(--gz-verde) 12%, white);
    --gz-roxo-suave:    color-mix(in oklab, var(--gz-roxo) 12%, white);
    --gz-rosa-suave:    color-mix(in oklab, var(--gz-rosa) 12%, white);
    --gz-amarelo-suave: color-mix(in oklab, var(--gz-amarelo) 18%, white);

    /* variações escuras para sombras sólidas dos botões */
    --gz-azul-fundo:    color-mix(in oklab, var(--gz-azul) 78%, black);
    --gz-verde-fundo:   color-mix(in oklab, var(--gz-verde) 78%, black);
    --gz-roxo-fundo:    color-mix(in oklab, var(--gz-roxo) 78%, black);
    --gz-rosa-fundo:    color-mix(in oklab, var(--gz-rosa) 78%, black);
    --gz-amarelo-fundo: color-mix(in oklab, var(--gz-amarelo) 74%, black);

    /* ---------- superfícies (tema claro) ---------- */
    --fundo:          #FFFFFF;
    --fundo-2:        #F5F8FD;
    --fundo-3:        #EAF0FA;
    --superficie:     #FFFFFF;
    --superficie-alt: #F8FAFE;
    --borda:          #DEE7F4;
    --borda-forte:    #C3D2E8;

    /* ---------- texto ---------- */
    --texto:        #16233C;
    --texto-suave:  #4A5C7A;
    --texto-fraco:  #7A8CA8;
    --texto-invertido: #FFFFFF;

    /* ---------- semânticas ---------- */
    --sucesso: var(--gz-verde);
    --alerta:  var(--gz-amarelo);
    --perigo:  var(--gz-rosa);
    --info:    var(--gz-azul);

    /* ---------- tipografia ---------- */
    --fonte-marca:  'Fredoka', 'Baloo 2', 'Nunito', system-ui, sans-serif;
    --fonte-texto:  'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --fonte-mono:   ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, monospace;

    --t-xs:   clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
    --t-sm:   clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem);
    --t-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
    --t-lg:   clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
    --t-xl:   clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
    --t-2xl:  clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
    --t-3xl:  clamp(2.25rem, 1.6rem + 3vw, 3.75rem);
    --t-4xl:  clamp(2.75rem, 1.7rem + 4.6vw, 5.25rem);

    /* ---------- espaçamento ---------- */
    --e-1: 0.25rem;  --e-2: 0.5rem;   --e-3: 0.75rem;  --e-4: 1rem;
    --e-5: 1.5rem;   --e-6: 2rem;     --e-7: 3rem;     --e-8: 4rem;
    --e-9: 6rem;     --e-10: 8rem;

    /* ---------- raios ---------- */
    --r-sm: 0.5rem;  --r-md: 0.875rem; --r-lg: 1.25rem;
    --r-xl: 1.75rem; --r-2xl: 2.5rem;  --r-pill: 999px;

    /* ---------- sombras ---------- */
    --sombra-sm: 0 1px 2px rgb(16 35 60 / .06), 0 1px 3px rgb(16 35 60 / .08);
    --sombra-md: 0 4px 12px rgb(16 35 60 / .08), 0 2px 4px rgb(16 35 60 / .04);
    --sombra-lg: 0 12px 32px rgb(16 35 60 / .10), 0 4px 8px rgb(16 35 60 / .05);
    --sombra-xl: 0 24px 64px rgb(16 35 60 / .14), 0 8px 16px rgb(16 35 60 / .06);
    --sombra-colorida: 0 16px 40px -12px color-mix(in oklab, var(--gz-azul) 45%, transparent);

    /* ---------- movimento ---------- */
    --mola:    cubic-bezier(.34, 1.56, .64, 1);
    --suave:   cubic-bezier(.4, 0, .2, 1);
    --rapido:  140ms var(--suave);
    --normal:  260ms var(--suave);
    --lento:   520ms var(--suave);

    /* ---------- layout ---------- */
    --largura-max: 1200px;
    --largura-texto: 68ch;
    --altura-topo: 4.5rem;
    --z-topo: 100; --z-menu: 200; --z-modal: 300; --z-aviso: 400;

    color-scheme: light;
  }

  /* ------------------------------------------------------------------
     Tema escuro — a preferência do sistema, salvo escolha explícita
     ------------------------------------------------------------------ */
  @media (prefers-color-scheme: dark) {
    :root:not([data-tema='claro']) {
      --fundo:          #0D1526;
      --fundo-2:        #121D33;
      --fundo-3:        #18253F;
      --superficie:     #16223A;
      --superficie-alt: #1C2A46;
      --borda:          #26375A;
      --borda-forte:    #38507C;

      --texto:       #E8EFFA;
      --texto-suave: #A9BCD8;
      --texto-fraco: #7489AA;
      --texto-invertido: #0D1526;

      --gz-azul:    #4D8BE8;
      --gz-verde:   #2ECFA0;
      --gz-grama:   #4CC98A;
      --gz-roxo:    #A480EA;
      --gz-rosa:    #FF7080;
      --gz-amarelo: #FFC93F;
      --gz-navy:    #C8D8F0;

      --gz-azul-suave:    color-mix(in oklab, var(--gz-azul) 20%, #0D1526);
      --gz-verde-suave:   color-mix(in oklab, var(--gz-verde) 20%, #0D1526);
      --gz-roxo-suave:    color-mix(in oklab, var(--gz-roxo) 20%, #0D1526);
      --gz-rosa-suave:    color-mix(in oklab, var(--gz-rosa) 20%, #0D1526);
      --gz-amarelo-suave: color-mix(in oklab, var(--gz-amarelo) 20%, #0D1526);

      --gz-azul-fundo:    color-mix(in oklab, var(--gz-azul) 60%, black);
      --gz-verde-fundo:   color-mix(in oklab, var(--gz-verde) 60%, black);
      --gz-roxo-fundo:    color-mix(in oklab, var(--gz-roxo) 60%, black);
      --gz-rosa-fundo:    color-mix(in oklab, var(--gz-rosa) 60%, black);
      --gz-amarelo-fundo: color-mix(in oklab, var(--gz-amarelo) 58%, black);

      --sombra-sm: 0 1px 2px rgb(0 0 0 / .35);
      --sombra-md: 0 4px 14px rgb(0 0 0 / .40);
      --sombra-lg: 0 14px 36px rgb(0 0 0 / .48);
      --sombra-xl: 0 28px 72px rgb(0 0 0 / .55);
      --sombra-colorida: 0 16px 44px -14px color-mix(in oklab, var(--gz-azul) 60%, transparent);

      color-scheme: dark;
    }
  }

  /* Escolha explícita do usuário vence a preferência do sistema */
  :root[data-tema='escuro'] {
    --fundo:          #0D1526;
    --fundo-2:        #121D33;
    --fundo-3:        #18253F;
    --superficie:     #16223A;
    --superficie-alt: #1C2A46;
    --borda:          #26375A;
    --borda-forte:    #38507C;

    --texto:       #E8EFFA;
    --texto-suave: #A9BCD8;
    --texto-fraco: #7489AA;
    --texto-invertido: #0D1526;

    --gz-azul:    #4D8BE8;
    --gz-verde:   #2ECFA0;
    --gz-grama:   #4CC98A;
    --gz-roxo:    #A480EA;
    --gz-rosa:    #FF7080;
    --gz-amarelo: #FFC93F;
    --gz-navy:    #C8D8F0;

    --gz-azul-suave:    color-mix(in oklab, var(--gz-azul) 20%, #0D1526);
    --gz-verde-suave:   color-mix(in oklab, var(--gz-verde) 20%, #0D1526);
    --gz-roxo-suave:    color-mix(in oklab, var(--gz-roxo) 20%, #0D1526);
    --gz-rosa-suave:    color-mix(in oklab, var(--gz-rosa) 20%, #0D1526);
    --gz-amarelo-suave: color-mix(in oklab, var(--gz-amarelo) 20%, #0D1526);

    --gz-azul-fundo:    color-mix(in oklab, var(--gz-azul) 60%, black);
    --gz-verde-fundo:   color-mix(in oklab, var(--gz-verde) 60%, black);
    --gz-roxo-fundo:    color-mix(in oklab, var(--gz-roxo) 60%, black);
    --gz-rosa-fundo:    color-mix(in oklab, var(--gz-rosa) 60%, black);
    --gz-amarelo-fundo: color-mix(in oklab, var(--gz-amarelo) 58%, black);

    --sombra-sm: 0 1px 2px rgb(0 0 0 / .35);
    --sombra-md: 0 4px 14px rgb(0 0 0 / .40);
    --sombra-lg: 0 14px 36px rgb(0 0 0 / .48);
    --sombra-xl: 0 28px 72px rgb(0 0 0 / .55);
    --sombra-colorida: 0 16px 44px -14px color-mix(in oklab, var(--gz-azul) 60%, transparent);

    color-scheme: dark;
  }
}