/**
 * Tokens e ponte de personalização — Sistema de design Rocktron.
 *
 * O sistema é editorial e achromático: uma única cor cromática — o laranja
 * Rocktron — sobre papel morno e tinta grafite. A cor não decora, ela ativa.
 * Onde há laranja, há ação; onde não há, o sistema fica quieto.
 *
 * Três princípios que governam tudo abaixo:
 *
 * 1. Uma cor só NA INTERFACE. O laranja é o único preenchimento cromático de
 *    componente. O azul existe, mas só dentro da assinatura — ver abaixo.
 * 2. Sem elevação. Camadas se separam por tom, nunca por sombra:
 *    branco → papel → laranja → ilha escura.
 * 3. Dois pesos. 400 para texto, 500 para ênfase. Nada de 600 ou 700.
 *
 * Duas responsabilidades técnicas:
 *
 * a. Declarar o que o theme.json não expressa: raio, movimento, foco, medidas.
 * b. Ligar nomes curtos (--rt-ink, --rt-accent, --rt-font...) a tudo que o
 *    tema usa. Declarar esses nomes em :root muda o site inteiro.
 *
 * Toda variável tem valor de reserva: sem declarar nada, o padrão vale.
 */

/* ---------------------------------------------------------------------------
   Movimento

   Uma curva só: sai imediato e assenta devagar. Quatro durações, nunca um
   valor solto. O sistema é rápido e plano — o movimento acompanha, não enfeita.
   --------------------------------------------------------------------------- */

:root {
	--rt-ease: cubic-bezier(0.2, 0, 0, 1);

	--rt-duration-fast: 120ms;   /* cor, borda, opacidade */
	--rt-duration-base: 200ms;   /* deslocamento */
	--rt-duration-slow: 320ms;   /* entrada de camada: menu, diálogo */
	--rt-duration-reveal: 500ms; /* entrada de conteúdo ao rolar */
}

/* ---------------------------------------------------------------------------
   Assinatura

   O logotipo carrega tres cores: o grafite do texto, um triangulo azul no
   "R" e um triangulo laranja no "t". O laranja de acao do sistema vem dali.

   O azul existe SO na assinatura. Ele nao e cor de interface: nao pinta
   botao, link, fundo nem estado. Esta declarado aqui para que a marca
   tenha o valor exato registrado, nao para ser usado em componente.
   --------------------------------------------------------------------------- */

:root {
	--rt-assinatura-grafite: #404040;
	--rt-assinatura-azul:    #426bba;
	--rt-assinatura-laranja: #de8703;
}

/* ---------------------------------------------------------------------------
   Forma

   Raios largos e constantes. Um cartão e um botão têm o MESMO raio: 28px.
   Pílulas e etiquetas são totalmente arredondadas. Campo de formulário é o
   único elemento de canto curto, porque ali a borda é a afordância.
   --------------------------------------------------------------------------- */

:root {
	--rt-radius-card: 28px;   /* cartões, painéis, imagens contidas */
	--rt-radius-button: 28px; /* botões — o mesmo raio do cartão, de propósito */
	--rt-radius-inner: 18px;  /* elemento aninhado dentro de um cartão */
	--rt-radius-pill: 9999px; /* etiquetas, tags, indicadores */
	--rt-radius-input: 8px;   /* campos de formulário */

	/* Compatibilidade com o que já existia. */
	--rt-radius-control: var(--rt-radius-button);
	--rt-radius-sm: var(--rt-radius-inner);
	--rt-radius-md: var(--rt-radius-card);
	--rt-radius-lg: var(--rt-radius-card);

	/* Sem elevação. O sistema separa camadas por tom, não por sombra.
	   Estes tokens existem só para que nada quebre ao referenciá-los. */
	--rt-shadow-sm: none;
	--rt-shadow-md: none;
	--rt-shadow-lg: none;
}

