/* ============================================================
   buuuuuci · tokens
   O único lugar com valores visuais. Componentes só usam var(--…).

   Origem
   - Paleta, escala de texto, raios e espaçamentos: Pataquada
     (hype-society/design/tokens.json).
   - Temas claro/escuro e fontes (Bricolage Grotesque + Figtree): Central
     (central-de-bo/base.css, tema creme; escuro quente do mock de livros).
   - Movimento do "disco em foco": figurinha do Pataquada (.pk em
     hype-society/web/publico.js): mesma curva de entrada, escala .82,
     volta com mola, perspectiva 750px, giro de até 24°, véu .55.
   ============================================================ */

:root {
  /* ---------- cor · claro ---------- */
  --cor-fundo: #FAF7F1;
  --cor-superficie: #FFFFFF;
  --cor-superficie-2: #F3EEE4;
  --cor-linha: #ECE6DC;
  --cor-texto: #171310;
  --cor-texto-2: #6D675F;
  --cor-texto-inverso: #FAF7F1;
  --cor-destaque: #FFDE00;
  --cor-destaque-tinta: #231D00;
  --cor-acento: #0F5F5B;
  --cor-acento-fundo: #DFF1EE;
  --cor-ok: #1F7A4D;
  --cor-ok-fundo: #E1F3E6;
  --cor-erro: #B3261E;
  --cor-erro-fundo: #FBE3DF;
  --cor-aviso: #8A5A00;
  --cor-aviso-fundo: #F9E7A6;
  --cor-skeleton: #DCD5C6;
  --cor-veu: rgba(23, 19, 16, .55);
  --cor-barra: rgba(250, 247, 241, .78);
  --cor-botao-x: rgba(255, 255, 255, .92);
  --cor-botao-x-tinta: #171310;
  --cor-sombra-tom: 35, 29, 0;

  /* vinil: igual nos dois temas (é um objeto, não interface) */
  --cor-vinil: #151311;
  --cor-vinil-borda: #2A2622;
  --cor-vinil-sulco: rgba(255, 255, 255, .055);
  --cor-vinil-reflexo: rgba(255, 255, 255, .18);
  --cor-rotulo-padrao: #E9DFCC;
  --cor-rotulo-furo: #151311;
  --cor-brilho-capa: rgba(255, 255, 255, .55);
  --cor-borda-capa: rgba(0, 0, 0, .08);
  --cor-rotulo-tinta: rgba(0, 0, 0, .72);
  --cor-rotulo-faixa: rgba(0, 0, 0, .14);

  /* vinil especial (secoes/vinis/vinil-especial.js): cores da massa, iguais nos dois temas */
  --vinil-cor-vermelho: #D3243A;
  --vinil-cor-laranja: #F07F1E;
  --vinil-cor-amarelo: #F4C21B;
  --vinil-cor-verde: #1F8A55;
  --vinil-cor-agua: #5ED3C8;
  --vinil-cor-azul: #2C5FD0;
  --vinil-cor-roxo: #7448C2;
  --vinil-cor-rosa: #F08DB8;
  --vinil-cor-branco: #EFEAE0;
  --vinil-cor-marrom: #7A4A2E;
  --cor-vinil-sulco-escuro: rgba(0, 0, 0, .09);
  --cor-vinil-vidro: rgba(255, 255, 255, .45);
  --cor-vinil-borda-vidro: rgba(255, 255, 255, .25);

  /* cartões da "Minha escuta": pares fixos, iguais nos dois temas,
     porque são feitos para print */
  --cartao-amarelo: #FFDE00;
  --cartao-amarelo-tinta: #171310;
  --cartao-preto: #171310;
  --cartao-preto-tinta: #FAF7F1;
  --cartao-agua: #87E6E1;
  --cartao-agua-tinta: #0E3C39;
  --cartao-rosa: #F5B8DB;
  --cartao-rosa-tinta: #3A1429;
  --cartao-azul: #B6CAEB;
  --cartao-azul-tinta: #14274A;
  --cartao-creme: #F1E9DA;
  --cartao-creme-tinta: #151515;
  --cartao-trilho: rgba(0, 0, 0, .12);
  --cartao-trilho-claro: rgba(255, 255, 255, .16);

  /* ---------- tipografia ---------- */
  --fonte-titulo: 'Bricolage Grotesque', 'Figtree', system-ui, -apple-system, sans-serif;
  --fonte-corpo: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fonte-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --texto-xs: 11px;
  --texto-sm: 12px;
  --texto-sm2: 13px;
  --texto-md: 14px;
  --texto-md2: 15px;
  --texto-base: 16px;
  --texto-lg: 20px;
  --texto-xl: 26px;
  --texto-2xl: 30px;
  --texto-3xl: 34px;
  --texto-4xl: 48px;
  --texto-display: clamp(56px, 16vw, 104px);

  --peso-regular: 400;
  --peso-medio: 500;
  --peso-semi: 600;
  --peso-bold: 700;
  --peso-extra: 800;

  --altura-corpo: 1.55;
  --altura-compacta: 1.4;
  --altura-titulo: 1.12;
  --altura-display: 1.0;

  --espaco-letra-titulo: -0.015em;
  --espaco-letra-display: -0.035em;
  --espaco-letra-caps: 0.08em;

  /* ---------- raios ---------- */
  --raio-xs: 2px;
  --raio-capa: 6px;
  --raio-sm: 8px;
  --raio-md: 12px;
  --raio-md2: 14px;
  --raio-lg: 16px;
  --raio-xl: 20px;
  --raio-2xl: 24px;
  --raio-pilula: 99px;
  --raio-redondo: 50%;

  /* ---------- espaçamentos ---------- */
  --esp-1: 4px;
  --esp-2: 6px;
  --esp-3: 8px;
  --esp-4: 10px;
  --esp-5: 12px;
  --esp-6: 14px;
  --esp-7: 18px;
  --esp-8: 22px;
  --esp-9: 28px;
  --esp-10: 36px;
  --esp-11: 48px;
  --esp-12: 64px;
  --calha: 16px;
  --calha-larga: 32px;

  /* ---------- bordas ---------- */
  --borda: 1px;
  --borda-grossa: 2px;
  --anel-foco: 2px;
  --tracejado: 3 3;
  --traco-icone: 1.8;
  --traco-icone-forte: 2.3;

  /* ---------- estados ---------- */
  --opacidade-suave: .72;
  --opacidade-desabilitada: .5;
  --escala-toque: .97;
  --elevar-hover: -3px;

  /* ---------- sombras ---------- */
  --sombra-leve: 0 2px 8px rgba(var(--cor-sombra-tom), .06);
  --sombra-card: 0 8px 28px rgba(var(--cor-sombra-tom), .07);
  --sombra-capa: 0 1px 2px rgba(0, 0, 0, .10), 0 6px 16px -6px rgba(0, 0, 0, .28);
  --sombra-capa-foco: 0 30px 50px -22px rgba(0, 0, 0, .6);
  --sombra-folha: 0 30px 60px -20px rgba(0, 0, 0, .5);
  --sombra-flutuante: 0 18px 40px rgba(0, 0, 0, .14);
  --sombra-vinil: 0 10px 24px -8px rgba(0, 0, 0, .55);
  --sombra-vinil-vidro: 0 10px 24px -10px rgba(0, 0, 0, .35);

  --desfoque-veu: 2px;
  --desfoque-barra: 14px;
  --saturacao-barra: 1.4;

  /* ---------- texturas ---------- */
  --textura-sulcos: repeating-radial-gradient(circle at 50% 50%,
      var(--cor-vinil) 0 1.6px, var(--cor-vinil-sulco) 1.6px 2.4px, var(--cor-vinil) 2.4px 3.4px);
  --textura-reflexo-vinil: conic-gradient(from 30deg,
      transparent 0deg, var(--cor-vinil-reflexo) 25deg, transparent 60deg,
      transparent 180deg, var(--cor-vinil-reflexo) 205deg, transparent 240deg);
  /* vinil especial: sulcos vazados (a cor vem por baixo) e o brilho do translúcido */
  --textura-sulcos-claros: repeating-radial-gradient(circle at 50% 50%,
      transparent 0 1.6px, var(--cor-vinil-sulco) 1.6px 2.4px, transparent 2.4px 3.4px);
  --textura-sulcos-escuros: repeating-radial-gradient(circle at 50% 50%,
      transparent 0 1.6px, var(--cor-vinil-sulco-escuro) 1.6px 2.4px, transparent 2.4px 3.4px);
  --textura-vidro: radial-gradient(circle at 34% 28%, var(--cor-vinil-vidro), transparent 42%);
  --textura-xadrez:
    linear-gradient(45deg, var(--cor-superficie-2) 25%, transparent 25%, transparent 75%, var(--cor-superficie-2) 75%),
    linear-gradient(45deg, var(--cor-superficie-2) 25%, transparent 25%, transparent 75%, var(--cor-superficie-2) 75%);
  --xadrez-casa: 16px;
  --textura-skeleton: linear-gradient(90deg, var(--cor-superficie-2) 0%, var(--cor-skeleton) 50%, var(--cor-superficie-2) 100%);

  /* ---------- movimento ---------- */
  --curva-figurinha: cubic-bezier(.2, .9, .3, 1.08);
  --dur-figurinha: .85s;
  --curva-volta: cubic-bezier(.2, 1.5, .4, 1);
  --dur-volta: .6s;
  --curva-folha: cubic-bezier(.2, .9, .3, 1.1);
  --dur-folha: .3s;
  --curva-saida: cubic-bezier(.22, 1, .36, 1);
  --curva-giro: cubic-bezier(.45, 0, .25, 1);
  --dur-rapida: .16s;
  --dur-media: .28s;
  --dur-arrasto: .08s;
  --dur-vinil-sai: .75s;
  --atraso-vinil: .42s;
  --atraso-vinil-2: .12s;
  --dur-vinil-volta: .32s;
  --dur-giro-ouvi: 2.6s;
  --giro-ouvi: 400deg;
  --dur-skeleton: 1.2s;
  --dur-toast: 2.8s;
  --dur-troca-vinil: .9s;

  /* geometria do foco (números puros: o JS e o CSS usam os mesmos) */
  --perspectiva: 750px;
  --giro-max: 24;
  --escala-entrada: .82;
  --giro-entrada: -170deg;
  --vinil-sai: .36;        /* fração da capa que o vinil desliza para fora */
  --vinil-sai-duplo-1: .26;
  --vinil-sai-duplo-2: .5;
  --vinil-tamanho: 96%;
  --vinil-fundo-brilho: .72;
  --vinil-rotulo: 34%;
  --vinil-furo-rotulo: 10%;
  --vinil-transl-centro: 58%;     /* quanto da cor fica no translúcido (o resto deixa passar luz) */
  --vinil-transl-borda: 80%;
  --vinil-cristal-centro: 22%;    /* branco translúcido = cristal */
  --vinil-cristal-borda: 44%;
  --vinil-marmore-transl: .6;
  --vinil-marmore-resolucao: 240;
  --giro-troca-vinil: -80deg;
  --escala-troca-vinil: .96;
  --rotulo-texto: 3.2cqw;
  --rotulo-texto-topo: 20%;
  --rotulo-texto-largura: 72%;
  --rotulo-faixa-topo: 64%;
  --rotulo-faixa-altura: 5%;
  --brilho-base: .3;
  --brilho-ganho: .7;
  --brilho-raio: 48%;

  /* ---------- layout ---------- */
  --conteudo-max: 1180px;
  --nav-largura: 244px;
  --barra-altura: 64px;
  --topo-altura: 56px;
  --toque-min: 44px;
  --icone: 20px;
  --icone-sm: 16px;
  --marca: 36px;
  --grade-capa-min: 140px;
  --grade-capa-min-largo: 172px;
  --grade-gap: 18px;
  --capa-foco-max: 360px;
  --capa-foco-max-largo: 420px;
  --capa-foco-altura-max: 46vh;
  --capa-foco-altura-max-largo: 62vh;
  --info-max: 560px;
  --miniatura: 56px;
  --miniatura-sm: 40px;
  --amostra-cor: 34px;
  --especial-previa-vinil: 62%;
  --especial-marca: 20px;
  --especial-marca-borda: 6px;
  --escala-amostra-hover: 1.08;
  --cartao-largura: 420px;
  --grafico-altura: 220px;
  --grafico-ponto: 4;
  --grafico-ponto-fim: 6;
  --barra-mes-altura: 140px;
  --campo-altura: 44px;
  --ponto: 10px;
  --previa-objeto: 260px;
  --cartao-min: 300px;
  --cartao-altura-min: 380px;
  --cartao-objeto: 200px;
  --cartao-objeto-grande: 240px;
  --faixa-altura: 84px;
  --leitor-proporcao: 4 / 3;
  --leitor-mira-x: 12%;
  --leitor-mira-y: 34%;

  /* camadas */
  --z-barra: 45;
  --z-veu: 55;
  --z-foco: 60;
  --z-toast: 80;
}

