/*
  Design Family: granite-ember
  Loja de grafite e uma brasa só: papel claro, pedra nos cartões, grafite no texto e nos botões, e um
  único acento laranja que aparece como traço curto, ponto e barra — nunca como faixa. Títulos em
  grotesca média, enormes e com espaçamento negativo; mono em caixa-alta só na cápsula editorial; a
  marca larga ocupa o rodapé de ponta a ponta. Foto com canto suave; botão em pílula. Escopo por
  atributo (R11).
*/
[data-ws2-family="granite-ember"] {
  --ge-paper: #FAFAF8;
  --ge-white: #FFFFFF;
  --ge-stone: #EEEEEA;
  --ge-stone-deep: #E2E2DD;
  --ge-ink: #1B1C1A;
  --ge-muted: #5E5F5B;        /* 5,5:1 sobre a pedra, 6:1 sobre o papel */
  --ge-line: rgba(27, 28, 26, .14);
  --ge-veil: rgba(16, 17, 15, .58);

  /* acento (R26) — a brasa: traço, ponto pulsante, barra de progresso, indicador ativo. Não é texto. */
  --ge-ember: #F26A21;
  /* a brasa em texto (rótulo do modelo, link de novidade): 5,2:1 no papel, 4,7:1 na pedra */
  --ge-ember-ink: #B4470E;

  --ge-font-heading: "Schibsted Grotesk", "Helvetica Neue", Arial, system-ui, sans-serif;
  --ge-font-ui: "Schibsted Grotesk", "Helvetica Neue", Arial, system-ui, sans-serif;
  --ge-font-mono: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --ge-font-wordmark: "Archivo", "Arial Black", system-ui, sans-serif;
  --ge-wordmark-stretch: 125%;
  --ge-heading-track: -.035em;
  --ge-body-size: 16px;
  --ge-small: 14px;
  --ge-body-leading: 1.55;
  --ge-display: clamp(52px, 8vw, 128px);      /* nome do modelo, "atividade" */
  --ge-section-heading: clamp(30px, 3.2vw, 48px);
  --ge-card-heading: clamp(24px, 2.2vw, 34px);

  --ge-radius-media: 14px;
  --ge-radius-card: 10px;
  --ge-radius-tile: 10px;
  --ge-radius-pill: 999px;
  --ws2-social-radius: 999px;
  --ws2-map-radius: 14px;

  /* o traço: 1 rem por 0,25 rem, antes do item ativo, do título e do texto do painel */
  --ge-dash-w: 18px;
  --ge-dash-h: 4px;

  --ge-container: 1680px;
  --ge-gutter: clamp(16px, 2.2vw, 40px);
  --ge-band-y: clamp(56px, 7vw, 120px);
  --ge-header-h: 68px;
  --ge-bar-h: 38px;
  --ge-gap: clamp(8px, .9vw, 16px);

  --ge-motion-profile: "ember-trail";
  --ge-ease: cubic-bezier(.22, .61, .36, 1);
  --ge-panel-in: 500ms;          /* troca do painel de atividade */
  --ge-pulse: 2s;                /* ponto pulsante */
}

/* Esquemas de acento (R26) ------------------------------------------------------------------------
   A identidade é a composição — grafite, pedra, traço curto, grotesca enorme, mono na cápsula, marca
   gigante no rodapé. A brasa acompanha a marca da loja: cada esquema traz a cor do traço e a versão
   escura que passa de 4,5:1 como texto.
   Uso: <body data-ws2-family="granite-ember" data-ws2-accent="moss"> */
[data-ws2-family="granite-ember"][data-ws2-accent="moss"] { --ge-ember: #6E9B3A; --ge-ember-ink: #4A6B24; }
[data-ws2-family="granite-ember"][data-ws2-accent="glacier"] { --ge-ember: #2D8FD5; --ge-ember-ink: #1D639A; }
[data-ws2-family="granite-ember"][data-ws2-accent="signal"] { --ge-ember: #E23B3B; --ge-ember-ink: #B02626; }