/* ==========================================================================
   Design tokens: Sítio Hari Haux
   --------------------------------------------------------------------------
   Fonte das cores: paleta da marca (planejamento/prompt-wordpress-ia.md)
   + estética aquarela da apresentação "O Refúgio Digital".
   Na Fase 4 estes tokens migram para theme.json e são expostos pelo
   WordPress como --wp--preset--*; os nomes abaixo continuam como aliases.
   ========================================================================== */

/* Fontes self-hosted (copiadas por tools/vendor.mjs). */
@font-face {
	font-family: "Fraunces";
	src: url("../fonts/fraunces-latin-wght-normal.woff2") format("woff2");
	font-weight: 300 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Fraunces";
	src: url("../fonts/fraunces-latin-wght-italic.woff2") format("woff2");
	font-weight: 300 700;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Fira Sans";
	src: url("../fonts/fira-sans-latin-400-normal.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Fira Sans";
	src: url("../fonts/fira-sans-latin-500-normal.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

/* Subset vietnamita das mesmas famílias: o navegador só o baixa quando a página tem um
   caractere dele (hoje, o "ĩ" de "Noke Koĩ", que o subset latin não traz). */
@font-face {
	font-family: "Fraunces";
	src: url("../fonts/fraunces-vietnamese-wght-normal.woff2") format("woff2");
	font-weight: 300 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

@font-face {
	font-family: "Fira Sans";
	src: url("../fonts/fira-sans-vietnamese-400-normal.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

@font-face {
	font-family: "Fira Sans";
	src: url("../fonts/fira-sans-vietnamese-500-normal.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

:root {
	/* ---- Cores da marca (oficiais) -------------------------------------- */
	--hh-terracota: #b5654a;
	--hh-moss: #4f6047;
	--hh-ocean: #3e6e77;
	--hh-neutral: #e8e6e1;

	/* ---- Paleta estendida (aquarela) ------------------------------------ */
	--hh-paper: #f6f2e9;          /* fundo creme, "papel de aquarela" */
	--hh-paper-deep: #ede5d6;
	--hh-ink: #3a2c22;            /* texto principal, marrom de tinta */
	--hh-ink-soft: #5d4b3e;       /* texto secundário (AA sobre paper) */
	--hh-terracota-deep: #8e4a33; /* terracota para TEXTO (AA) */
	--hh-terracota-wash: #e3b398;
	--hh-sage: #8a9b74;
	--hh-sage-wash: #c3cdb0;
	--hh-moss-deep: #36442f;
	--hh-mist: #a9c2cc;
	--hh-mist-wash: #d4e1e5;
	--hh-sun: #f3d9a4;

	/* ---- Noite (aquarela da casa de reza) ------------------------------- */
	--hh-night: #0f1b21;          /* fundo do hero, medicinas e rodapé */
	--hh-night-soft: #172a31;     /* superfícies elevadas sobre a noite */
	--hh-lantern: #e8bc7d;        /* luz quente da casa de madeira */
	--hh-moonlight: #dfe3df;      /* texto sobre a noite */

	/* ---- Raiz (terra escura) ------------------------------------------- */
	--hh-soil: #221913;           /* medicinas, chamada final e rodapé */
	--hh-soil-soft: #2f231b;      /* superfícies elevadas sobre a terra */

	/* ---- Papéis semânticos --------------------------------------------- */
	--color-bg: var(--hh-neutral);
	--color-bg-alt: var(--hh-paper-deep);
	--color-text: var(--hh-ink);
	--color-text-muted: var(--hh-ink-soft);
	--color-accent: var(--hh-terracota);
	--color-accent-text: var(--hh-terracota-deep);
	--color-primary: var(--hh-moss);
	--color-primary-contrast: var(--hh-paper);
	--color-line: color-mix(in oklab, var(--hh-terracota) 55%, var(--hh-paper));
	--color-vine: color-mix(in oklab, var(--hh-moss) 70%, var(--hh-terracota));
	--color-focus: var(--hh-ocean);

	/* ---- Tipografia ------------------------------------------------------ */
	--font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
	--font-body: "Fira Sans", "Segoe UI", system-ui, sans-serif;

	/* Escala fluida (min 360px → max 1440px). Corpo maior: público 45+. */
	--step--1: clamp(0.94rem, 0.9rem + 0.18vw, 1.06rem);
	--step-0: clamp(1.06rem, 1rem + 0.28vw, 1.25rem);
	--step-1: clamp(1.27rem, 1.17rem + 0.46vw, 1.56rem);
	--step-2: clamp(1.52rem, 1.36rem + 0.72vw, 1.95rem);
	--step-3: clamp(1.83rem, 1.58rem + 1.1vw, 2.44rem);
	--step-4: clamp(2.2rem, 1.82rem + 1.66vw, 3.05rem);
	--step-5: clamp(2.8rem, 2.1rem + 3.1vw, 4.8rem);
	--step-hero: clamp(3.4rem, 2.2rem + 6vw, 7.5rem);

	--leading-tight: 1.1;
	--leading-snug: 1.3;
	--leading-body: 1.65;

	/* ---- Espaçamento fluido --------------------------------------------- */
	--space-3xs: clamp(0.25rem, 0.23rem + 0.1vw, 0.31rem);
	--space-2xs: clamp(0.5rem, 0.46rem + 0.2vw, 0.63rem);
	--space-xs: clamp(0.75rem, 0.7rem + 0.28vw, 0.94rem);
	--space-s: clamp(1rem, 0.93rem + 0.37vw, 1.25rem);
	--space-m: clamp(1.5rem, 1.39rem + 0.56vw, 1.88rem);
	--space-l: clamp(2rem, 1.85rem + 0.74vw, 2.5rem);
	--space-xl: clamp(3rem, 2.78rem + 1.11vw, 3.75rem);
	--space-2xl: clamp(4rem, 3.4rem + 3vw, 6.5rem);
	--space-3xl: clamp(6rem, 4.8rem + 6vw, 11rem);

	/* ---- Layout --------------------------------------------------------- */
	--width-prose: 38rem;
	--width-content: 72rem;
	--width-wide: 90rem;
	--gutter: clamp(1.25rem, 0.8rem + 2.4vw, 3rem);
	--header-h: 4.5rem;

	/* ---- Formas orgânicas (substituem border-radius de caixa) ---------- */
	--shape-pebble-1: 58% 42% 55% 45% / 52% 60% 40% 48%;
	--shape-pebble-2: 46% 54% 38% 62% / 60% 44% 56% 40%;
	--shape-pebble-3: 62% 38% 50% 50% / 45% 55% 45% 55%;

	/* ---- Profundidade (matriz de camadas) ------------------------------- */
	--z-bg: 0;
	--z-midground: 1;
	--z-content: 2;
	--z-foreground: 3;
	--z-header: 50;

	/* ---- Movimento ------------------------------------------------------ */
	--ease-breath: cubic-bezier(0.45, 0.05, 0.25, 1);
	--ease-settle: cubic-bezier(0.22, 1, 0.36, 1);
	--dur-quick: 220ms;
	--dur-calm: 700ms;
	--dur-slow: 1400ms;

	/* ---- Sombras suaves (tinta difusa, nunca "drop shadow" duro) ------- */
	--shadow-soft: 0 1.5rem 3rem -1.5rem color-mix(in oklab, var(--hh-ink) 28%, transparent);
	--shadow-lift: 0 2rem 4rem -2rem color-mix(in oklab, var(--hh-moss-deep) 40%, transparent);
}