/* =============================================================================
   Espaço Celebrarte Festas — tokens.css
   Design tokens do site. CSS puro, sem framework, sem pré-processador.
   -----------------------------------------------------------------------------
   ORIGEM DAS CORES
   Todas as cores marcadas [AMOSTRADO] foram extraídas por amostragem de pixel da
   única imagem de marca existente (logo-original.png, 268x259 px, fundo #0c1014).
   As marcadas [DERIVADO] foram calculadas a partir de uma cor amostrada —
   nenhuma cor foi escolhida "a olho" ou copiada de outro lugar.
   ============================================================================= */

:root {
  /* ---------------------------------------------------------------- cores ---
     As sete cores do rodamoinho da logo, mais os dois tons do brasão.        */

  --celebra-magenta:  #D404C4; /* [AMOSTRADO] anel externo, amostras #dc00ae/#d300c5 */
  --celebra-vermelho: #EC2D59; /* [AMOSTRADO] escudo do brasão (seed do recorte) e arco vermelho */
  --celebra-laranja:  #FC8C04; /* [AMOSTRADO] letreiro "Festas" (185 px na faixa inferior direita) */
  --celebra-amarelo:  #FFD206; /* [AMOSTRADO] arco amarelo */
  --celebra-limao:    #BAD206; /* [AMOSTRADO] arco verde-limão */
  --celebra-verde:    #07AC4C; /* [AMOSTRADO] arco verde */
  --celebra-azul:     #068AD2; /* [AMOSTRADO] arco azul */
  --celebra-roxo:     #6B34C9; /* [AMOSTRADO] média das amostras roxas #6139CA e #7A26B9 */

  /* tons secundários que aparecem na arte, não no rodamoinho */
  --celebra-lima-contorno: #A9C84B; /* [AMOSTRADO] filete interno do escudo */
  --celebra-ouro:          #F7B32B; /* [AMOSTRADO] coroa do brasão (misturado ao arco amarelo ao fundo) */
  --celebra-branco:        #FCFCFC; /* [AMOSTRADO] contorno dos tipos da logo */

  /* neutros: o "preto" da logo é um azul-quase-preto, não é preto puro */
  --celebra-tinta:   #0C1014; /* [AMOSTRADO] fundo da logo (25042 px = 36% da imagem) */
  --celebra-tinta-1: #141A21; /* [DERIVADO] --celebra-tinta +8% de luz */
  --celebra-tinta-2: #1E2630; /* [DERIVADO] +14% */
  --celebra-tinta-3: #2C3742; /* [DERIVADO] +20% */
  --celebra-cinza:   #6B7683; /* [DERIVADO] neutro de apoio para texto secundário */
  --celebra-neblina: #E8EAEE; /* [DERIVADO] superfície fria de apoio */
  --celebra-papel:   #FFFFFF;

  /* papéis semânticos (apontam para a paleta acima, para trocar tema num lugar só) */
  --cor-fundo:            var(--celebra-tinta);   /* site escuro: fundo do rodapé/hero */
  --cor-fundo-suave:      var(--celebra-tinta-2);
  --cor-superficie:       var(--celebra-papel);
  --cor-superficie-alt:   var(--celebra-neblina);
  --cor-texto:            var(--celebra-tinta);
  --cor-texto-inverso:    var(--celebra-papel);
  --cor-texto-suave:      var(--celebra-cinza);
  --cor-destaque:         var(--celebra-vermelho); /* cor do brasão: ação principal */
  --cor-destaque-2:       var(--celebra-laranja);  /* cor do "Festas": ação secundária */
  --cor-foco:             var(--celebra-azul);     /* anel de foco acessível */
  --cor-borda:            rgb(236 45 89 / 0.18);
  --cor-borda-forte:      rgb(12 16 20 / 0.16);

  /* -------------------------------------------------------------- gradientes */
  /* arco-íris na ordem em que aparece no rodamoinho, do magenta ao roxo */
  --grad-arcoiris: linear-gradient(90deg,
    var(--celebra-magenta) 0%, var(--celebra-vermelho) 16%, var(--celebra-laranja) 32%,
    var(--celebra-amarelo) 48%, var(--celebra-limao) 62%, var(--celebra-verde) 76%,
    var(--celebra-azul) 88%, var(--celebra-roxo) 100%);
  /* rodamoinho da logo: mesmo arco-íris fechado em círculo */
  --grad-espiral: conic-gradient(from 210deg,
    var(--celebra-magenta), var(--celebra-vermelho), var(--celebra-laranja),
    var(--celebra-amarelo), var(--celebra-limao), var(--celebra-verde),
    var(--celebra-azul), var(--celebra-roxo), var(--celebra-magenta));
  /* uso em texto/borda: pedaço curto, sem virar carnaval */
  --grad-marca: linear-gradient(100deg, var(--celebra-vermelho), var(--celebra-laranja) 55%, var(--celebra-amarelo));
  --grad-veu: linear-gradient(180deg, rgb(12 16 20 / 0) 0%, rgb(12 16 20 / 0.72) 100%);

  /* ------------------------------------------------------------------ tipos */
  /* A fonte do letreiro original é uma display com serifa que NÃO temos em
     arquivo. Não inventamos webfont: o site usa pilha do sistema até existir
     a licença/arquivo da fonte oficial.                                       */
  --fonte-titulo: "Georgia", "Times New Roman", serif;
  --fonte-texto:  "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --fonte-script: "Segoe Script", "Bradley Hand", cursive; /* só para o "Festas" */

  --txt-2xs: 0.75rem;                                   /* 12px */
  --txt-xs:  0.8125rem;                                 /* 13px */
  --txt-sm:  clamp(0.875rem, 0.85rem + 0.15vw, 1rem);   /* 14–16px */
  --txt-md:  clamp(1rem, 0.95rem + 0.25vw, 1.125rem);   /* 16–18px (corpo) */
  --txt-lg:  clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);/* 18–22px */
  --txt-xl:  clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem); /* 22–30px */
  --txt-2xl: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);   /* 28–44px */
  --txt-3xl: clamp(2.25rem, 1.6rem + 3vw, 4rem);        /* 36–64px (hero) */

  --peso-normal: 400;
  --peso-medio:  600;
  --peso-forte:  700;
  --peso-preto:  800;

  --alt-linha-apertada: 1.15;
  --alt-linha-titulo:   1.22;
  --alt-linha-texto:    1.62;
  --entreletra-titulo:  -0.01em; /* a display original é apertada */
  --entreletra-etiqueta: 0.08em;

  /* ------------------------------------------------------------------ raios */
  --raio-xs: 6px;
  --raio-sm: 10px;
  --raio-md: 16px;
  --raio-lg: 24px;
  --raio-xl: 34px;
  --raio-pill: 999px;
  --raio-circulo: 50%;

  /* -------------------------------------------------------------- sombras */
  --sombra-sm: 0 1px 2px rgb(12 16 20 / 0.10);
  --sombra-md: 0 6px 18px -6px rgb(12 16 20 / 0.22);
  --sombra-lg: 0 18px 44px -18px rgb(12 16 20 / 0.34);
  --sombra-cor: 0 12px 30px -12px rgb(236 45 89 / 0.45);   /* halo do vermelho do brasão */
  --sombra-foco: 0 0 0 3px var(--cor-superficie), 0 0 0 6px var(--cor-foco);

  /* -------------------------------------------------------------- espaços */
  --esp-1: 0.25rem;  /*  4px */
  --esp-2: 0.5rem;   /*  8px */
  --esp-3: 0.75rem;  /* 12px */
  --esp-4: 1rem;     /* 16px */
  --esp-5: 1.5rem;   /* 24px */
  --esp-6: 2rem;     /* 32px */
  --esp-7: 3rem;     /* 48px */
  --esp-8: 4rem;     /* 64px */
  --esp-9: 6rem;     /* 96px */

  /* ------------------------------------------------------------- medidas */
  --largura-conteudo: 1140px;
  --largura-texto: 68ch;
  --altura-cabecalho: 76px;
  --altura-cabecalho-compacto: 60px;
  --toque-minimo: 44px; /* alvo de toque acessível */

  --transicao-rapida: 140ms ease;
  --transicao-media: 260ms cubic-bezier(0.2, 0.7, 0.3, 1);

  --camada-cabecalho: 100;
  --camada-menu: 200;
  --camada-modal: 300;
}

/* Anel de foco visível só para quem navega por teclado. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--sombra-foco);
  border-radius: var(--raio-sm);
}

@media (prefers-color-scheme: dark) {
  :root {
    --cor-superficie: var(--celebra-tinta-1);
    --cor-superficie-alt: var(--celebra-tinta-2);
    --cor-texto: var(--celebra-neblina);
    --cor-texto-inverso: var(--celebra-tinta);
    --cor-borda: rgb(252 252 252 / 0.14);
    --cor-borda-forte: rgb(252 252 252 / 0.24);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --transicao-rapida: 0ms; --transicao-media: 0ms; }
}