/* qrwine — Design Tokens
 * Tradução directa para CSS variables. Importa num root.css ou tailwind.config.
 * Paleta inspirada na vindima portuguesa: cobre + verde-azinho + creme-areia.
 */

:root {
  /* ─── Cores ─── */
  --paper:        #f4eee0;  /* fundo principal — papel envelhecido */
  --paper-soft:   #faf5e8;  /* fundo de cartões, secções alternadas */
  --ink:          #1a1612;  /* texto e CTAs primários */
  --ink-soft:     #3a3228;  /* texto secundário */

  --copper:       #b85c2e;  /* acento principal — CTAs, links, números importantes */
  --copper-deep:  #8a3f1a;  /* hover, sombra de botões 3D */

  --green:        #3d5840;  /* secundário — selos "ativo", footer, fundos contrastantes */
  --green-light:  #7a9573;  /* texto sobre verde-escuro, ilustrações */

  --cream:        #e8d8a8;  /* destaque sobre verde, dourado suave */
  --rule:         #d8ceb4;  /* divisórias, bordas de cartões */
  --muted:        #8a7a5e;  /* metadados, micro-tipografia */

  /* Status */
  --status-active-bg:    #e6efd9;
  --status-draft-bg:     #ede5d4;

  /* ─── Tipografia ─── */
  --font-sans:    'Geist', 'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Fraunces', Georgia, serif;       /* italic para acentos editoriais */
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Pesos */
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;

  /* Escalas tipográficas — desktop / mobile */
  --t-display-1:  84px;   /* hero desktop */
  --t-display-2:  60px;   /* secção H2 */
  --t-display-3:  44px;   /* mobile hero */
  --t-display-4:  32px;   /* títulos médios */

  --t-h1:         30px;
  --t-h2:         22px;
  --t-h3:         19px;
  --t-h4:         17px;

  --t-body-lg:    18px;
  --t-body:       15px;
  --t-body-sm:    13px;
  --t-caption:    11px;   /* mono labels */
  --t-micro:      9.5px;  /* mono micro-labels com letter-spacing 0.15em */

  /* Letter-spacing convention */
  --ls-tight:     -0.045em; /* hero display */
  --ls-display:   -0.035em;
  --ls-tight-sm:  -0.025em; /* sub-titles */
  --ls-mono:      0.15em;   /* todas as labels mono caps */

  /* ─── Espaçamento ─── (escala 4px) */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-8: 32px;  --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;

  /* ─── Raios ─── */
  --r-sm:  6px;
  --r-md:  10px;   /* botões, inputs */
  --r-lg:  12px;   /* cartões */
  --r-xl:  16px;
  --r-2xl: 18px;   /* cartões grandes / pricing */
  --r-pill: 9999px;

  /* ─── Sombras ─── */
  --shadow-card:    0 4px 12px -4px rgba(0,0,0,0.08);
  --shadow-cta:     0 4px 0 var(--copper-deep);   /* botão 3D característico */
  --shadow-fab:     0 8px 24px -4px rgba(0,0,0,0.3);
  --shadow-bottle:  0 20px 50px -10px rgba(0,0,0,0.25);

  /* ─── Layout ─── */
  --container-max: 1280px;
  --gutter-desktop: 60px;
  --gutter-mobile:  22px;

  /* Breakpoints (mobile-first) */
  --bp-sm:  480px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;

  /* ─── Animações ─── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --d-fast:   150ms;
  --d-base:   240ms;
  --d-slow:   400ms;
}

/* Dark surface variants — para uso em footer, planos pricing, hero do consumidor */
.surface-ink   { background: var(--ink);   color: var(--paper); }
.surface-green { background: var(--green); color: var(--paper); }
.surface-soft  { background: var(--paper-soft); color: var(--ink); }