/* ============================================================
   FORME · colors_and_type.css
   Tokens oficiais + estilos semânticos
   v.2026-05-25
   ============================================================ */

/* Inter Tight + JetBrains Mono — arquivos oficiais fornecidos pelo cliente. */
/* DESATIVADO — fontes carregadas via Google Fonts CDN no HTML
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/InterTight-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/InterTight-VariableFont_wght.ttf') format('truetype');
}
*/
/* DESATIVADO — fontes carregadas via Google Fonts CDN no HTML
@font-face {
  font-family: 'Inter Tight';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/InterTight-Italic-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/InterTight-Italic-VariableFont_wght.ttf') format('truetype');
}
*/
/* DESATIVADO — fontes carregadas via Google Fonts CDN no HTML
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/JetBrainsMono-Regular.ttf') format('truetype');
}
*/
/* DESATIVADO — fontes carregadas via Google Fonts CDN no HTML
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/JetBrainsMono-Medium.ttf') format('truetype');
}
*/
/* DESATIVADO — fontes carregadas via Google Fonts CDN no HTML
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/JetBrainsMono-Bold.ttf') format('truetype');
}
*/

:root {
  /* ====== CORES BASE RAW ====== */
  --grafite-quente:    #222010;
  --grafite-dark:      #1A1815;
  --carbono:           #1A1A18;
  --papel-quente:      #F0EBE6;
  --papel-luz:         #F7F3ED;

  /* ====== CAMADA NEON ====== */
  --magenta:           #FF1493;
  --magenta-deep:      #C81A70;
  --amarelo-neon:      #F2FF00;  /* exceção cirúrgica, nunca com magenta */

  /* ====== LINHAS / BORDAS ====== */
  --linha-papel:       #D6D0C5;
  --linha-grafite:     #3A3733;
  --mono-baixa:        #6B6760;
  --mono-baixa-dk:     #8A877F;

  /* ====== SUPERFÍCIES DARK ====== */
  --bg-deep:           #1A1815;
  --surface-1:         #2A2724;
  --surface-2:         #36322D;
  --surface-3:         #423D37;
  --border-hairline:   #4A453E;
  --text-secondary:    #8A847B;
  --text-tertiary:     #6B6760;

  /* ====== SEMÂNTICAS (foreground / background) ====== */
  --fg-1:              var(--grafite-quente);   /* texto principal sobre papel */
  --fg-2:              var(--mono-baixa);       /* secundário sobre papel */
  --fg-3:              #908A80;                  /* tercário sobre papel */
  --fg-inv-1:          var(--papel-quente);     /* texto principal sobre grafite */
  --fg-inv-2:          var(--text-secondary);
  --fg-inv-3:          var(--text-tertiary);
  --bg-1:              var(--papel-quente);
  --bg-2:              var(--papel-luz);
  --bg-inv-1:          var(--grafite-quente);
  --bg-inv-2:          var(--surface-1);

  --accent:            var(--magenta);
  --accent-deep:       var(--magenta-deep);
  --accent-fg:         var(--papel-quente);     /* texto sobre magenta */

  /* ====== FONT FAMILIES ====== */
  --ff-display: 'Inter Tight', system-ui, sans-serif;
  --ff-body:    'Inter Tight', system-ui, sans-serif;
  --ff-mono:    'JetBrains Mono', 'Courier New', monospace;

  /* ====== ESCALA DE TAMANHOS ====== */
  --fs-display:    120px;
  --fs-h1:         88px;
  --fs-h2:         56px;
  --fs-h3:         40px;
  --fs-h4:         28px;
  --fs-h5:         22px;
  --fs-body-lg:    20px;
  --fs-body:       16px;
  --fs-body-sm:    14px;
  --fs-caption:    12px;
  --fs-label:      11px;

  /* ====== PESOS ====== */
  --fw-black:    900;
  --fw-extrabold:800;
  --fw-bold:     700;
  --fw-semibold: 600;
  --fw-medium:   500;
  --fw-regular:  400;

  /* ====== TRACKING / LINE-HEIGHT ====== */
  --ls-display:    -0.04em;
  --ls-h1:         -0.035em;
  --ls-h2:         -0.025em;
  --ls-h3:         -0.02em;
  --ls-tight:      -0.01em;
  --ls-mono:       0.12em;
  --ls-mono-tight: 0.05em;
  --ls-uppercase:  0.18em;

  --lh-display:    0.86;
  --lh-headline:   1.05;
  --lh-tight:      1.15;
  --lh-body:       1.5;
  --lh-loose:      1.7;

  /* ====== ESPAÇAMENTO ====== */
  --sp-2xs:  4px;
  --sp-xs:   8px;
  --sp-sm:   12px;
  --sp-md:   16px;
  --sp-lg:   24px;
  --sp-xl:   32px;
  --sp-2xl:  48px;
  --sp-3xl:  64px;
  --sp-4xl:  96px;
  --sp-5xl:  128px;

  /* ====== RADIUS ======
     Brutalismo clean → 2px é o padrão. 0 para superfícies brutas.
     8px/16px só para áreas amplas que precisam respirar. */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* ====== BORDAS ====== */
  --border-1:  1px solid var(--linha-papel);
  --border-1-dk: 1px solid var(--linha-grafite);
  --border-hair: 1px solid var(--border-hairline);

  /* ====== SHADOWS — usar com parcimônia, brutalismo prefere borda a sombra ====== */
  --shadow-none: none;
  --shadow-1: 0 1px 0 0 rgba(34, 32, 16, 0.06);
  --shadow-2: 0 4px 16px -2px rgba(34, 32, 16, 0.08);
  --shadow-3: 0 12px 32px -4px rgba(34, 32, 16, 0.12);
  /* Sombra "tarja" — offset duro sem blur (brutalismo) */
  --shadow-brut: 6px 6px 0 0 var(--grafite-quente);
  --shadow-brut-magenta: 6px 6px 0 0 var(--magenta);

  /* ====== TRANSIÇÕES ====== */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    150ms;
  --dur-base:    250ms;
  --dur-slow:    500ms;
}

