/* ==========================================================================
   MOLGRAM — design-tokens.css
   Sistema de design em camadas (tokens -> base -> componentes).
   Arquivo ÚNICO compartilhado por todas as páginas do site
   (index, catalogo, 10 coleções, 300 produtos).
   Tese visual: ludicidade geométrica + artesanato; assinatura = figuras
   compostas pelas 7 peças do tangram (motivo gráfico no hero).
   Tema claro oficial + marca v3 (filha em silhueta).
   --------------------------------------------------------------------------
   CONTRASTES VERIFICADOS (cálculo de luminância relativa, fundo #FFFFFF):
   --text-1 #0F3A44 ..... 12.29:1 | --text-2 #3D616B ..... 6.73:1
   --text-3 #5A7076 ..... 5.23:1  | branco sobre --primary #14505C ..... 9.01:1
   branco sobre --primary-hover #0E3A44 ..... 12.30:1
   --primary sobre branco ..... 9.01:1 | --accent #E07B39 sobre branco ..... 2.97:1
   --accent-hover #D2691E sobre branco ..... 3.63:1
   O laranja foi REBAIXADO para uso decorativo/apoio: contraste < 4.5:1 —
   NUNCA em texto pequeno sobre fundo claro. Ação primária é sempre o teal.
   ========================================================================== */

/* ---- Tipografia de título: Playfair Display (fallback Didot/Bodoni) ---- */
@font-face{
  font-family:"Playfair Display";
  src:url("/fonts/playfair-400.ttf") format("truetype");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Playfair Display";
  src:url("/fonts/playfair-700.ttf") format("truetype");
  font-weight:700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Playfair Display";
  src:url("/fonts/playfair-900.ttf") format("truetype");
  font-weight:900;font-style:normal;font-display:swap;
}

:root{
  /* ---- Cores por função ---- */
  --bg:               #FFFFFF;  /* fundo da página — tema claro */
  --surface:          #FFFFFF;  /* superfície: cards, header */
  --surface-raised:   #FFFFFF;  /* superfície elevada (usa sombra) */
  --surface-soft:     #EAF2F3;  /* faixa suave de realce (teal 6%) */
  --text-1:           #0F3A44;  /* texto principal */
  --text-2:           #3D616B;  /* texto secundário */
  --text-3:           #5A7076;  /* texto auxiliar / rodapé */
  --border:           #D8E4E6;  /* borda sutil */
  --border-strong:    #B9CFD4;  /* borda em hover/interação */

  --primary:          #14505C;  /* ação primária (teal oficial) */
  --primary-hover:    #0E3A44;  /* hover da primária */
  --primary-active:   #0A2C33;  /* pressionado */
  --primary-soft:     #EAF2F3;  /* fundo suave da ação */
  --on-primary:       #FFFFFF;  /* texto sobre a ação primária */
  --disabled-bg:      #E3ECEE;
  --disabled-text:    #8A9BA0;

  --accent:           #E07B39;  /* laranja oficial — SÓ decorativo/apoio */
  --accent-hover:     #D2691E;  /* hover do acento (detalhes grandes) */
  --focus:            #14505C;  /* anel de foco visível */

  --success:          #2E7D32;
  --warning:          #8A5A00;
  --error:            #B3261E;

  /* ---- Aliases legados (estilos inline das páginas de produto) ---- */
  --bronze: var(--primary);
  --ink:    var(--text-1);
  --muted:  var(--text-2);

  /* ---- Tipografia: 1 família principal + 1 display de marca ---- */
  --font-sans:    Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-display: "Playfair Display",Didot,"Bodoni MT",Georgia,serif;

  --fs-hero:       clamp(2rem, 4.5vw + 1rem, 2.625rem); /* 32–42px */
  --fs-h1:         1.75rem;    /* 28px — título de página */
  --fs-h2:         1.375rem;   /* 22px — seção / preço do produto */
  --fs-body:       1rem;       /* 16px */
  --fs-small:      0.875rem;   /* 14px */
  --fs-caption:    0.75rem;    /* 12px — rótulos */
  --fs-price-card: 1.0625rem;  /* 17px — preço no card */
  --fs-price-page: 2rem;       /* 32px — preço na página do produto */

  --lh-tight: 1.15;
  --lh-title: 1.3;
  --lh-body:  1.6;

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

  /* ---- Espaçamento (escala 4/8/12/16/24/32/48/64) ---- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-12:48px;
  --sp-16:64px;

  /* ---- Raios ---- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-full: 999px;

  /* ---- Sombras por camada (tingidas de teal) ---- */
  --sh-1: 0 1px 2px rgba(20,80,92,.07), 0 2px 8px rgba(20,80,92,.06);
  --sh-2: 0 2px 4px rgba(20,80,92,.10), 0 10px 24px rgba(20,80,92,.12);
  --sh-3: 0 4px 8px rgba(20,80,92,.12), 0 18px 40px rgba(20,80,92,.16);

  /* ---- Movimento: só funcional, 100–300ms ---- */
  --dur-1: 100ms;
  --dur-2: 200ms;
  --dur-3: 300ms;
  --ease-out: cubic-bezier(.2,.7,.3,1);

  /* ---- Motivo tangram (assinatura): as 7 peças em faixa decorativa ---- */
  --tangram-strip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 660 120' role='img' aria-hidden='true'%3E%3Cg opacity='0.16'%3E%3Cpolygon points='12,8 112,8 12,108' fill='%2314505C'/%3E%3Cpolygon points='128,8 228,8 128,108' fill='%23E07B39'/%3E%3Cpolygon points='244,8 314.7,8 244,78.7' fill='%2314505C'/%3E%3Crect x='330' y='8' width='70.7' height='70.7' fill='%23E07B39'/%3E%3Cpolygon points='416,8 486.7,8 522,43.4 451.4,43.4' fill='%2314505C'/%3E%3Cpolygon points='538,8 588,8 538,58' fill='%23E07B39'/%3E%3Cpolygon points='538,64 588,64 538,114' fill='%2314505C'/%3E%3C/g%3E%3C/svg%3E");
}

