/* ============================================================
   jolf — tokens.css   (cores + tipografia da marca)

   Copia de design/colors_and_type.css, com UMA adaptacao:
   nao temos os .ttf da DM Serif Display em /fonts, entao o
   @font-face de arquivo local foi removido e a fonte passa a
   vir do Google Fonts junto de DM Sans e JetBrains Mono.
   O resto e identico a fonte de verdade da marca.
   ============================================================ */

/* ---------- Fonts ----------
   Todas via Google Fonts CDN (nao ha .ttf local no arch).            */
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&family=DM+Serif+Display:ital@0;1&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* ---- Brand colors (live site) ---- */
  --white:   #ffffff;
  --off:     #f7f6f4;             /* warm off-white — section backgrounds */
  --ink:     #0a0a0a;             /* preto jolf */
  --ink-60:  rgba(10,10,10,0.6);  /* body text */
  --ink-30:  rgba(10,10,10,0.3);  /* labels, subtle borders, step numbers */
  --ink-10:  rgba(10,10,10,0.08); /* hairline borders, light step numbers */

  /* Inverse (used on dark surfaces) */
  --white-60: rgba(255,255,255,0.65);
  --white-40: rgba(255,255,255,0.4);
  --white-25: rgba(255,255,255,0.25);
  --white-10: rgba(255,255,255,0.08);

  /* ---- Cobalt — vibrant accent for highlights ---- */
  --cobalt:      #0033ff;
  --cobalt-mid:  #3d5bff;
  --cobalt-soft: #e5e8ff;
  --cobalt-deep: #024d7f;

  /* ---- Semantic aliases ---- */
  --bg: var(--white);
  --bg-alt: var(--off);
  --bg-inverse: var(--ink);

  --fg: var(--ink);
  --fg-muted: var(--ink-60);
  --fg-subtle: var(--ink-30);
  --fg-inverse: var(--white);

  --border: var(--ink-10);
  --border-strong: var(--ink-30);

  /* ---- Type families ---- */
  --display: "DM Serif Display", Georgia, serif;
  --body:    "DM Sans", system-ui, -apple-system, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

  /* Legacy aliases */
  --font-serif: var(--display);
  --font-sans:  var(--body);
  --font-mono:  var(--mono);

  --jolf-white: var(--white);
  --jolf-black: var(--ink);
  --gray-text:  var(--ink-60);
  --gray-ice:   var(--off);

  /* ---- Tracking ---- */
  --track:     0.18em;
  --track-lg:  0.32em;
  --track-tight: -0.02em;
  --track-tightest: -0.03em;

  /* ---- Type scale ---- */
  --fs-hero: clamp(48px, 6.5vw, 88px);
  --fs-h1: clamp(34px, 3.8vw, 54px);
  --fs-h2: 21px;
  --fs-h3: 19px;
  --fs-body: 15px;
  --fs-body-sm: 13px;
  --fs-meta: 11px;
  --fs-label: 9px;
  --fs-mono: 13px;

  --lh-display: 1.0;
  --lh-h1: 1.08;
  --lh-h2: 1.15;
  --lh-body: 1.7;
  --lh-tight: 1.75;

  /* Weights */
  --w-light: 300;
  --w-regular: 400;
  --w-medium: 500;

  /* ---- Spacing scale ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 40px; --sp-8: 56px; --sp-9: 80px; --sp-10: 120px;
  --section-x: 56px;
  --section-y: 120px;
  --container: 1200px;

  /* ---- Radius (marketing = zero; a camada de produto usa cantos, em arch.css) ---- */
  --r-0: 0;
  --r-pill: 999px;

  /* ---- Borders ---- */
  --bw-hair: 0.5px;
  --bw-line: 1px;
  --bw-accent: 2px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(.23,1,.32,1);
  --ease-out: cubic-bezier(.23,1,.32,1);
  --dur-fast: 250ms;
  --dur-base: 400ms;
  --dur-slow: 900ms;
}

/* ============================================================
   Base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--white);
  color: var(--ink);
  font-family: var(--body);
  font-weight: var(--w-light);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--ink); color: var(--white); }

/* ============================================================
   Semantic type
   ============================================================ */
.jolf-hero {
  font-family: var(--display);
  font-weight: var(--w-regular);
  font-size: var(--fs-hero);
  line-height: var(--lh-display);
  letter-spacing: var(--track-tight);
  color: var(--ink);
}
.jolf-hero em { font-style: italic; font-weight: var(--w-regular); }

.jolf-h1 {
  font-family: var(--display);
  font-weight: var(--w-regular);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--track-tight);
}
.jolf-h1 em { font-style: italic; font-weight: var(--w-regular); }

.jolf-label {
  font-family: var(--body);
  font-weight: var(--w-regular);
  font-size: var(--fs-label);
  letter-spacing: var(--track-lg);
  text-transform: uppercase;
  color: var(--ink-30);
  display: inline-flex;
  align-items: center;
  gap: 16px;
}
.jolf-label::after {
  content: "";
  width: 32px; height: 0.5px;
  background: var(--ink-30);
  display: block;
}

.jolf-card-title {
  font-family: var(--display);
  font-weight: var(--w-regular);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: -0.01em;
}

strong, b { font-weight: var(--w-regular); }

code, kbd, samp, .jolf-mono {
  font-family: var(--mono);
  font-size: var(--fs-mono);
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}

/* The wordmark — o jeito CANONICO de renderizar `jolf`. Sempre tipo, nunca
   imagem. Os !important impedem que estilos posteriores quebrem fonte, caixa
   ou tracking. Tamanho e cor herdam. */
.jolf-wordmark {
  font-family: var(--display) !important;
  font-weight: var(--w-regular) !important;
  font-style: normal !important;
  text-transform: lowercase !important;
  letter-spacing: var(--track-tightest) !important;
  line-height: 1;
  display: inline-block;
  color: inherit;
}