/* ============================================================
   MAYSART — DESIGN TOKENS v1.0
   E-commerce de papelaria personalizada
   Tipografia: Marcellus (títulos) · Poppins (textos) · Sacramento (acento)
   Ícones: Hugeicons — Stroke Rounded, 24×24, 1.5px, currentColor
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Marcellus&family=Poppins:wght@300;400;500;600;700&family=Sacramento&display=swap");

:root{
  color-scheme: light;

  /* ---------- MARCA :: CACAU (ação primária, títulos, ícones) ---------- */
  --cacau-50:#F6F2EC;
  --cacau-100:#E8DFD2;
  --cacau-200:#CFC0AB;
  --cacau-300:#A4907A;
  --cacau-400:#6F5C46;
  --cacau-500:#3E3121;        /* BASE */
  --cacau-600:#332818;        /* hover */
  --cacau-700:#271E12;        /* active */
  --cacau-800:#1B150D;
  --cacau-border:#D8CCBB;

  /* ---------- MARCA :: ROSA (assinatura, ação secundária) ---------- */
  --rosa-50:#FDF7F7;
  --rosa-100:#FAEBEB;
  --rosa-200:#F6D9D9;
  --rosa-300:#F2CCCD;         /* BASE */
  --rosa-400:#E8B2B4;         /* hover */
  --rosa-500:#DB9799;         /* active / foco */
  --rosa-600:#C1777A;
  --rosa-700:#9C595C;
  --rosa-800:#6E3D3F;
  --rosa-border:#EFC3C4;

  /* ---------- APOIO :: PÊSSEGO (Tags & Etiquetas) ---------- */
  --pessego-50:#FFF8F2;
  --pessego-100:#FEEFE2;
  --pessego-200:#FEE1CC;      /* BASE */
  --pessego-300:#F9CCA9;
  --pessego-400:#EDAF80;
  --pessego-500:#CE8A57;
  --pessego-600:#9C6539;
  --pessego-border:#F7D5B9;

  /* ---------- APOIO :: BAUNILHA (Cartões) ---------- */
  --baunilha-50:#FFFCF3;
  --baunilha-100:#FEF5E0;
  --baunilha-200:#FDEBCA;     /* BASE */
  --baunilha-300:#FADFA6;
  --baunilha-400:#EFC873;
  --baunilha-500:#CFA347;
  --baunilha-600:#96742C;
  --baunilha-border:#F6DFB4;

  /* ---------- APOIO :: CÉU (Embalagens) ---------- */
  --ceu-50:#F4FBFC;
  --ceu-100:#E3F4F7;
  --ceu-200:#C9E7EC;
  --ceu-300:#B4E3EB;          /* BASE */
  --ceu-400:#8CCBD6;
  --ceu-500:#5FA8B5;
  --ceu-600:#3D7C88;
  --ceu-border:#B9DCE2;

  /* ---------- APOIO :: SÁLVIA (Sacolas) ---------- */
  --salvia-50:#F6F9F4;
  --salvia-100:#EAF1E6;
  --salvia-200:#D8E4D0;       /* BASE */
  --salvia-300:#BCCFB2;
  --salvia-400:#9AB38D;
  --salvia-500:#748C68;
  --salvia-600:#53664A;
  --salvia-border:#CBDAC2;

  /* ---------- APOIO :: LILÁS (Convites & Papelaria de eventos) ---------- */
  --lilas-50:#FAF7FB;
  --lilas-100:#F2EBF5;
  --lilas-200:#E7DCEE;        /* BASE */
  --lilas-300:#D3C0DE;
  --lilas-400:#B69DC5;
  --lilas-500:#8F76A0;
  --lilas-600:#6A5478;
  --lilas-border:#DCCEE5;

  /* ---------- APOIO :: KRAFT (Materiais para empresas) ---------- */
  --kraft-50:#FBF8F3;
  --kraft-100:#F4EDE2;
  --kraft-200:#E8E0D5;        /* BASE */
  --kraft-300:#D5C7B2;
  --kraft-400:#B9A488;
  --kraft-500:#8F7A5E;
  --kraft-600:#6A5943;
  --kraft-border:#DDD2C1;

  /* ---------- NEUTROS (viés quente/rosado) ---------- */
  --neutro-0:#FFFFFF;
  --neutro-25:#FDFBFB;
  --neutro-50:#FAF6F7;
  --neutro-100:#F4EFEE;
  --neutro-200:#EBE4E2;
  --neutro-300:#DED6D3;
  --neutro-400:#C6BEB9;
  --neutro-500:#A9A09A;
  --neutro-600:#8C807A;
  --neutro-700:#6B5F57;
  --neutro-800:#4A403A;
  --neutro-900:#2C251F;
  --neutro-950:#1F1A16;

  /* ---------- BORDAS ---------- */
  --borda-sutil:#F2EAE9;
  --borda:#E5DBDA;
  --borda-forte:#D3C6C5;
  --borda-marca:#EFC3C4;

  /* ---------- SEMÂNTICAS ---------- */
  --sucesso-bg:#E6F1E8;  --sucesso:#416B4C;  --sucesso-borda:#C6DFCD;
  --atencao-bg:#FDF1DA;  --atencao:#866013;  --atencao-borda:#F3DDB0;
  --erro-bg:#FAE6E4;     --erro:#9E4038;     --erro-borda:#EFC9C5;
  --info-bg:#E2F0F4;     --info:#336874;     --info-borda:#C2E0E7;

  /* ---------- PAPÉIS DE SUPERFÍCIE E TEXTO ---------- */
  --bg:var(--neutro-50);
  --superficie:var(--neutro-0);
  --superficie-alt:var(--neutro-100);
  --texto:var(--cacau-500);
  --texto-suave:var(--neutro-800);
  --texto-fraco:var(--neutro-700);
  --texto-invertido:#FFFFFF;

  /* ---------- ESTADO INATIVO ---------- */
  --desabilitado-bg:var(--neutro-200);
  --desabilitado-texto:#7A6E68;
  --desabilitado-borda:var(--neutro-300);

  /* ---------- RAIOS ---------- */
  --r-xs:6px;      /* chips de filtro */
  --r-sm:10px;     /* selos, miniaturas */
  --r-md:14px;     /* inputs, avisos */
  --r-lg:20px;     /* cards de produto */
  --r-xl:28px;     /* banner, painéis */
  --r-2xl:40px;    /* seções destacadas */
  --r-pill:999px;  /* botões, tags, bolhas */

  /* ---------- SOMBRAS (base cacau, nunca preto) ---------- */
  --sh-xs:0 1px 2px rgba(62,49,33,.05);
  --sh-sm:0 2px 8px rgba(62,49,33,.06);
  --sh-md:0 8px 24px rgba(62,49,33,.08);
  --sh-lg:0 18px 44px rgba(62,49,33,.10);
  --sh-foco:0 0 0 3px rgba(219,151,153,.45);

  /* ---------- ESPAÇAMENTO (base 4) ---------- */
  --e-1:4px;  --e-2:8px;  --e-3:12px; --e-4:16px; --e-5:20px; --e-6:24px;
  --e-8:32px; --e-10:40px; --e-12:48px; --e-16:64px; --e-20:80px; --e-24:96px;

  /* ---------- TIPOGRAFIA ---------- */
  --fonte-titulo:"Marcellus","Cormorant Garamond",Georgia,serif;
  --fonte-texto:"Poppins","Helvetica Neue",Arial,sans-serif;
  --fonte-acento:"Sacramento","Brush Script MT",cursive;

  --ts-display-1:56px;  --lh-display-1:1.1;
  --ts-display-2:44px;  --lh-display-2:1.15;
  --ts-acento:46px;     --lh-acento:1.1;
  --ts-t1:34px;         --lh-t1:1.2;
  --ts-t2:26px;         --lh-t2:1.25;
  --ts-t3:19px;         --lh-t3:1.4;
  --ts-corpo-lg:18px;   --lh-corpo-lg:1.75;
  --ts-corpo:16px;      --lh-corpo:1.7;
  --ts-corpo-sm:14px;   --lh-corpo-sm:1.65;
  --ts-rotulo:12px;     --ls-rotulo:.11em;
  --ts-legenda:12px;    --lh-legenda:1.5;

  /* ---------- LAYOUT ---------- */
  --largura-conteudo:1160px;
  --gutter:24px;
  --gutter-mobile:16px;
  --altura-faixa:40px;
  --altura-nav:76px;
  --transicao:.2s ease;
}

