/* ============================================================
   João Ferreira — Design Tokens
   Fonte-verdade: Claude Design, projeto "João Ferreira - Site Completo - v2",
   arquivo colors_and_type.css. Mantenha os dois em sincronia.

   Display condensado pesado + corpo leve, raio zero, fotografia sangrada,
   duplo canvas (preto profundo + bone quente). Sem cor decorativa.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Saira+Condensed:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600&display=swap");

:root {
  /* ---------- SUPERFÍCIE ---------- */
  --canvas:           #0A0A0A;
  --canvas-bone:      #EFEAE0;
  --surface-soft:     #131313;
  --surface-card:     #1A1A1A;
  --surface-elevated: #232323;
  --surface-sand:     #E4DDCE;
  --surface-dune:     #D8CFBC;

  /* ---------- TINTA ---------- */
  --ink-on-dark:      #FFFFFF;
  --ink-on-light:     #0A0A0A;
  --body-dark:        #BFBAB0;
  --body-light:       #4A4A48;
  --muted-dark:       #7C7670;
  --muted-light:      #8A8478;

  /* ---------- FILETES ---------- */
  --hairline-dark:    #2E2E2E;
  --hairline-light:   #C9C2B0;

  /* ---------- AÇÃO ----------
     A marca não tem cor decorativa própria. A única cor de marca é o
     verde do WhatsApp, restrito ao CTA do WhatsApp. */
  --action:           #FFFFFF;
  --action-on-light:  #0A0A0A;
  --whatsapp:         #1FAD58;
  --whatsapp-press:   #178D46;

  /* ---------- SEMÂNTICO ---------- */
  --warning:          #E0A52C;
  --success:          #2E9A5A;
  --danger:           #C24D3A;

  /* ---------- TIPO ---------- */
  --font-display: "Saira Condensed", "Antonio", "Oswald",
                  -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                  Roboto, sans-serif;

  --display-xxl: 112px;
  --display-xl:  80px;
  --display-lg:  56px;
  --display-md:  40px;
  --display-sm:  32px;
  --title-lg:    24px;
  --title-md:    20px;
  --title-sm:    18px;
  --label:       13px;
  --body-md:     16px;
  --body-sm:     14px;
  --caption:     12px;

  /* ---------- ESPAÇAMENTO (base 4px) ---------- */
  --s-xxs:    4px;
  --s-xs:     8px;
  --s-sm:    12px;
  --s-md:    16px;
  --s-lg:    24px;
  --s-xl:    40px;
  --s-xxl:   64px;
  --s-section: 96px;

  /* ---------- RAIO ----------
     Quase sempre 0. Pílula reservada ao CTA principal do WhatsApp
     e a controles circulares. */
  --r-none: 0px;
  --r-xs:   2px;
  --r-sm:   4px;
  --r-md:   8px;
  --r-full: 9999px;

  /* ---------- CONTÊINER ---------- */
  --content-max: 1440px;
  --gutter:      24px;

  /* ---------- MOVIMENTO ---------- */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:   cubic-bezier(0.7, 0, 0.84, 0);
  --t-fast:    160ms;
  --t-med:     280ms;
  --t-slow:    520ms;
}

/* ============================================================
   PADRÕES SEMÂNTICOS DE ELEMENTO
   ============================================================ */
html, body {
  margin: 0;
  padding: 0;
  background: var(--canvas);
  color: var(--ink-on-dark);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--body-md);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
  margin: 0;
  line-height: 1.02;
}
h1 { font-size: var(--display-xl); }
h2 { font-size: var(--display-lg); line-height: 1.05; }
h3 { font-size: var(--display-md); line-height: 1.1; }
h4 { font-size: var(--display-sm); line-height: 1.15; }

p { margin: 0; font-weight: 300; }

.label {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: var(--label);
  line-height: 1.3;
}

.eyebrow {
  font-family: var(--font-body);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 11px;
  color: var(--muted-dark);
}

.body-sm { font-size: var(--body-sm); font-weight: 300; }
.caption { font-size: var(--caption); letter-spacing: 0.4px; color: var(--muted-dark); }

/* Bloco em modo claro — inverte tinta e superfície */
.on-bone {
  background: var(--canvas-bone);
  color: var(--ink-on-light);
}
.on-bone p { color: var(--body-light); }
.on-bone .eyebrow,
.on-bone .caption { color: var(--muted-light); }