/* =============================================================================
   TOKENS — toda cor, fonte, medida e tempo do site mora aqui.
   Layout e botões seguem a referência (pilea.agency); as cores são as do
   Danillo, as mesmas do sistema de orçamento (app/globals.css).
   ============================================================================= */

@font-face {
  font-family: "Urbanist";
  src: url("../fonts/urbanist-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Urbanist";
  src: url("../fonts/urbanist-latin-ext.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("../fonts/instrument-serif-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("../fonts/instrument-serif-italic-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---- Cores (Danillo) ---------------------------------------------------- */
  --fundo: #181818;
  --superficie: #202020;
  --superficie-2: #262626;
  --superficie-3: #2c2c2c;
  --hair: #303030;
  --hair-forte: #3d3d3d;
  --brand: #e8834a;          /* 6,6:1 sobre --fundo */
  --brand-sub: #f0a075;
  --brand-vidro: rgba(232, 131, 74, 0.12);
  --texto: #f2f0ed;
  --suave: #9c9a97;          /* 6,3:1 sobre --fundo — passa AA em corpo */
  --fraco: #6e6c6a;          /* 3,4:1 — só decoração, nunca informação */
  --sobre-brand: #181818;    /* texto sobre o laranja */
  --vidro: rgba(24, 24, 24, 0.72);
  --veu: rgba(10, 10, 10, 0.94);

  /* Sombra e luz sobre a foto do hero */
  --fundo-0: rgba(24, 24, 24, 0);
  --fundo-90: rgba(24, 24, 24, 0.9);
  --fundo-60: rgba(24, 24, 24, 0.6);
  --fundo-30: rgba(24, 24, 24, 0.3);
  --vinheta: rgba(10, 10, 10, 0.55);
  --fundo-75: rgba(24, 24, 24, 0.75);
  --fundo-45: rgba(24, 24, 24, 0.45);
  --sombra-texto: rgba(10, 10, 10, 0.55);  /* sombra difusa atrás do texto do hero */
  --luz-quente: rgba(232, 131, 74, 0.28);
  --luz-branca: rgba(255, 244, 232, 0.10);

  /* Horizonte de luz (seções com brilho subindo de uma aresta) */
  --palco: #121212;
  --aresta-luz: rgba(240, 160, 117, 0.75);
  --brilho-forte: rgba(232, 131, 74, 0.42);
  --brilho-medio: rgba(232, 131, 74, 0.16);
  --brilho-fraco: rgba(232, 131, 74, 0.06);
  --marca-grade: #5a5856;

  /* Metal da aliança 3D (ouro); a cera é o mesmo metal com matiz trocada */
  --metal-borda: #6e401c;
  --metal-claro: #f6cf94;
  --metal-meio: #d9974f;
  --metal-sombra: #9a5e2a;
  --metal-reflexo: #f2bd7c;   /* quadradinhos nos cruzamentos da grade */

  /* Chanfro dos botões: brilho difuso nas bordas, sem sombra */
  --chanfro-luz: rgba(255, 255, 255, 0.55);     /* aresta de cima, suave */
  --chanfro-brilho: rgba(255, 255, 255, 0.30);  /* luz desfocada entrando pelo topo */
  --chanfro-halo: rgba(255, 255, 255, 0.20);    /* contorno luminoso por dentro */
  --halo-brand: rgba(232, 131, 74, 0.30);       /* brilho por fora do laranja */
  --chanfro-luz-escuro: rgba(255, 255, 255, 0.16);
  --chanfro-brilho-escuro: rgba(255, 255, 255, 0.07);
  --chanfro-halo-escuro: rgba(255, 255, 255, 0.05);

  /* Amostras de metal (só nas bolinhas da lista de materiais) */
  --amostra-ouro: #d9a94e;
  --amostra-branco: #e6e4df;
  --amostra-prata: #b9bcc0;
  --amostra-bronze: #b07a45;
  --amostra-cera: #6fa89c;

  /* ---- Tipografia (Pilea) -------------------------------------------------- */
  --sans: "Urbanist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Instrument Serif", "Times New Roman", Georgia, serif;

  --fs-mini: 0.75rem;
  --fs-peq: 0.875rem;
  --fs-corpo: 1rem;
  --fs-lead: clamp(1.0625rem, 0.98rem + 0.35vw, 1.25rem);
  --fs-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --fs-h2: clamp(2.125rem, 1.4rem + 3vw, 3.5rem);
  --fs-h1: clamp(2.875rem, 1.6rem + 5.6vw, 6rem);
  --fs-numero: clamp(4.5rem, 2rem + 11vw, 11rem);

  --lh-titulo: 1.02;
  --lh-corpo: 1.6;
  --track-titulo: -0.025em;
  --track-serif: 0.005em;
  --track-eyebrow: 0.16em;

  /* ---- Espaço -------------------------------------------------------------- */
  --gutter: clamp(16px, 4vw, 40px);
  --largura: 1240px;
  --largura-texto: 40rem;
  --sec-y: clamp(88px, 7vw + 48px, 168px);
  --nav-h: 72px;

  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-5: 24px;
  --e-6: 32px;
  --e-7: 48px;
  --e-8: 64px;
  --e-9: 96px;

  /* ---- Raio (Pilea: cartões bem redondos, botões em pílula) ----------------- */
  --r-pilula: 999px;
  --r-card: clamp(20px, 2.2vw, 32px);
  --r-medio: 16px;
  --r-peq: 10px;

  /* ---- Tempo --------------------------------------------------------------- */
  --t-rapido: 160ms;
  --t-medio: 320ms;
  --t-lento: 700ms;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --botao-h: 52px;
}

@media (max-width: 640px) {
  :root {
    --nav-h: 64px;
    --botao-h: 50px;
  }
}