/* ==========================================================================
   BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-sans);
  background:var(--bg);
  color:var(--text-1);
  margin:0;
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--primary)}
::selection{background:var(--primary-soft)}

/* Títulos em Playfair Display */
h1,h2,h3{
  font-family:var(--font-display);
  font-weight:var(--fw-bold);
  line-height:var(--lh-title);
  color:var(--text-1);
  text-wrap:balance;
}

/* Foco visível global — nunca só por cor */
:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:2px;
  border-radius:var(--r-sm);
}

/* ==========================================================================
   LAYOUT
   ========================================================================== */
.wrap{max-width:1200px;margin:0 auto;padding-left:20px;padding-right:20px}
.wrap > h1{
  font-size:var(--fs-h1);
  margin:var(--sp-8) 0 var(--sp-2);
  letter-spacing:-.01em;
}
.wrap > h1 + p{color:var(--text-2);margin:0 0 var(--sp-4);max-width:62ch}
.wrap > h2{
  font-size:var(--fs-h2);
  margin:var(--sp-8) 0 var(--sp-2);
  padding-left:var(--sp-3);
  border-left:4px solid var(--accent);
}

/* ==========================================================================
   HEADER / NAVEGAÇÃO
   ========================================================================== */
header{
  border-bottom:1px solid var(--border);
  padding:var(--sp-4) 0;
  background:var(--surface);
}
header .wrap{
  display:flex;justify-content:space-between;align-items:center;
  gap:var(--sp-3);flex-wrap:wrap;
}
/* Marca oficial (logo quadrada: filha em silhueta + tangram + wordmark) */
.logo{
  line-height:1;
  display:inline-flex;align-items:center;
}
.logo img{
  display:block;
  height:80px;            /* desktop: 72–96px */
  width:auto;
  border-radius:var(--r-sm);
}
nav{display:flex;align-items:center;gap:var(--sp-1);flex-wrap:wrap}
nav a{
  display:inline-flex;align-items:center;
  min-height:44px;               /* alvo de toque */
  padding:var(--sp-2) var(--sp-3);
  color:var(--text-1);text-decoration:none;font-weight:var(--fw-medium);
  border-radius:var(--r-sm);
  transition:background-color var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out);
}
nav a:hover{background:var(--primary-soft);color:var(--primary)}
nav a:active{background:var(--primary-soft)}

