/*
 * FRENKEL — design tokens.
 * Single source of truth for colour, type and spacing (from the XD style guide).
 */

:root {
	/* --- Brand palette --- */
	--cf-dark:      #605C54; /* primary text / dark sections */
	--cf-cream:     #F2EDE7; /* main background */
	--cf-greige:    #D6D2CD; /* secondary background */
	--cf-header:    transparent; /* dedicated header overlay tone */
	--cf-header-bg: transparent;

	/* Foreground pairings */
	--cf-on-dark:  var(--cf-cream);
	--cf-on-light: var(--cf-dark);

	/* --- Type families (custom face + graceful fallbacks) --- */
	--cf-font-display:    "The Seasons", "Cormorant Garamond", Georgia, "Times New Roman", serif;
	/* Regga first: it's the licensed target and wins the moment its files land.
	   "Cafe" is the free interim face actually shipping today. */
	--cf-font-he-display: "Regga", "Cafe", "Heebo", "Assistant", sans-serif;
	/* Body matches Elementor's global "text" font (FRENKEL Futura). Heebo /
	   Assistant stay in the stack so Hebrew glyphs, which Futura lacks, fall
	   back per-character. */
	--cf-font-body:       "FRENKEL Futura", "Futura", "Century Gothic", "Twentieth Century", "Heebo", "Assistant", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	/* Hebrew body/meta face — the byline credit, author and date. Heebo is
	   self-hosted (see fonts.css), so it is the face that actually renders;
	   Assistant and Cafe only stand behind it if its files ever go missing. */
	--cf-font-he-body:    "Heebo", "Assistant", "Cafe", sans-serif;
	--cf-font-latin:      "FRENKEL Futura", "Futura", "Century Gothic", "Twentieth Century", system-ui, sans-serif;

	/* --- Type scale — desktop; tablet/mobile overrides below :root --- */
	--cf-h1:       80px;
	--cf-h2:       46px;
	--cf-h3:       27px;
	--cf-subtitle: 27px;
	--cf-body:     20px;
	--cf-small:    14px; /* text-sm / uppercase labels */

	/* --- Layout & spacing --- */
	--cf-container: 1380px;
	--cf-gutter:    20px;  /* consistent page padding (design note #1) */
	--cf-section-y: clamp(3rem, 2rem + 4vw, 6rem);
	--cf-gap:       1.5rem; /* consistent image gap across the site (design note #3) */
	--cf-media-gap: 24px;    /* hairline gap between stacked / paired project images */
	/* Index column = left half: the INDEX list and the section markers start on
	   the centre line that runs down the page. */
	--cf-index-ratio: .5;
	--cf-index-col: calc(var(--cf-index-ratio) * 100%);
	--cf-marker-gap: clamp(1.5rem, 1rem + 2vw, 3rem); /* marker → media spacing */
	--cf-rule: color-mix(in srgb, var(--cf-dark) 22%, transparent);
	--cf-header-h:  84px;

	/* --- Motion --- */
	--cf-ease: cubic-bezier(.4, 0, .2, 1);
	--cf-dur:  .3s;
}

/* Responsive heading sizes (desktop / tablet / mobile). Redefining the tokens
   cascades to everything that uses them. Breakpoints match Elementor's
   tablet (<=1024) and mobile (<=767). */
@media (max-width: 1024px) {
	:root {
		--cf-h1: 48px;
		--cf-h2: 30px;
		--cf-h3: 22px;
	}
}
@media (max-width: 767px) {
	:root {
		--cf-h1: 32px;
		--cf-h2: 36px;
		--cf-h3: 20px;
	}
}