/* ============================================================
   RESET / BASE
   ============================================================ */
html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--ff-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  background: var(--bg-1);
}

/* ============================================================
   ESTILOS SEMÂNTICOS — usar como classes em qualquer elemento
   ============================================================ */

.t-display {
  font-family: var(--ff-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}

.t-h1 {
  font-family: var(--ff-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-h1);
  line-height: var(--lh-headline);
  letter-spacing: var(--ls-h1);
}

.t-h2 {
  font-family: var(--ff-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-h2);
  line-height: var(--lh-headline);
  letter-spacing: var(--ls-h2);
}

.t-h3 {
  font-family: var(--ff-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-h3);
}

.t-h4 {
  font-family: var(--ff-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h4);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

.t-h5 {
  font-family: var(--ff-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h5);
  line-height: 1.3;
  letter-spacing: 0;
}

.t-subhead {
  font-family: var(--ff-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h5);
  line-height: 1.35;
  color: var(--fg-1);
}

.t-body-lg {
  font-family: var(--ff-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body-lg);
  line-height: 1.55;
}

.t-body {
  font-family: var(--ff-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.t-body-sm {
  font-family: var(--ff-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body-sm);
  line-height: 1.5;
}

.t-caption {
  font-family: var(--ff-mono);
  font-weight: var(--fw-medium);
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-mono-tight);
  text-transform: uppercase;
  color: var(--mono-baixa);
}

.t-label,
.label-mono {
  font-family: var(--ff-mono);
  font-weight: var(--fw-medium);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--mono-baixa);
}

.t-mono {
  font-family: var(--ff-mono);
  font-weight: var(--fw-medium);
  font-size: var(--fs-body-sm);
  letter-spacing: 0;
}

/* ============================================================
   ATALHOS DE COR
   ============================================================ */
.c-magenta    { color: var(--magenta); }
.c-magenta-dp { color: var(--magenta-deep); }
.c-papel      { color: var(--papel-quente); }
.c-grafite    { color: var(--grafite-quente); }
.c-mono       { color: var(--mono-baixa); }

.bg-grafite { background: var(--grafite-quente); color: var(--papel-quente); }
.bg-papel   { background: var(--papel-quente); color: var(--grafite-quente); }
.bg-magenta { background: var(--magenta);     color: var(--papel-quente); }

/* ============================================================
   ASSINATURA DE MARCA — tarja magenta
   "marca-texto" que cobre 29% da altura da letra, ancorada base
   ============================================================ */
.tarja {
  position: relative;
  display: inline-block;
  background-image: linear-gradient(
    to top,
    transparent 0,
    transparent 6%,
    var(--magenta) 6%,
    var(--magenta) 29%,
    transparent 29%,
    transparent 100%
  );
  padding: 0 0.08em;
}

/* Versão "layer" — opcional, ligeiramente translúcida — só pra textos sobre fundos complexos */
.layer {
  background: var(--magenta);
  color: var(--papel-quente);
  padding: 0 0.1em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* ============================================================
   ÂNCORAS ESTRUTURAIS
   ============================================================ */
.eyebrow {
  font-family: var(--ff-mono);
  font-weight: var(--fw-medium);
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-mono-tight);
  text-transform: uppercase;
  color: var(--mono-baixa);
}
.eyebrow--magenta { color: var(--magenta); }
.eyebrow--inv     { color: var(--mono-baixa-dk); }

hr.regua {
  border: 0;
  border-top: 1px solid var(--linha-papel);
  margin: var(--sp-lg) 0;
}
.bg-grafite hr.regua,
.bg-inv hr.regua { border-top-color: var(--linha-grafite); }