/* ============================================
   CHOPERIA DO MÁRIO — Design Tokens (v2, pós-referências)
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Alegreya:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto+Slab:wght@300;400;500;600;700;800;900&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');

@font-face {
  font-family: 'Avenida';
  src: url('fonts/AvenidaStd-Regular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ——— AMARELO ÂMBAR (cor-mãe da marca, observada nas peças) ——— */
  --amarelo: #F2A71B;          /* amarelo hero, dominante */
  --amarelo-claro: #F5B836;
  --amarelo-escuro: #D98E0E;
  --mostarda: #C77D10;

  /* ——— MARROM (texto e acento escuro) ——— */
  --marrom: #3A1E0A;           /* texto principal (pós-refs) */
  --marrom-medio: #5C3214;
  --marrom-claro: #7A4A22;

  /* ——— PRETO / NOITE ——— */
  --carvao: #0F0F0F;
  --noite: #1A1512;
  --madeira: #2A1F18;
  --sombra: #3D2C22;

  /* ——— CREMES (papel, fundo alt) ——— */
  --creme: #F5ECD6;           /* creme claro das refs */
  --creme-claro: #FAF3E0;
  --papel: #EFE4C7;
  --linho: #E8DBB8;
  --marfim: #FFFFFF;

  /* ——— BORDÔ (acento tradição) ——— */
  --bordo: #7A2B1F;
  --vinho: #5C1A11;
  --cereja: #9B3E2E;

  /* ——— DOURADOS (legados — ainda usados em detalhes) ——— */
  --ambar: var(--amarelo);
  --dourado: var(--amarelo-claro);
  --dourado-claro: #F5CF6A;
  --ouro: #F0D488;

  /* ——— VERDE (raro) ——— */
  --garrafa: #2D4A3E;

  /* ——— TOKENS SEMÂNTICOS ——— */
  --bg: var(--creme);
  --bg-alt: var(--creme-claro);
  --bg-hero: var(--amarelo);
  --bg-dark: var(--carvao);
  --bg-dark-alt: var(--noite);

  --ink: var(--marrom);
  --ink-muted: var(--marrom-medio);
  --ink-soft: var(--marrom-claro);
  --ink-inverse: var(--creme);

  --accent: var(--amarelo);
  --accent-strong: var(--amarelo-escuro);
  --accent-soft: var(--amarelo-claro);

  --highlight: var(--bordo);

  --rule: rgba(58,30,10,0.18);
  --rule-strong: rgba(58,30,10,0.4);
  --rule-inverse: rgba(245,236,214,0.18);

  /* ——— TIPOGRAFIA ——— */
  --font-display: 'Alegreya', Georgia, serif;       /* títulos serifa */
  --font-body: 'Roboto Slab', Georgia, serif;       /* texto corrido */
  --font-script: 'Avenida', 'Alegreya', serif;      /* decoração/assinatura */
  /* caption/mono = Roboto Slab tracked out — NÃO usar mono fora da identidade */
  --font-mono: 'Roboto Slab', Georgia, serif;

  /* Escala tipográfica */
  --t-xs: 11px;
  --t-sm: 13px;
  --t-base: 15px;
  --t-md: 17px;
  --t-lg: 20px;
  --t-xl: 24px;
  --t-2xl: 32px;
  --t-3xl: 44px;
  --t-4xl: 60px;
  --t-5xl: 84px;
  --t-6xl: 120px;
  --t-7xl: 168px;

  /* ——— ESPAÇAMENTO ——— */
  --s-0: 0;
  --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;
  --s-32: 128px;

  /* ——— RAIOS ——— */
  --r-none: 0;
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* ——— SOMBRAS ——— */
  --shadow-sm: 0 1px 2px rgba(26,21,18,0.08);
  --shadow-md: 0 4px 14px rgba(26,21,18,0.15);
  --shadow-lg: 0 18px 48px rgba(26,21,18,0.25);
  --shadow-polaroid: 2px 3px 0 rgba(58,30,10,0.1), 6px 8px 18px rgba(58,30,10,0.18);

  --density: 1;
}

[data-density="compact"] { --density: 0.85; }
[data-density="cozy"] { --density: 1; }
[data-density="spacious"] { --density: 1.2; }

/* ——— RESET ——— */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  font-size: var(--t-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ——— UTILITÁRIOS ——— */
.serif { font-family: var(--font-display); }
.slab { font-family: var(--font-body); }
.script { font-family: var(--font-script); }
.mono { font-family: var(--font-mono); font-size: 0.86em; }
.italic { font-style: italic; }

.eyebrow {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink-soft);
  font-weight: 500;
}

/* ——— TEXTURA DE PAPEL ——— */
.paper-tex {
  background-image:
    radial-gradient(rgba(58,30,10,0.018) 1px, transparent 1px),
    radial-gradient(rgba(58,30,10,0.025) 1px, transparent 1px);
  background-size: 18px 18px, 31px 31px;
  background-position: 0 0, 9px 15px;
}

.dark-tex {
  background-image:
    radial-gradient(rgba(242,167,27,0.03) 1px, transparent 1.5px),
    radial-gradient(rgba(255,255,255,0.015) 1px, transparent 1px);
  background-size: 22px 22px, 37px 37px;
}

/* ——— BLOB ORGÂNICO (moldura de fotos, padrão das peças) ——— */
.blob {
  -webkit-mask: radial-gradient(circle at 30% 40%, black 70%, transparent 71%) 0 0/100% 100%;
}
.blob-shape-1 {
  border-radius: 58% 42% 52% 48% / 45% 55% 45% 55%;
}
.blob-shape-2 {
  border-radius: 42% 58% 38% 62% / 56% 44% 56% 44%;
}
.blob-shape-3 {
  border-radius: 60% 40% 40% 60% / 60% 40% 60% 40%;
}

/* ——— POLAROID ——— */
.polaroid {
  background: var(--creme-claro);
  padding: 8px 8px 32px;
  box-shadow: var(--shadow-polaroid);
  border: 1px solid rgba(58,30,10,0.06);
}
.polaroid.tilt-l { transform: rotate(-3deg); }
.polaroid.tilt-r { transform: rotate(3deg); }
.polaroid.tilt-sm-l { transform: rotate(-1.5deg); }
.polaroid.tilt-sm-r { transform: rotate(1.5deg); }

/* ——— FILETE ——— */
.fillet {
  height: 1px;
  background: var(--rule);
  position: relative;
}
.fillet::before, .fillet::after {
  content: '';
  position: absolute;
  top: -2px;
  width: 5px;
  height: 5px;
  background: var(--ink);
  border-radius: 50%;
}
.fillet::before { left: 0; }
.fillet::after { right: 0; }

/* ——— SELECTION ——— */
::selection { background: var(--amarelo); color: var(--marrom); }

/* ——— SCROLLBAR ——— */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--papel); }
::-webkit-scrollbar-thumb { background: var(--marrom); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--marrom-medio); }