/* =============================================================================
   ZARINNA — Design tokens
   -----------------------------------------------------------------------------
   Paleta oficial (brief, seção 1) — SOMENTE duas matizes:
     BRICK ORANGE  #C14A09
     LIGHT YELLOW  #FFFFC5
   Cada matiz tem apenas variações de tom da PRÓPRIA matiz (tints/shades).
   Nenhuma cor concorrente: sem azul, verde, cinza frio, preto puro.
   -----------------------------------------------------------------------------
   Contraste (WCAG 2.1, calculado):
     #C14A09 sobre #FFFFC5 .... 4.79:1  → AA texto normal ✓
     #FFFFC5 sobre #C14A09 .... 4.79:1  → AA texto normal ✓
     #8F3606 sobre #FFFFC5 .... 7.55:1  → AA e AAA texto normal ✓
   Regra: texto pequeno (<18px) sobre amarelo usa --z-orange-ink (o tom escuro).
   Texto grande/serifado usa --z-orange. Sobre laranja, sempre --z-yellow.
   ========================================================================== */

:root {
  /* ── Matiz 1: Brick Orange ─────────────────────────────────────────────── */
  --z-orange:        #C14A09; /* cor oficial */
  --z-orange-ink:    #8F3606; /* shade — texto pequeno sobre amarelo (7.55:1) */
  --z-orange-deep:   #6E2904; /* shade — uso pontual em hover/estado ativo */
  --z-orange-soft:   #D96A2A; /* tint — detalhes, filetes */
  --z-orange-wash:   #E8894F; /* tint — hover suave em superfícies */
  --z-orange-α10:    rgba(193, 74, 9, 0.10); /* filetes e bordas discretas */
  --z-orange-α20:    rgba(193, 74, 9, 0.20);
  --z-orange-α40:    rgba(193, 74, 9, 0.40);
  /* Deep (shade) com transparência — véus sobre fotografia */
  --z-orange-deep-α00: rgba(110, 41, 4, 0);
  --z-orange-deep-α45: rgba(110, 41, 4, 0.45);
  --z-orange-deep-α92: rgba(110, 41, 4, 0.92);

  /* ── Matiz 2: Light Yellow ─────────────────────────────────────────────── */
  --z-yellow:        #FFFFC5; /* cor oficial — fundo predominante */
  --z-yellow-soft:   #FFFFDD; /* tint — superfícies elevadas (header, cards) */
  --z-yellow-deep:   #F2F2A8; /* shade — estados sutis, hover de superfície */
  --z-yellow-α12:    rgba(255, 255, 197, 0.12);
  --z-yellow-α60:    rgba(255, 255, 197, 0.60);

  /* ── Papéis semânticos (nunca usar as cores cruas no CSS de página) ───── */
  --z-bg:            var(--z-yellow);         /* fundo predominante do site */
  --z-bg-raised:     var(--z-yellow-soft);    /* header, painéis */
  --z-bg-sunken:     var(--z-yellow-deep);    /* faixas alternadas */
  --z-block:         var(--z-orange);         /* grandes blocos laranja */
  --z-block-deep:    var(--z-orange-deep);
  --z-text:          var(--z-orange-ink);     /* texto padrão sobre amarelo */
  --z-text-display:  var(--z-orange);         /* títulos grandes sobre amarelo */
  /* Legendas e metadados. O alfa NÃO é estético: a 0,72 o tom composto dava
     3,98:1 sobre o amarelo e 3,71:1 sobre a faixa mais escura — abaixo de AA.
     A 0,85 o composto sobe para ~5,4:1 e ~4,9:1 (ADR-022). */
  --z-text-muted:    rgba(143, 54, 6, 0.85);  /* legendas, metadados */
  --z-text-on-block: var(--z-yellow);         /* texto sobre laranja */
  --z-border:        var(--z-orange-α20);
  --z-border-strong: var(--z-orange-α40);
  --z-focus:         var(--z-orange-deep);

  /* ── Tipografia ───────────────────────────────────────────────────────── */
  --z-font-display: "Cormorant Garamond", "Bodoni Moda", "Times New Roman", Georgia, serif;
  --z-font-body:    "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --z-font-script:  "Parisienne", "Cormorant Garamond", cursive;

  /* Escala tipográfica — fluida (clamp), editorial e com espaçamento refinado */
  --z-fs-mega:   clamp(3.4rem, 11vw, 9.5rem);   /* hero */
  --z-fs-h1:     clamp(2.6rem, 6.4vw, 5.2rem);
  --z-fs-h2:     clamp(2.1rem, 4.6vw, 3.8rem);
  --z-fs-h3:     clamp(1.5rem, 2.4vw, 2.1rem);
  --z-fs-h4:     clamp(1.15rem, 1.5vw, 1.35rem);
  --z-fs-body:   1.0625rem;   /* 17px */
  --z-fs-body-lg:clamp(1.125rem, 1.6vw, 1.35rem);
  --z-fs-small:  0.8125rem;   /* 13px */
  --z-fs-label:  0.6875rem;   /* 11px — labels uppercase e tracking amplo */
  --z-fs-script: clamp(1.4rem, 2.6vw, 2.2rem);

  --z-lh-tight:  1.02;
  --z-lh-display:1.08;
  --z-lh-body:   1.72;

  --z-ls-mega:   -0.02em;
  --z-ls-display:-0.01em;
  --z-ls-label:   0.22em;   /* padrão editorial uppercase */
  --z-ls-label-lg:0.34em;   /* nav e assinatura da marca */

  /* ── Espaçamento (escala 8pt com respiro editorial) ───────────────────── */
  --z-sp-1: 0.25rem;  --z-sp-2: 0.5rem;   --z-sp-3: 0.75rem;
  --z-sp-4: 1rem;     --z-sp-5: 1.5rem;   --z-sp-6: 2rem;
  --z-sp-7: 3rem;     --z-sp-8: 4rem;     --z-sp-9: 6rem;
  --z-sp-10: 8rem;    --z-sp-11: 11rem;

  /* Seções: muito espaço negativo — regra de direção de arte do brief */
  --z-section-y:   clamp(4.5rem, 10vw, 9rem);
  --z-gutter:      clamp(1.25rem, 5vw, 5.5rem);
  --z-maxw:        1560px;   /* conteúdo editorial */
  --z-maxw-text:   62ch;     /* medida de leitura confortável */

  /* ── Traço e forma: cantos vivos, sem sombras pesadas ─────────────────── */
  --z-radius:      0px;      /* brief proíbe cantos arredondados nos botões */
  --z-radius-soft: 2px;      /* imagens e inputs no limite do perceptível */
  --z-hairline:    1px solid var(--z-border);
  --z-hairline-strong: 1px solid var(--z-border-strong);

  /* ── Movimento: refinado, sem exagero (brief, seção 14) ───────────────── */
  --z-ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --z-ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --z-dur-fast:  180ms;
  --z-dur:       420ms;
  --z-dur-slow:  760ms;
  --z-dur-reveal:1100ms;

  /* ── Camadas ──────────────────────────────────────────────────────────── */
  --z-z-header: 100;
  --z-z-drawer: 200;
  --z-z-bag:    300;
  --z-z-modal:  400;
}

/* Acessibilidade: respeita quem pediu menos movimento */
@media (prefers-reduced-motion: reduce) {
  :root {
    --z-dur-fast: 1ms;
    --z-dur: 1ms;
    --z-dur-slow: 1ms;
    --z-dur-reveal: 1ms;
  }
}