/* Ice Joy Gelato — tokens da marca (gerado a partir de manual/tokens.json)
   Uso: <link rel="stylesheet" href="css/icejoy.css"> + as fontes do Google (ver template/index.html) */

:root {
  /* Cores fixas da marca */
  --verde-joy: #004944;      /* institucional, ~60% da comunicação */
  --verde-profundo: #00302c; /* linha Intense, fundos noturnos */
  --creme: #fee5c8;          /* segunda cor institucional, ~30% */
  --creme-claro: #fff6ea;    /* papel / telas claras */
  --amarelo-sol: #fbc11b;    /* acento: maracujá, manga, abacaxi, preço */
  --rosa-joy: #eb1e79;       /* acento: morango, frutas vermelhas, tag editorial */
  --acai: #6b2c7a;           /* acento: açaí, uva */
  --lima: #48be66;           /* acento: limão, Diet — nunca para texto */
  --menta: #d3ecd8;          /* fundo claro institucional */
  --branco: #ffffff;

  /* Cores semânticas — tema claro (Creme) */
  --surface: #fff6ea;
  --surface-raised: #ffffff;
  --surface-inverse: #004944;
  --on-inverse: #fee5c8;
  --ink: #004944;
  --ink-muted: #3d6b66;
  --line: #e7d3b6;
  --focus: var(--rosa-joy);

  /* Tipografia */
  --font-display: "Bricolage Grotesque", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Instrument Serif", Georgia, serif;

  /* Espaçamento */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 40px;
  --space-5: 64px;
  --space-6: 96px;
  --space-7: 250px;

  /* Cantos */
  --radius-sm: 12px;   /* tags, selos de preço */
  --radius-md: 28px;   /* fotos recortadas, cartões */
  --radius-pill: 999px;/* CTA, telefone */
}

/* Tema escuro (Verde) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface: #00302c;
    --surface-raised: #004944;
    --surface-inverse: #fee5c8;
    --on-inverse: #004944;
    --ink: #fee5c8;
    --ink-muted: #b9d6c9;
    --line: #1c5b55;
  }
}
:root[data-theme="dark"] {
  --surface: #00302c;
  --surface-raised: #004944;
  --surface-inverse: #fee5c8;
  --on-inverse: #004944;
  --ink: #fee5c8;
  --ink-muted: #b9d6c9;
  --line: #1c5b55;
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Estilos de texto (escala web; nos posts 1080 use os tamanhos do manual) */
.ij-hero      { font-family: var(--font-display); font-weight: 800; font-size: clamp(48px, 9vw, 120px); line-height: .9; letter-spacing: -.03em; margin: 0; text-wrap: balance; }
.ij-headline  { font-family: var(--font-display); font-weight: 700; font-size: clamp(36px, 6vw, 80px); line-height: 1; letter-spacing: -.025em; margin: 0; text-wrap: balance; }
.ij-headline-s{ font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 4vw, 56px); line-height: 1.07; letter-spacing: -.02em; margin: 0; text-wrap: balance; }
.ij-accent    { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: 0; }
.ij-lead      { font-size: clamp(20px, 2.4vw, 36px); line-height: 1.28; font-weight: 500; margin: 0; }
.ij-label     { font-size: 14px; line-height: 1.2; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; margin: 0; }
.ij-price     { font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.ij-price small { font-size: .5em; margin-right: .15em; }

/* Componentes */
.ij-tag {
  display: inline-block; background: var(--rosa-joy); color: var(--branco);
  font-size: 14px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  padding: 10px 16px; border-radius: var(--radius-sm);
}
.ij-cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.ij-cta a, .ij-cta span {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 600; font-size: 17px; line-height: 1; text-decoration: none;
  padding: 16px 24px; border-radius: var(--radius-pill);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ij-cta .primario   { background: var(--verde-joy); color: var(--creme); }
.ij-cta .secundario { border: 2px solid var(--verde-joy); color: var(--verde-joy); padding: 14px 22px; }
.ij-escuro .ij-cta .primario   { background: var(--creme); color: var(--verde-joy); }
.ij-escuro .ij-cta .secundario { border-color: var(--creme); color: var(--creme); }
.ij-selo { display: block; border-radius: 50%; }
.ij-selo.anel { box-shadow: 0 0 0 4px var(--creme); } /* sobre verde-joy / verde-profundo */
.ij-foto { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-md); }
.ij-card { background: var(--surface-raised); border-radius: var(--radius-md); padding: var(--space-4); }
.ij-escuro { background: var(--verde-joy); color: var(--creme); }