/*
 * assets/css/tokens.css — Custom Properties do Códice v6
 *
 * Fonte de verdade visual do tema. Todo valor de cor, fonte e espaçamento
 * do tema é referenciado a partir daqui via var(--nome).
 * Nenhum valor cru em main.css, header.php ou qualquer outro arquivo.
 *
 * Referência: docs/02-codice-tokens.md e docs/codice-designsystem.html
 *
 * @package codice
 */

:root {

	/* ── Paleta de interface ─────────────────────────────────────────────── */

	--bone:       #FBFAF6; /* fundo principal (papel)            */
	--vellum:     #F4F2EB; /* fundo secundário                   */
	--dustcover:  #ECEADF; /* fundo terciário                    */

	--graphite:   #191A1F; /* texto principal                    */
	--slate:      #3D3F46; /* texto secundário                   */
	--pencil:     #7A7B82; /* texto terciário / metadados        */

	--petroleum:  #0F4346; /* acento: link, estado, ênfase       */
	--abyss:      #093033; /* acento hover                       */

	--margin:     #DDD8CC; /* borda suave / separador            */
	--brass:      #A88A4E; /* detalhe decorativo — só filetes    */

	/* ── Filetes ─────────────────────────────────────────────────────────── */

	--rule:        #191A1F18; /* filete fino   */
	--rule-strong: #191A1F30; /* filete forte  */

	/* ── Tipografia ──────────────────────────────────────────────────────── */

	/*
	 * Serif: títulos, ledes, nomes, citações, aberturas de seção.
	 * Fontes self-hosted (.woff2) são declaradas via @font-face em main.css.
	 */
	--serif: "Newsreader", "Source Serif Pro", Georgia, "Times New Roman", serif;

	/*
	 * Sans: corpo, listas, descrições, navegação, componentes.
	 */
	--sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system,
	        "Segoe UI", Helvetica, Arial, sans-serif;

	/*
	 * Mono: datas, captions, labels de seção, metadados (uppercase), código.
	 */
	--mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo,
	        Consolas, "Courier New", monospace;

	/* ── Layout ──────────────────────────────────────────────────────────── */

	--radius:                 6px;
	--radius-round:           50%;
	--rule-width:             1px;
	--rule-strong-width:      2px;
	--grid-columns:           12;
	--grid-cover-span:        8;
	--grid-rail-span:         4;
	--space-section:          clamp(4.75rem, 10vw, 7.75rem);
	--space-section-compact:  clamp(3rem, 6vw, 5rem);
	--space-component-pad:    clamp(1.5rem, 4vw, 2.5rem);
	--space-component-margin: clamp(2rem, 5vw, 4rem);
	--space-2xs:              0.25rem;
	--space-xs:               0.5rem;
	--space-sm:               0.75rem;
	--space-md:               1rem;
	--space-lg:               1.5rem;
	--space-xl:               2rem;
	--space-2xl:              3rem;
	--space-3xl:              4rem;
	--space-4xl:              5rem;
	--space-grid:             clamp(1.25rem, 2.5vw, 2.5rem);
	--gutter-site:            clamp(1rem, 3vw, 2.5rem);
	--height-site-header:     calc(var(--space-3xl) + var(--space-xs));
	--width-site:             1280px;
	--width-reading:          68ch;
	--width-deck:             58ch;
	--width-cover-title:      19ch;
	--width-cover-copy:       60ch;
	--width-secondary-copy:   32ch;
	--width-story-thumb:      8.5rem;
	--width-story-thumb-small: 7rem;
	--width-author-portrait:  calc(var(--width-story-thumb-small) - var(--space-sm));
	--ratio-cover:            16 / 9;
	--ratio-cover-stack:      2 / 1;
	--ratio-secondary:        4 / 3;
	--ratio-compact:          1 / 1;
	--tracking-meta:          0.08em;
	--transition-color:       color 160ms ease;
	--transition-image-hover: transform 280ms ease, opacity 280ms ease;
	--scale-image-hover:      1.025;
	--opacity-image-wash:     0.08;

	/* ── Escala tipográfica editorial ───────────────────────────────────── */

	--type-meta:           0.6875rem;
	--type-tag:            0.625rem;
	--type-small:          0.875rem;
	--type-body:           1rem;
	--type-body-large:     clamp(1.0625rem, 1.5vw, 1.25rem);
	--type-section:        clamp(2rem, 3.5vw, 3rem);
	--type-home-display:   clamp(2.15rem, 4vw, 4rem);
	--type-home-section:   clamp(1.6rem, 2.5vw, 2.25rem);
	--type-home-secondary: clamp(1.35rem, 2vw, 1.8rem);
	--type-home-compact:   clamp(1.0625rem, 1.4vw, 1.2rem);
	--line-display:        0.98;
	--line-heading:        1.08;
	--line-body:           1.6;

	/* ── Acessibilidade ──────────────────────────────────────────────────── */

	--focus-ring: var(--petroleum);
}