/* ==========================================================================
   HERO (index) — assinatura tangram como motivo gráfico
   ========================================================================== */
.hero{
  text-align:center;
  padding:var(--sp-16) var(--sp-4) var(--sp-12);
  background-image:var(--tangram-strip);
  background-repeat:no-repeat;
  background-position:right var(--sp-8) center;
  background-size:min(360px,38vw) auto;
}
.hero h1{
  font-family:var(--font-display);
  font-weight:var(--fw-bold);
  font-size:var(--fs-hero);
  line-height:var(--lh-tight);
  margin:0 0 var(--sp-4);
  letter-spacing:-.015em;
}
.hero p{font-size:1.125rem;color:var(--text-2);max-width:58ch;margin:0 auto var(--sp-4)}
.hero p:last-child{margin-bottom:0}

/* ==========================================================================
   CATÁLOGO — grade de cards
   ========================================================================== */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:var(--sp-4);
  padding:var(--sp-4) 0;
}
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  overflow:hidden;
  text-decoration:none;color:inherit;
  box-shadow:var(--sh-1);
  transition:transform var(--dur-2) var(--ease-out),
             box-shadow var(--dur-2) var(--ease-out),
             border-color var(--dur-2) var(--ease-out);
  display:flex;flex-direction:column;
  min-width:0; /* permite encolher sem overflow */
}
.card:hover{
  transform:translateY(-3px);
  box-shadow:var(--sh-2);
  border-color:var(--border-strong);
}
.card:active{transform:translateY(0);box-shadow:var(--sh-1)}
.card img{width:100%;height:200px;object-fit:cover;background:var(--surface-soft)}
.card .info{
  padding:var(--sp-4);
  display:flex;flex-direction:column;flex:1;
}
.card .nome{
  font-weight:var(--fw-semibold);
  font-size:var(--fs-body);
  line-height:1.45;
  margin:0 0 var(--sp-1);
  overflow-wrap:break-word;      /* teste de estresse: nome longo */
  min-height:2.9em;              /* alinha preços entre cards */
}
.card .cat{font-size:var(--fs-caption);color:var(--text-2);margin:0}
.card .preco{
  color:var(--primary);
  font-weight:var(--fw-bold);
  font-size:var(--fs-price-card);
  font-variant-numeric:tabular-nums; /* algarismos tabulares no R$ */
  letter-spacing:.01em;
  margin:auto 0 0;
  padding-top:var(--sp-2);
}

/* ==========================================================================
   BOTÃO — UMA ação primária por contexto (teal; laranja nunca é ação)
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;              /* alvo de toque */
  padding:var(--sp-3) var(--sp-8);
  background:var(--primary);
  color:var(--on-primary);
  border:2px solid transparent;border-radius:var(--r-sm);
  font-family:var(--font-sans);
  font-size:var(--fs-body);font-weight:var(--fw-semibold);
  text-decoration:none;cursor:pointer;
  transition:background-color var(--dur-2) var(--ease-out),
             transform var(--dur-1) var(--ease-out),
             box-shadow var(--dur-2) var(--ease-out);
}
.btn:hover{background:var(--primary-hover);box-shadow:var(--sh-1)}
.btn:active{background:var(--primary-active);transform:translateY(1px);box-shadow:none}
.btn:disabled,.btn[aria-disabled="true"]{
  background:var(--disabled-bg);color:var(--disabled-text);
  cursor:not-allowed;box-shadow:none;transform:none;
}

/* ==========================================================================
   PÁGINA DE PRODUTO
   ========================================================================== */