/* ---------------------------------------------------------------------------
   Tipografia

   Uma família só, do título de 90px ao rótulo de 10px. Dois pesos. O aperto
   do entreletras acompanha o tamanho: negativo no display, normal no texto,
   generoso e em caixa alta nos micro-rótulos.
   --------------------------------------------------------------------------- */

:root {
	--rt-weight-regular: 400;
	--rt-weight-medium: 500;

	/* Escala. Em rem, não em px: quem aumenta a fonte do navegador continua
	   sendo atendido. Os dois maiores são fluidos — 90px numa tela de 380px
	   não é display, é acidente. */
	--rt-size-eyebrow: 0.625rem;  /* 10px */
	--rt-size-caption: 0.75rem;   /* 12px */
	--rt-size-body-sm: 0.875rem;  /* 14px */
	--rt-size-body: 1rem;         /* 16px */
	--rt-size-subheading: 1.375rem; /* 22px */
	--rt-size-heading: 1.75rem;   /* 28px */
	--rt-size-heading-lg: clamp(2.25rem, 5vw, 3.75rem);   /* até 60px */
	--rt-size-display: clamp(2.75rem, 7.5vw, 5.625rem);   /* até 90px */

	--rt-leading-display: 0.89;
	--rt-leading-heading-lg: 1;
	--rt-leading-heading: 1.14;
	--rt-leading-subheading: 1.18;
	--rt-leading-body: 1.5;

	/* -0.03em a partir de 28px; nada no corpo; +0.1em só em caixa alta miúda. */
	--rt-tracking-display: -0.03em;
	--rt-tracking-heading: -0.02em;
	--rt-tracking-eyebrow: 0.1em;
}

/* ---------------------------------------------------------------------------
   Estrutura e estados
   --------------------------------------------------------------------------- */

:root {
	/* Camadas com nome, para nunca voltarmos ao z-index: 99999. */
	--rt-z-base: 1;
	--rt-z-sticky: 100;
	--rt-z-header: 200;
	--rt-z-overlay: 300;
	--rt-z-skip: 400;

	--rt-header-height: 5rem;
	--rt-header-height-compact: 3.75rem;

	/* Foco: grafite sólido. Nunca laranja translúcido, que não alcança os 3:1
	   do critério 2.4.11 do WCAG. */
	--rt-focus-width: 3px;
	--rt-focus-offset: 2px;
	--rt-focus-color: var(--wp--preset--color--brand);

	/* Alvo de toque mínimo do WCAG 2.2 AA (critério 2.5.8). */
	--rt-touch-target: 24px;

	--rt-columns: 3;
	--rt-card-min: 17rem;
}

/* ---------------------------------------------------------------------------
   Ponte de personalização

   :root:root de propósito: o WordPress declara as --wp--preset--* em :root a
   partir do theme.json, e a especificidade dobrada vence independentemente da
   ordem de carregamento. Variáveis resolvem no uso, não na declaração — por
   isso um :root escrito no CSS global (que carrega depois) muda tudo.
   --------------------------------------------------------------------------- */

