/* ==========================================================================
   HONO INK - Estúdio de Tatuagem · Indaiatuba/SP
   Direção: Papel & Tinta. Base clara de papel, tinta preta quente, um único
   acento argila (hono = chama). Faixas escuras só no hero e no portfólio.
   Tipografia: Italiana (display) + Hanken Grotesk (texto).
   Etapa 1: tokens + reset + base. Etapa 3 adiciona os componentes.
   ========================================================================== */

/* ---------- 1. TOKENS ---------------------------------------------------- */
:root {
  color-scheme: light;

  /* Papel (superfícies claras) */
  --paper:      #F2EDE3;   /* fundo da página */
  --paper-2:    #E9E2D5;   /* faixa/superfície um tom abaixo */
  --paper-3:    #DDD4C4;   /* linhas fortes, placeholders */

  /* Tinta (texto sobre papel) */
  --ink:        #1B1714;   /* títulos e texto principal */
  --ink-2:      #57504A;   /* texto secundário, legendas */
  --ink-3:      #8A827A;   /* metadados, desabilitado */
  --line:       rgb(27 23 20 / .14);
  --line-2:     rgb(27 23 20 / .06);

  /* Noite (faixas escuras: hero e portfólio) */
  --night:      #14110F;
  --night-2:    #1E1A17;
  --bone:       #EDE6DA;   /* texto sobre noite */
  --bone-2:     #A89F94;   /* secundário sobre noite */
  --line-night: rgb(237 230 218 / .14);

  /* Acento único: argila queimada */
  --clay:       #A94E32;
  --clay-deep:  #8A3E27;   /* hover/pressed */
  --clay-soft:  #C8846A;   /* sobre fundo noite, para contraste */
  --clay-tint:  rgb(169 78 50 / .10);
  --on-clay:    #F7F1E8;

  /* WhatsApp mantém a cor da marca só no botão flutuante */
  --wa:         #25D366;

  /* Tipografia */
  --f-display:  "Italiana", "Didot", "Bodoni MT", serif;
  --f-text:     "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Escala fluida (mobile 360 → desktop 1440) */
  --t-hero:     clamp(2.75rem, 3.5vw + 2rem, 6rem);       /* 44 → 96 */
  --t-1:        clamp(2.125rem, 2.2vw + 1.5rem, 4rem);     /* 34 → 64 */
  --t-2:        clamp(1.625rem, 1vw + 1.25rem, 2.5rem);    /* 26 → 40 */
  --t-3:        clamp(1.25rem, .4vw + 1.1rem, 1.5rem);     /* 20 → 24 */
  --t-lead:     clamp(1.0625rem, .3vw + 1rem, 1.25rem);    /* 17 → 20 */
  --t-body:     1rem;                                       /* 16 fixo no mobile */
  --t-small:    .875rem;
  --t-label:    .75rem;

  --lh-display: 1.02;
  --lh-tight:   1.15;
  --lh-body:    1.6;

  --track-display: .04em;   /* Italiana já é aberta; pouco tracking */
  --track-label:   .14em;

  /* Espaço (base 4px) */
  --s-1: .25rem;  --s-2: .5rem;   --s-3: .75rem;  --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 3rem;    --s-8: 4rem;
  --s-9: 6rem;    --s-10: 8rem;
  --gutter:   clamp(1.25rem, 5vw, 4rem);          /* 20 → 64 */
  --section:  clamp(4.5rem, 10vw, 10rem);          /* 72 → 160 */
  --measure:  62ch;
  --container: 1280px;

  /* Forma: regra documentada
     interativo (botões, chips) = pílula · imagens, cards, superfícies = reto */
  --r-pill: 999px;
  --r-0:    0;

  /* Movimento */
  --ease-out:   cubic-bezier(.16, 1, .3, 1);
  --ease-inout: cubic-bezier(.65, 0, .35, 1);
  --d-fast: 180ms;
  --d-base: 420ms;
  --d-slow: 800ms;

  /* Camadas */
  --z-header: 50;
  --z-fab:    60;
  --z-menu:   70;
  --z-grain:  80;

  /* Sombra tingida do papel (nunca preto puro) */
  --shadow-1: 0 1px 2px rgb(27 23 20 / .06), 0 8px 24px rgb(27 23 20 / .08);
  --shadow-2: 0 2px 4px rgb(27 23 20 / .08), 0 24px 56px rgb(27 23 20 / .14);
}

/* Escuro do sistema: a página é clara por identidade (papel), mas as faixas
   noturnas e o FAB já são escuros. Só suavizamos o papel para não ofuscar. */
@media (prefers-color-scheme: dark) {
  :root {
    --paper:   #EDE7DB;
    --paper-2: #E3DBCD;
  }
}

/* ---------- 2. RESET ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}
body {
  min-height: 100dvh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-text);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, picture, video, svg { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
h1, h2, h3, h4 { font-weight: 400; overflow-wrap: break-word; }
p { text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--clay); outline-offset: 4px; }
::selection { background: var(--clay); color: var(--on-clay); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ---------- 3. BASE TIPOGRÁFICA ------------------------------------------ */
.display, h1, h2 {
  font-family: var(--f-display);
  letter-spacing: var(--track-display);
  line-height: var(--lh-display);
  text-transform: uppercase;
  text-wrap: balance;
}
h1 { font-size: var(--t-hero); }
h2 { font-size: var(--t-1); }
h3 { font-family: var(--f-text); font-size: var(--t-3); font-weight: 500; line-height: var(--lh-tight); }
.lead { font-size: var(--t-lead); color: var(--ink-2); max-width: var(--measure); }
.small { font-size: var(--t-small); color: var(--ink-2); }
.label {
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-3);
}
em, .ital { font-style: italic; }   /* ênfase = mesma família, nunca outra fonte */

/* Superfície noturna: inverte os tokens de texto sem trocar a paleta */
.night {
  background: var(--night);
  color: var(--bone);
  --ink: var(--bone);
  --ink-2: var(--bone-2);
  --ink-3: var(--bone-2);
  --line: var(--line-night);
  --clay: var(--clay-soft);
  --paper-2: var(--night-2);
}

/* ---------- 4. LAYOUT PRIMITIVOS ----------------------------------------- */
.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.section { padding-block: var(--section); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- 5. BOTÕES (pílula) ------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 3rem; padding: 0 1.5rem;
  border-radius: var(--r-pill);
  font-weight: 600; font-size: var(--t-small); letter-spacing: .02em;
  white-space: nowrap;
  transition: transform var(--d-fast) var(--ease-out),
              background-color var(--d-fast) var(--ease-out),
              color var(--d-fast) var(--ease-out),
              border-color var(--d-fast) var(--ease-out);
}
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--clay); color: var(--on-clay); }
.btn-primary:hover { background: var(--clay-deep); }
.btn-ghost { border: 1px solid var(--line); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink); }
.night .btn-ghost { border-color: var(--line-night); }
.night .btn-ghost:hover { border-color: var(--bone); }
.btn-lg { min-height: 3.5rem; padding-inline: 2rem; font-size: var(--t-body); }