/**
 * Design tokens — the ONLY place in the theme a raw design value is written.
 *
 * theme.json declares presets whose values are the variables below, and
 * WordPress passes those var() references through into its own custom
 * properties unaltered. So every colour, size and space resolves in two hops:
 *
 *     element  ->  --wp--preset--color--base  ->  --fc-color-base  ->  #F5F5EF
 *
 * Retuning the whole site therefore means editing this file and nothing else.
 * It is loaded into both the front end and the block editor (see functions.php)
 * so the two cannot drift.
 *
 * Values are measured from the mockup at its 1366px design width.
 */

/* --------------------------------------------------------------------------
   Typefaces
   Two faces, and every typographic role below is one of them. To try a
   different one: drop a woff2 into assets/fonts/, add an @font-face beside the
   ones below, and repoint --fc-face-serif or --fc-face-sans. An @font-face that
   no resolved rule references is never downloaded, so candidates left here are
   free.
   -------------------------------------------------------------------------- */

/* Figtree — Google, OFL. Variable, 100–900. */
@font-face {
	font-family: 'Figtree';
	src: url('fonts/figtree-var.woff2') format('woff2');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

/* Cormorant Garamond — Google, OFL. Variable, 300–700. The brand serif, and
   since it carries the headings too, half the type on the site. Flavia's
   existing site sets its logo in a light Garamond-family
   serif (Sabon, via Format's webfont service, which we cannot self-host); this
   is the closest match on Google Fonts, and the most delicate of the candidates
   tried. EB Garamond is structurally nearer but publishes no weight below 400. */
@font-face {
	font-family: 'Cormorant Garamond';
	src: url('fonts/cormorant-var.woff2') format('woff2');
	font-weight: 300 700;
	font-style: normal;
	font-display: swap;
}

:root {
	/*
	 * The two faces. Named by what they are; the roles beneath are named by
	 * what they do, and point here. Nothing else in the theme names a family.
	 */
	--fc-face-serif: 'Cormorant Garamond', Georgia, serif;
	--fc-face-sans: 'Figtree', system-ui, sans-serif;

	/*
	 * The split is by rank, not by decoration: everything that titles something
	 * is the serif, and running text is the sans. So the page reads as one
	 * voice announcing and another explaining, rather than as a logo bolted to
	 * a different site.
	 */

	/* Headings h2 and below, and anything set to the "Display" preset. */
	--fc-font-display: var(--fc-face-serif);
	/* Body copy — the default for the whole document. */
	--fc-font-body: var(--fc-face-sans);
	/* Small uppercase runs: nav links, buttons, dates, form labels. Sans, and
	   deliberately so — these label the furniture rather than the content, and
	   the serif at 13px caps goes brittle. */
	--fc-font-label: var(--fc-face-sans);

	/* ----------------------------------------------------------------------
	   Brand
	   The wordmark has its own family, deliberately not one of the three
	   theme.json presets: the lockup is a brand element rather than something
	   an editor picks from the font menu. The serif/sans split mirrors the real
	   brand, where the logo is a serif and everything else is not.
	   ---------------------------------------------------------------------- */

	/* The FLAVIA CATENA lockup, the nav/footer brand runs, and page titles (h1)
	   on inner pages. Same face as the headings, kept as its own variable
	   because it carries its own weight and tracking. */
	--fc-font-wordmark: var(--fc-face-serif);
	/* Size of the two-line FLAVIA CATENA lockup on the home page. ~60px. */
	--fc-size-wordmark: clamp(2.25rem, 4.4vw, 3.75rem);
	/* Size of an inner page's title — "Weddings", "About". Smaller than the
	   home lockup, so the brand stays the largest thing on the site. ~50px. */
	--fc-size-page-title: clamp(2rem, 3.66vw, 3.125rem);
	/* Weight for everything in the wordmark serif. 300 keeps the strokes fine,
	   which is what makes it read as the logo rather than as a heading. */
	--fc-weight-wordmark: 300;
	/* Tracking for the all-caps lockup and brand runs. Wide, as the logo is. */
	--fc-tracking-wordmark: 0.08em;
	/* Tracking for page titles. Much tighter: they are title case, not caps,
	   and caps tracking pulls mixed-case words apart. */
	--fc-tracking-page-title: 0.02em;
	/* The feather mark, from the existing logo. Referenced by the nav bar's
	   pseudo-element. The copy used as a page separator is a media library
	   attachment instead, because there it is content rather than chrome. */
	--fc-feather: url('img/feather.png');

	/* ----------------------------------------------------------------------
	   Colour
	   The mockup uses exactly two values. Every warm tone on the page comes
	   from the photographs, not from the interface — resist adding more.
	   ---------------------------------------------------------------------- */

	/* Page background. Warm bone, not white. */
	--fc-color-base: #F5F5EF;
	/* All text, rules and borders. */
	--fc-color-contrast: #000000;
	/* Not in the mockup. For captions and meta that should recede — currently
	   only the footer colophon. A desaturated warm grey off the same axis as
	   `base`, so it sits on the page rather than on top of it. */
	--fc-color-muted: #6E6B64;

	/* ----------------------------------------------------------------------
	   Type scale — measured 84 / 32 / 17 / 13px at the 1366px design width.
	   The two large sizes are fluid: the vw term hits the measured size exactly
	   at 1366px, and the clamp bounds stop it collapsing on phones or running
	   away on ultrawides.
	   ---------------------------------------------------------------------- */

	/* Largest size on the scale. Not used by any h1 — both the home lockup and
	   inner page titles have sizes of their own — so this is the "Display"
	   preset for editor use. ~84px. */
	--fc-size-display: clamp(3rem, 6.15vw, 5.25rem);
	/*
	 * The heading ramp, h2 down to h6. Six levels that each have to be told
	 * apart at a glance, over a range only 38px wide, so the steps shorten as
	 * they descend (1.36, 1.27, 1.16, 1.12) and the last two carry weight and
	 * caps as well as size — a serif at 17px is otherwise indistinguishable
	 * from the 17px sans it sits above. See theme.json's elements.h2…h6, which
	 * is where the ramp is bound.
	 */

	/* Section headings — h2, and the footer brand run. ~38px.
	   Larger than the 32px the mockup measures because the serif runs small:
	   Cormorant's lowercase is far shorter than Figtree's at the same size, so
	   matching the number would have shrunk every heading on the site. */
	--fc-size-heading: clamp(1.75rem, 2.78vw, 2.375rem);
	/* h3 — a section within a section, as on the Info page, where three of
	   them sit under "Investment". ~28px. */
	--fc-size-heading-s: clamp(1.5rem, 2.05vw, 1.75rem);
	/* Subheadings that title a thing rather than a section — h4, and the
	   portfolio names under the photographs on the front page. ~22px. */
	--fc-size-subheading: clamp(1.125rem, 1.6vw, 1.375rem);
	/* h5. ~19px: barely above body copy in size, so it leans on the serif and
	   on --fc-weight-heading-minor to read as a heading at all. */
	--fc-size-subheading-s: clamp(1.0625rem, 1.39vw, 1.1875rem);
	/* h6 has no size of its own — it sets at --fc-size-body and separates
	   itself with caps and tracking, the same treatment as the nav wordmark. */
	/* Body copy. 17px, fixed — a fluid body size makes line length wander. */
	--fc-size-body: 1.0625rem;
	/* Nav links, eyebrows, buttons, captions. 13px, fixed. */
	--fc-size-label: 0.8125rem;

	/* Line height for the home lockup only. Under 1 so FLAVIA / CATENA sit
	   tightly together — safe there because it is all caps, with no descenders
	   to fall outside the line box. */
	--fc-leading-display: 0.92;
	/* Line height for inner page titles. Looser than the lockup because these
	   are title case: at 0.92 the descender of a "Weddings" or "Journal" spills
	   out of its box, and a title long enough to wrap would overlap itself. */
	--fc-leading-page-title: 1.1;
	/* Line height for section headings. */
	--fc-leading-heading: 1.2;
	/* Tracking for section headings. The same small positive value the page
	   titles take: title-case serif at this size sets a shade tight. */
	--fc-tracking-heading: 0.02em;
	/* Weight for h2–h4. Cormorant's regular. */
	--fc-weight-heading: 400;
	/* Weight for h5 and h6, which are too close to body size to announce
	   themselves by size alone. */
	--fc-weight-heading-minor: 500;
	/* Line height for body copy. A deliberate departure: the mockup measures
	   1.29, too tight to read comfortably across a 40rem justified column. */
	--fc-leading-body: 1.45;

	/* Tracking for large sans type. Slightly negative, as large type wants. */
	--fc-tracking-display: -0.02em;
	/* Tracking for small uppercase runs. Caps need opening up to stay legible. */
	--fc-tracking-label: 0.08em;

	/* ----------------------------------------------------------------------
	   Space
	   One scale for every gap in the theme. The mockup's section gaps cluster
	   at 60–116px with a few at 160, which is what these steps are pitched to.
	   Exposed to the editor as theme.json spacing presets.
	   ---------------------------------------------------------------------- */

	--fc-space-xs: 1rem;    /* 16px — inside the nav bar, tight stacks */
	--fc-space-s: 2rem;     /* 32px — between related blocks (default blockGap) */
	--fc-space-m: 3rem;     /* 48px — stacked photos on mobile */
	--fc-space-l: 4rem;     /* 64px — column gutters, photo-to-caption */
	--fc-space-xl: 7rem;    /* 112px — between home page sections */
	/* 160px — the widest break, before the closing enquiry.
	   Named xxl, not 2xl: WordPress kebab-cases preset slugs, so a "2xl" slug
	   would surface as --wp--preset--spacing--2-xl and break pattern references. */
	--fc-space-xxl: 10rem;

	/* Left and right page margin. 56px at the design width, floored on phones
	   so text never runs to the screen edge. */
	--fc-gutter: clamp(1.25rem, 4.1vw, 3.5rem);

	/* The two layout widths are the exception to this file: contentSize (40rem)
	   and wideSize (78rem) are set literally in theme.json, because the editor
	   consumes them in JavaScript for canvas sizing rather than only as CSS.
	   contentSize is wider than the mockup's ~34rem to give justified body copy
	   a workable measure. */

	/* templates/page-portfolio.html sets both widths to 78rem, so the portfolio
	   pages run their prose the full width of the gallery rather than at the
	   40rem measure the rest of the site uses. Templates are HTML and cannot
	   reach a variable, so the numbers are written out there; if wideSize
	   changes, change it there too. */

	/* ----------------------------------------------------------------------
	   Image ratios — the mockup uses only these two. The custom blocks force
	   their photo slots to one of them, so a landscape photo dropped into a
	   portrait slot is cropped to fit rather than breaking the row.

	   photo-columns is the exception: it is a gallery, so it prints every photo
	   at its own ratio and forces nothing.
	   ---------------------------------------------------------------------- */

	/* Every slot in photo-duo, photo-trio and portfolio-links. */
	--fc-ratio-portrait: 2 / 3;
	/* The single wide photos beside the About and approach columns. */
	--fc-ratio-landscape: 3 / 2;

	/* ----------------------------------------------------------------------
	   Two heights that are set in viewport units rather than from the scale,
	   because what they have to fit is the screen and not the page.
	   ---------------------------------------------------------------------- */

	/* The full-bleed banner at the top of the home page. Previously a 7/4 crop,
	   which at desktop widths ran to most of a screen; now it is a share of the
	   viewport and the photograph is cropped to whatever that comes to. `svh`
	   rather than `vh` so a phone's retracting browser chrome cannot make it
	   taller than the screen.

	   The second term is what guarantees the FLAVIA CATENA lockup lands above
	   the fold. Everything between the bottom of the banner and the bottom of
	   the lockup — the nav bar, its margin, two lines of wordmark — comes to a
	   little over 14rem and does not scale with viewport height, so on a short
	   laptop screen a straight percentage runs the lockup off the bottom. 16rem
	   reserves that stack plus clearance; the 70svh term is what actually
	   applies on anything taller. */
	--fc-hero-height: min(70svh, 100svh - 16rem);

	/* Narrowest a photo-columns column may get before the gallery drops one.
	   Paired with the block's column count in a two-value `columns` shorthand,
	   which makes the gallery responsive with no breakpoints: the count is a
	   ceiling, and the browser uses fewer whenever they would not fit. */
	--fc-photo-column-min: 15rem;
}