/* ============================================================
   BASE
   ============================================================ */
body{
  margin:0;
  background:var(--bg);
  color:var(--texto);
  font-family:var(--fonte-texto);
  font-size:var(--ts-corpo);
  line-height:var(--lh-corpo);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--fonte-titulo);font-weight:400;text-wrap:balance}
.acento{font-family:var(--fonte-acento);color:var(--rosa-600)}

/* ============================================================
   BOTÕES — primário · secundário · terciário
   Estados: padrão · hover · active · foco · inativo
   ============================================================ */
.btn{
  --btn-bg:transparent;--btn-cor:var(--texto);--btn-borda:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--fonte-texto);font-size:13px;font-weight:600;
  letter-spacing:.07em;text-transform:uppercase;
  padding:14px 28px;border-radius:var(--r-pill);
  background:var(--btn-bg);color:var(--btn-cor);border:1.5px solid var(--btn-borda);
  cursor:pointer;text-decoration:none;
  transition:background var(--transicao),color var(--transicao),
             border-color var(--transicao),box-shadow var(--transicao),transform var(--transicao);
}
.btn:focus-visible{outline:none;box-shadow:var(--sh-foco)}
.btn svg{width:18px;height:18px;flex:none}

/* Primário */
.btn--primario{--btn-bg:var(--cacau-500);--btn-cor:var(--texto-invertido);--btn-borda:var(--cacau-500)}
.btn--primario:hover:not(:disabled){--btn-bg:var(--cacau-600);--btn-borda:var(--cacau-600);box-shadow:var(--sh-md);transform:translateY(-1px)}
.btn--primario:active:not(:disabled){--btn-bg:var(--cacau-700);--btn-borda:var(--cacau-700);transform:translateY(0);box-shadow:var(--sh-xs)}

