/* ============================================================
   TOKENS — subsite Mozi
   Duas camadas. Primitivo guarda o valor; semântico guarda o papel.
   Nenhum componente consome primitivo direto. Se precisar, cria semântico.
   Base: DNA seções 3.1, 3.2, 3.6.
   ============================================================ */

:root {
  /* ---------- CAMADA 1 — PRIMITIVOS ---------- */

  /* cor */
  --c-white:        #FFFFFF;
  --c-sand-50:      #F2EDE8;
  --c-sand-100:     #E6DED6;
  --c-ink-900:      #0A0A0A;
  --c-ink-600:      #4A4A4A;
  --c-ink-400:      #7A7A7A;
  --c-ink-200:      #D8D8D8;
  --c-red-500:      #E85C5C;
  --c-red-600:      #C91C1C;
  --c-red-700:      #8A1010;
  --c-red-a08:      rgba(201, 28, 28, 0.08);
  --c-red-a30:      rgba(201, 28, 28, 0.30);

  /* escala de espaço — baseline 8px (DNA 3.6) */
  --s-1:  8px;
  --s-2:  16px;
  --s-3:  24px;
  --s-4:  32px;
  --s-5:  48px;
  --s-6:  64px;
  --s-7:  96px;
  --s-8:  128px;
  --s-9:  192px;

  /* famílias */
  --f-grotesk: "Helvetica Neue", "HelveticaNeue", Helvetica, Inter, Arial, sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* peso */
  --w-regular: 400;
  --w-medium:  500;
  --w-bold:    700;

  /* ---------- CAMADA 2 — SEMÂNTICOS ---------- */

  /* superfície — branco é o campo dominante (60–70%, DNA 3.1) */
  --surface-page:        var(--c-white);
  --surface-muted:       var(--c-sand-50);
  --surface-inverse:     var(--c-ink-900);
  /* véu das barras de cima e de baixo, quase invisível a pedido dela em 08/11/2026 */
  --surface-veil:        color-mix(in srgb, var(--surface-page) 10%, transparent);
  --surface-accent:      var(--c-red-600);
  --surface-highlight:   var(--c-red-a08);
  --border-pending:      1px dashed var(--c-red-a30);

  /* texto */
  --text-primary:        var(--c-ink-900);
  --text-secondary:      var(--c-ink-600);
  --text-muted:          var(--c-ink-400);
  --text-inverse:        var(--c-white);
  --text-inverse-muted:  rgba(255, 255, 255, 0.65);
  --text-accent:         var(--c-red-600);
  --text-on-accent:      var(--c-white);

  /* borda — hairline, nunca sombra */
  --border-hairline:     1px solid var(--c-ink-200);
  --border-strong:       1px solid var(--c-ink-900);
  --border-accent:       1px solid var(--c-red-600);
  --border-inverse:      1px solid rgba(255, 255, 255, 0.22);
  --rule-accent-weight:  6px;

  /* ação */
  --action-primary-bg:       var(--c-ink-900);
  --action-primary-text:     var(--c-white);
  --action-primary-bg-hover: var(--c-red-600);
  --action-secondary-text:   var(--c-ink-900);
  --action-secondary-line:   var(--c-red-600);
  --action-focus-ring:       var(--c-red-600);

  /* raio — corte seco por padrão (DNA 3.6: radius-0 editorial) */
  --radius-none: 0;
  --radius-sm:   2px;

  /* tipografia semântica — clamp para escalar sem breakpoint */
  --type-display-xl-size: clamp(3rem, 8.5vw, 6.5rem);
  --type-display-l-size:  clamp(2.5rem, 6vw, 4.5rem);
  --type-display-m-size:  clamp(1.875rem, 4vw, 3.25rem);
  --type-display-s-size:  clamp(1.375rem, 2.4vw, 2rem);
  --type-lead-size:       clamp(1.0625rem, 1.6vw, 1.375rem);
  --type-body-size:       1.0625rem;
  --type-body-sm-size:    0.9375rem;
  --type-eyebrow-size:    0.75rem;
  --type-mono-size:       0.8125rem;

  --type-display-leading: 0.95;
  --type-heading-leading: 1.05;
  --type-body-leading:    1.6;

  --type-display-tracking: -0.035em;
  --type-heading-tracking: -0.02em;
  --type-eyebrow-tracking: 0.18em;

  /* layout */
  --layout-max:      1280px;
  --layout-measure:  64ch;
  --layout-gutter:   var(--s-3);
  --layout-section:  var(--s-8);
  --layout-grid-cols: 12;

  /* movimento — curto e sem bounce */
  --motion-fast:  120ms;
  --motion-base:  200ms;
  --motion-slow:  900ms;
  --motion-ease:  cubic-bezier(0.2, 0, 0.2, 1);
  --motion-ease-out: cubic-bezier(0.25, 0.76, 0.355, 1);
  --motion-stagger: 60ms;

  /* balões do símbolo sobre o vídeo da capa */
  --balao-base:  clamp(70px, 9vw, 140px);
  --float-layer: 0;

  /* cursor próprio */
  --cursor-size:        18px;
  --cursor-eye-width:   56px;
  --cursor-pupil-color: var(--c-ink-900);
  --cursor-pupil-on-dark: var(--c-white);
  --cursor-size-hover:  52px;
  --cursor-color:       var(--c-red-600);
  --cursor-pill-bg:     var(--c-ink-900);
  --cursor-pill-text:   var(--c-white);
  --cursor-pill-radius: 999px;
  --cursor-pill-padding: 5px 14px;
  --cursor-pill-tracking: 0.04em;

  /* sublinhado de hover */
  --link-underline-thickness: 1px;
  --link-underline-offset:    0.18em;
  --title-underline-thickness: 0.05em;
  --title-underline-offset:    0.12em;

  --cursor-layer:       9999;

  /* revelação de texto — piso de opacidade da palavra ainda não lida */
  --reveal-floor: 0.12;
}

/* contexto invertido: redefine os mesmos papéis, componente não muda */
[data-surface="inverse"] {
  --surface-page:    var(--c-ink-900);
  --surface-muted:   #141414;
  --text-primary:    var(--c-white);
  --text-secondary:  var(--text-inverse-muted);
  --text-muted:      rgba(255, 255, 255, 0.45);
  --border-hairline: var(--border-inverse);
  --border-strong:   1px solid var(--c-white);
  --action-primary-bg:   var(--c-white);
  --action-primary-text: var(--c-ink-900);
  --action-secondary-text: var(--c-white);
}

[data-surface="muted"] { --surface-page: var(--c-sand-50); }

@media (max-width: 860px) {
  :root { --layout-gutter: var(--s-2); }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms; --motion-base: 0ms; --motion-slow: 0ms; --motion-stagger: 0ms;
    --reveal-floor: 1;
  }
}