:root:root {
	/* --- Texto ---------------------------------------------------------
	   Grafite morno em vez de preto puro: menos clínico sobre papel. */
	--wp--preset--color--ink: var(--rt-ink, #20242a);
	--wp--preset--color--ink-soft: var(--rt-ink-soft, #3d424a);
	--wp--preset--color--ink-muted: var(--rt-muted, #646970);

	/* --- Superfícies ---------------------------------------------------
	   A pilha inteira: branco → papel → laranja → ilha escura. */
	--wp--preset--color--surface: var(--rt-surface, #ffffff);
	--wp--preset--color--surface-muted: var(--rt-paper, #f4f3ef);
	--wp--preset--color--surface-cool: var(--rt-paper-deep, #eceae4);
	--wp--preset--color--surface-strong: var(--rt-deep, #2f3238);

	/* --- Marca ---------------------------------------------------------
	   Grafite na interface. O azul da assinatura não entra aqui: ele vive
	   no logotipo e em nenhum componente. */
	--wp--preset--color--brand: var(--rt-brand, #20242a);
	--wp--preset--color--brand-strong: var(--rt-brand-dark, #14181d);
	--wp--preset--color--brand-soft: var(--rt-brand-soft, #eceae4);

	/* --- Ação ----------------------------------------------------------
	   A ÚNICA cor cromática do sistema. Laranja preenchido com texto
	   grafite dá 5.6:1 — passa em AA para texto normal. Branco sobre
	   laranja dá 2.76:1 e está proibido. */
	--wp--preset--color--action: var(--rt-accent, #e18600);
	--wp--preset--color--action-strong: var(--rt-accent-dark, #955b03);
	--wp--preset--color--action-soft: var(--rt-accent-soft, #ffe6bd);
	--wp--preset--color--action-warm: var(--rt-warm, #fdf6ec);

	/* --- Linhas --------------------------------------------------------
	   O sistema usa régua, não só espaço em branco, para marcar limite. */
	--wp--preset--color--line: var(--rt-line, #dedcd7);
	--wp--preset--color--line-strong: var(--rt-line-strong, #848b94);

	/* --- Estado --------------------------------------------------------
	   Não são acentos de marca: só aparecem em mensagem de sistema. */
	--wp--preset--color--success: var(--rt-success, #1b6b3f);
	--wp--preset--color--warning: var(--rt-warning, #8a5a00);
	--wp--preset--color--error: var(--rt-error, #b3261e);

	/* --- Tipografia ----------------------------------------------------
	   Uma família só carrega o sistema inteiro. */
	--wp--preset--font-family--base: var(
		--rt-font,
		"Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
		"Segoe UI", Roboto, Arial, sans-serif
	);
	--wp--preset--font-family--mono: var(
		--rt-font-mono,
		ui-monospace, "SF Mono", Consolas, monospace
	);

	/* A escala do sistema entra no lugar dos tamanhos do theme.json. */
	--wp--preset--font-size--xs: var(--rt-size-caption);
	--wp--preset--font-size--sm: var(--rt-size-body-sm);
	--wp--preset--font-size--md: var(--rt-font-size, var(--rt-size-body));
	--wp--preset--font-size--lg: var(--rt-size-subheading);
	--wp--preset--font-size--xl: var(--rt-size-heading);
	--wp--preset--font-size--xxl: var(--rt-size-heading-lg);
	--wp--preset--font-size--xxxl: var(--rt-size-display);
	--wp--preset--font-size--hero: var(--rt-size-display);

	/* --- Espaço --------------------------------------------------------
	   Base de 4px. O ritmo vertical entre seções é largo de propósito:
	   80 a 120px. É o que faz o sistema respirar como página editorial. */
	--wp--preset--spacing--xxxs: 0.25rem; /* 4 */
	--wp--preset--spacing--xxs: 0.5rem;   /* 8 */
	--wp--preset--spacing--xs: 0.75rem;   /* 12 */
	--wp--preset--spacing--sm: 1rem;      /* 16 */
	--wp--preset--spacing--md: 1.5rem;    /* 24 */
	--wp--preset--spacing--lg: 2.5rem;    /* 40 */
	--wp--preset--spacing--xl: 4rem;      /* 64 */
	--wp--preset--spacing--xxl: 5rem;     /* 80 */
	--wp--preset--spacing--xxxl: 7.5rem;  /* 120 */

	/* --- Layout --------------------------------------------------------- */
	--wp--style--global--content-size: var(--rt-content, 44rem);
	--wp--style--global--wide-size: var(--rt-max, 75rem); /* 1200px */
}

:root {
	--rt-line-height: var(--rt-leading, var(--rt-leading-body));
}

body {
	font-weight: var(--rt-weight-regular);
	line-height: var(--rt-line-height);
	letter-spacing: normal;
}