/* ==========================================================================
   victoou.com — tokens.css
   Fonte única de valores visuais. Nenhum hexadecimal, tamanho de fonte,
   raio ou medida de layout deve existir fora deste arquivo.
   Escala convertida da prancha Figma de 2560px para referência de 1920px
   (fator 0,75). Os clamp() interpolam entre 1280px e 1920px de viewport,
   sempre com o valor de 1920 como teto.
   ========================================================================== */

:root {
  /* ---------- base ---------- */
  --bg:              #000000;   /* padrão de todas as páginas internas */
  --bg-home:         #0d0d0d;   /* exclusivo da home */
  --bg-800:          #161616;
  --bg-700:          #1e1e1e;

  /* ---------- superfícies ---------- */
  --surface-1:       #1b1b1b;   /* botões preenchidos, busca, dropdown */
  --surface-2:       #101010;   /* painel do formulário de contato */
  --surface-2-70:    rgba(16, 16, 16, 0.7); /* mesmo painel, opacidade 70% do Figma */
  --surface-3:       #151515;   /* overlay do card de projeto */
  --surface-3-70:    rgba(21, 21, 21, 0.7); /* mesmo overlay a 70%, valor do Figma */
  --surface-arrow:   #1f1f1f;   /* setas circulares de carrossel */
  --surface-chip:    #363636;   /* chip de avaliação 5.0/5.0 */
  --surface-filter:  #1a1a1a;   /* painel do dropdown de categoria */
  --surface-chip-2:  rgba(1, 1, 1, 0.6);   /* chips sobre a foto do cliente */
  --surface-track:   #1d1d1d;   /* trilha da barra de progresso */

  /* ---------- marca ---------- */
  --accent:          #ff1a31;   /* vermelho aplicado nas camadas */
  --accent-token:    #ff2746;   /* valor da variável "accent" do Figma */
  --accent-deep:     #3f0000;   /* subtags do card videomaking */
  --accent-deep-soft: rgba(63, 0, 0, 0.47);   /* subtags da fileira aberta */
  --accent-fill:     rgba(255, 26, 49, 0.2);  /* preenchimento do pill LET'S DO THIS */
  --accent-grad-1:   #d49f8e;   /* gradiente da fileira de serviço expandida */
  --accent-grad-2:   #ad0011;
  --accent-hero:     #ff1d1d;   /* centro do gradiente do hero de /work */

  /* ---------- texto ---------- */
  --text:            #ffffff;
  --text-bright:     #f2f2f2;
  --text-soft:       #cacaca;
  --text-muted:      #9d9d9d;
  --text-gray:       #8b8b8b;
  --text-dim:        #787878;
  --text-dimmer:     #6b6b6b;
  --text-eyebrow:    #b4b4b4;
  --text-on-accent:  #080808;   /* texto sobre o footer vermelho */
  --text-about:      #c4c4c4;   /* título e frase do hero de /about-me */
  --text-details:    #ededed;   /* parágrafo de project details */
  --text-label:      #878787;   /* "Project Details" e assinatura */
  --text-row:        #595959;   /* título da fileira de serviço */
  --text-row-link:   #777777;   /* "LEARN MORE" da fileira de serviço */
  --text-discord:    #a2a2a2;   /* bloco de Discord no contato */
  --text-checkbox:   #484848;   /* checkbox inativo do filtro */

  /* ---------- traços ---------- */
  --stroke-btn:      #676767;
  --stroke-line:     #5c5c5c;
  --stroke-row:      #414141;
  --stroke-row-open: #696969;   /* borda da fileira de serviço aberta */
  --stroke-input:    #3d3d3d;
  --stroke-card:     #303030;
  --stroke-soft:     #474747;
  --stroke-divider:  #8b8b8b;   /* divisória interna do seletor de idioma */
  --stroke-chip:     #4b4b4b;   /* chips sobre a foto do cliente */
  --stroke-discord:  #686868;   /* bloco de Discord no contato */

  /* ---------- forma ---------- */
  --radius-pill:     999px;
  --radius-card:      12px;
  --radius-lang:       8px;

  /* ---------- layout ---------- */
  --content-w:      1277px;
  --gutter:          322px;
  --container:      min(var(--content-w), 100% - var(--gutter) * 2);

  /* ---------- famílias ---------- */
  --font-display: 'Joyride 2.0', 'Joyride', 'Anton', 'Impact', sans-serif;
  --font-text:    'Helvetica Now Display', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-util:    'Geist', 'Inter', system-ui, sans-serif;

  /* ---------- pesos ---------- */
  --w-thin:    200;
  --w-light:   300;
  --w-regular: 400;
  --w-medium:  500;
  --w-bold:    700;

  /* ---------- escala tipográfica (teto = 1920) ---------- */
  --fs-wordmark-hero:   clamp(160px, 13.125vw, 252px); /* VICTOOU no hero da home */
  --fs-wordmark-footer: clamp(122px, 10vw,     192px); /* VICTOOU no footer */
  --fs-hero:            clamp(126px, 10.26vw,  197px); /* MY WORK'S / ABOUT ME */
  --fs-hero-sm:         clamp( 72px,  5.26vw,  101px); /* LETS WORK (contato) */
  --fs-project-name:    clamp( 84px,  6.77vw,  130px); /* PROJECT NAME */
  --fs-card-title:      clamp( 70px,  5.62vw,  108px); /* título no hover do card */
  --fs-section:         clamp( 62px,  5vw,      96px); /* LATESTS DROPS, F.A.Q */
  --fs-display-72:      clamp( 48px,  3.75vw,   72px); /* fileiras de serviço, IMAGE TITLE */
  --fs-display-68:      clamp( 46px,  3.54vw,   68px); /* títulos das imagens quadradas */
  --fs-manifesto:       clamp( 34px,  2.5vw,    48px); /* frases-manifesto */
  --fs-client-name:     clamp( 29px,  2.13vw,   41px); /* nome do cliente */
  --fs-title-36:        clamp( 27px,  1.87vw,   36px); /* IMAGE TITLE / VÍDEO TITLE / citação */
  --fs-faq-q:           clamp( 24px,  1.56vw,   30px); /* pergunta do accordion */
  --fs-p-32:            32px;  /* parágrafo do bloco de CTA */
  --fs-p-30:            30px;
  --fs-p-28:            28px;  /* e-mail do bloco de CTA */
  --fs-p-27:            27px;  /* hero de contato, detalhes do projeto */
  --fs-p-26:            26px;  /* pills de métrica */
  --fs-p-25:            25px;  /* TOOLS USED e pills de ferramenta */
  --fs-p-24:            24px;  /* parágrafo padrão */
  --fs-btn:             23px;  /* texto do botão pill */
  --fs-label-21:        21px;  /* rótulos do formulário */
  --fs-row-link:        20px;  /* LEARN MORE */
  --fs-p-19:            19px;  /* legendas, chips, termos */
  --fs-ui-18:           18px;  /* botões, chips, eyebrow do accordion */
  --fs-eyebrow:         12px;  /* eyebrows em Geist */

  /* ---------- entrelinha ---------- */
  --lh-1:          1;
  --lh-copy:       1.42;    /* parágrafos de texto corrido, igual no site todo */
  --lh-p:          0.9572;  /* valor do Figma para parágrafos */
  --lh-cta:        1.175;   /* parágrafo do bloco de CTA */
  --lh-hero:       0.82;    /* MY WORK'S */
  --lh-about-hero: 0.7129;  /* ABOUT ME */
  --lh-section:    0.8958;  /* 86px sobre 96px */
  --lh-card:       0.5715;  /* título no hover do card */
  --lh-quote:      0.8935;  /* citação do depoimento */
  --lh-answer:     0.7925;  /* resposta do accordion */
  --lh-by:         0.7249;  /* BY / VICTOOU */
  --lh-project:    120px;   /* PROJECT NAME */
  --lh-signature:   37px;   /* assinatura do depoimento */
  --lh-eyebrow:     15.6px;

  /* ---------- espaçamento entre letras ---------- */
  --ls-wordmark: -0.11em;
  --ls-hero:     -0.05em;
  --ls-section:  -0.01em;
  --ls-card:     -0.03em;
  --ls-by:       -0.02em;
  --ls-manifesto:-0.05em;
  --ls-copy:     -0.03em;

  /* ---------- medidas de bloco recorrentes ---------- */
  --footer-h:      300px;
  --logo-header:     51px;
  --logo-footer:     66px;
  --logo-hero:       59px;
  --card-carousel-w: 882px;
  --card-carousel-h: 562px;
  --card-grid-w:     606px;
  --card-grid-h:     386px;
  --media-w:        1274px;
  --media-h:         717px;

  /* ---------- motion (fases seguintes) ---------- */
  --speed: 1;
  --ease:  cubic-bezier(0.22, 1, 0.36, 1);
}