.prod{
  display:grid;grid-template-columns:1fr 1fr;
  gap:var(--sp-12);
  padding:var(--sp-8) 0;
  align-items:start;
}
.prod > *{min-width:0} /* nome longo nunca estoura a coluna */
.prod img{
  width:100%;border-radius:var(--r-lg);
  border:1px solid var(--border);
  box-shadow:var(--sh-1);
  background:var(--surface-soft);
}
.prod h1{
  font-size:var(--fs-h1);
  margin:var(--sp-2) 0;letter-spacing:-.01em;
  overflow-wrap:break-word;
}
.prod h2{ /* preço em destaque */
  font-size:var(--fs-price-page);
  line-height:var(--lh-tight);
  color:var(--primary);
  font-variant-numeric:tabular-nums;
  margin:var(--sp-4) 0;
  letter-spacing:-.01em;
}
.prod p{margin:0 0 var(--sp-3);max-width:60ch}
.prod .btn{margin-top:var(--sp-2)}
/* Link "← Catálogo" (voltar) */
.wrap > p > a[href="/catalogo.html"]{
  display:inline-flex;align-items:center;min-height:44px;
  color:var(--text-2);text-decoration:none;font-weight:var(--fw-medium);
  border-radius:var(--r-sm);
  margin-top:var(--sp-4);
}
.wrap > p > a[href="/catalogo.html"]:hover{color:var(--primary);text-decoration:underline}

/* ==========================================================================
   RODAPÉ
   ========================================================================== */
footer{
  border-top:1px solid var(--border);
  padding:var(--sp-8) 0;
  margin-top:var(--sp-16);
  text-align:center;color:var(--text-3);
  font-size:var(--fs-small);
  background:var(--surface);
}
footer p{margin:0 0 var(--sp-2);max-width:70ch;margin-inline:auto}
footer p:last-child{margin-bottom:0}
/* Logo oficial maior no rodapé */
.footer-logo{
  height:120px;
  width:auto;
  margin:0 auto var(--sp-4);
  border-radius:var(--r-md);
}

/* ==========================================================================
   ESTADOS — vazio / erro / carregamento (utilitários genéricos)
   ========================================================================== */
.empty-state,.error-state,.loading-state{
  text-align:center;
  padding:var(--sp-12) var(--sp-4);
  color:var(--text-2);
}
.empty-state h2,.error-state h2{
  font-family:var(--font-display);
  font-size:var(--fs-h2);
  color:var(--text-1);
}
.error-state{color:var(--error)}
.error-state h2{color:var(--error)}
/* Carregamento: indicador neutro, nunca depende só de cor */
.loading-state::before{
  content:"";
  display:block;
  width:40px;height:40px;
  margin:0 auto var(--sp-3);
  border:4px solid var(--primary-soft);
  border-top-color:var(--primary);
  border-radius:var(--r-full);
  animation:mol-spin var(--dur-3) linear infinite;
}
@keyframes mol-spin{to{transform:rotate(360deg)}}

/* ==========================================================================
   RESPONSIVO — reorganiza, não só encolhe
   360px: 2 colunas compactas · 768px: grade fluida · 1280px: largura plena
   ========================================================================== */
@media (max-width:1023px){
  .prod{gap:var(--sp-8)}
}
@media (max-width:900px){
  .hero{background-image:none} /* motivo tangram sai no mobile */
  .prod{grid-template-columns:1fr;gap:var(--sp-6);padding:var(--sp-6) 0}
  .prod img{max-width:640px}
}
@media (max-width:640px){
  .wrap{padding-left:var(--sp-4);padding-right:var(--sp-4)}
  header{padding:var(--sp-3) 0}
  .logo img{height:56px} /* logo menor no mobile */
  .hero{padding:var(--sp-12) var(--sp-4) var(--sp-8)}
  .hero p{font-size:var(--fs-body)}
  /* Catálogo vira 2 colunas compactas no celular */
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3)}
  .card img{height:140px}
  .card .info{padding:var(--sp-3)}
  .card .nome{font-size:var(--fs-small);min-height:2.8em}
  .card .preco{font-size:var(--fs-body)}
  .wrap > h2{font-size:1.125rem}
  .footer-logo{height:96px} /* logo do rodapé menor no mobile */
  .btn{width:100%;max-width:420px} /* CTA em largura total no mobile */
  .prod .btn{width:100%;max-width:none}
}

/* ==========================================================================
   MOVIMENTO REDUZIDO — zera animações
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation:none !important;
    transition:none !important;
  }
}