/* ---------- cor · escuro ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cor-fundo: #12100D;
    --cor-superficie: #1D1A16;
    --cor-superficie-2: #26221C;
    --cor-linha: #332E26;
    --cor-texto: #F1EADC;
    --cor-texto-2: #A59C8B;
    --cor-texto-inverso: #12100D;
    --cor-acento: #87E6E1;
    --cor-acento-fundo: #1C302E;
    --cor-ok: #8EE6A1;
    --cor-ok-fundo: #11301A;
    --cor-erro: #FF9D9D;
    --cor-erro-fundo: #3A1613;
    --cor-aviso: #FFD66B;
    --cor-aviso-fundo: #352800;
    --cor-skeleton: #332E26;
    --cor-veu: rgba(5, 4, 3, .66);
    --cor-barra: rgba(18, 16, 13, .78);
    --cor-sombra-tom: 0, 0, 0;
    --sombra-leve: 0 2px 8px rgba(0, 0, 0, .4);
    --sombra-card: 0 10px 32px rgba(0, 0, 0, .5);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --cor-fundo: #12100D;
  --cor-superficie: #1D1A16;
  --cor-superficie-2: #26221C;
  --cor-linha: #332E26;
  --cor-texto: #F1EADC;
  --cor-texto-2: #A59C8B;
  --cor-texto-inverso: #12100D;
  --cor-acento: #87E6E1;
  --cor-acento-fundo: #1C302E;
  --cor-ok: #8EE6A1;
  --cor-ok-fundo: #11301A;
  --cor-erro: #FF9D9D;
  --cor-erro-fundo: #3A1613;
  --cor-aviso: #FFD66B;
  --cor-aviso-fundo: #352800;
  --cor-skeleton: #332E26;
  --cor-veu: rgba(5, 4, 3, .66);
  --cor-barra: rgba(18, 16, 13, .78);
  --cor-sombra-tom: 0, 0, 0;
  --sombra-leve: 0 2px 8px rgba(0, 0, 0, .4);
  --sombra-card: 0 10px 32px rgba(0, 0, 0, .5);
  color-scheme: dark;
}

:root[data-theme="light"] { color-scheme: light; }

/* ---------- movimento reduzido ----------
   Sem voo da capa, sem vinil deslizando, sem giro: só um esmaecer curto. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-figurinha: .2s;
    --dur-volta: 0s;
    --dur-folha: .15s;
    --dur-vinil-sai: 0s;
    --atraso-vinil: 0s;
    --atraso-vinil-2: 0s;
    --dur-vinil-volta: 0s;
    --dur-giro-ouvi: 0s;
    --dur-skeleton: 0s;
    --dur-arrasto: 0s;
    --dur-troca-vinil: 0s;
  }
}