/* Secundário */
.btn--secundario{--btn-bg:var(--rosa-300);--btn-cor:var(--cacau-500);--btn-borda:var(--rosa-300)}
.btn--secundario:hover:not(:disabled){--btn-bg:var(--rosa-400);--btn-borda:var(--rosa-400);box-shadow:var(--sh-sm);transform:translateY(-1px)}
.btn--secundario:active:not(:disabled){--btn-bg:var(--rosa-500);--btn-borda:var(--rosa-500);transform:translateY(0)}

/* Terciário */
.btn--terciario{--btn-bg:transparent;--btn-cor:var(--cacau-500);--btn-borda:var(--cacau-border)}
.btn--terciario:hover:not(:disabled){--btn-bg:var(--rosa-100);--btn-borda:var(--rosa-border);--btn-cor:var(--rosa-800)}
.btn--terciario:active:not(:disabled){--btn-bg:var(--rosa-200);--btn-borda:var(--rosa-400)}

/* Inativo */
.btn:disabled,.btn[aria-disabled="true"]{
  --btn-bg:var(--desabilitado-bg);--btn-cor:var(--desabilitado-texto);--btn-borda:var(--desabilitado-bg);
  cursor:not-allowed;box-shadow:none;transform:none;
}
.btn--terciario:disabled,.btn--terciario[aria-disabled="true"]{
  --btn-bg:transparent;--btn-borda:var(--desabilitado-borda);--btn-cor:var(--desabilitado-texto);
}

/* Tamanhos */
.btn--sm{font-size:11px;padding:10px 18px;gap:7px}
.btn--sm svg{width:15px;height:15px}
.btn--lg{font-size:14px;padding:18px 36px}
.btn--bloco{width:100%}
.btn--icone{padding:13px}
.btn--icone svg{width:20px;height:20px}

/* ============================================================
   CAMPOS
   ============================================================ */
.campo{display:flex;flex-direction:column;gap:7px}
.campo label{font-size:var(--ts-rotulo);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--texto-suave)}
.campo input,.campo select,.campo textarea{
  font-family:var(--fonte-texto);font-size:15px;color:var(--texto);
  background:var(--superficie);border:1.5px solid var(--borda);border-radius:var(--r-md);
  padding:13px 16px;width:100%;transition:border-color var(--transicao),box-shadow var(--transicao);
}
.campo input::placeholder{color:var(--neutro-500)}
.campo input:focus{outline:none;border-color:var(--rosa-500);box-shadow:var(--sh-foco)}
.campo input:disabled{background:var(--neutro-100);color:var(--neutro-500);cursor:not-allowed}
.campo.erro input{border-color:var(--erro);background:var(--erro-bg)}
.campo .ajuda{font-size:var(--ts-legenda);color:var(--texto-fraco)}
.campo.erro .ajuda{color:var(--erro)}

/* ============================================================
   ACESSIBILIDADE
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
}