/* ==========================================================================
   TOKENS
   Loaded first. The @layer statement below is the important line in the
   whole theme: it fixes the cascade order for every layer, before any of
   them have content. After this, a rule in `components` cannot be beaten
   by a rule in `base` no matter how specific the base selector is.

   Add a new stylesheet? Add its name here and to the $layers array in
   functions.php. Nothing else needs to change.
   ========================================================================== */

@layer tokens, base, layout, components, pages, motion;

/* Archivo itself lives in font.css (inlined). The fallback below is Arial reshaped to Archivo's
   metrics, so if the font were ever unavailable the layout would still not move. */
@font-face {
	font-family: "Archivo Fallback";
	src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
	size-adjust: 96.93%;
	ascent-override: 90.58%;
	descent-override: 21.66%;
	line-gap-override: 0.00%;
}


@layer tokens {

	:root {

		/* ---------------------------------------------------------------
		   Colour: final (Jarv, 22 Oct 2026). See CLAUDE.md "Colour".
		   UI colours first, then the illustration's slightly brighter ones.
		   Components read the semantic tokens further down, never these.
		   --------------------------------------------------------------- */

		--c-paper: #f3f4f1;          /* page ground */
		--c-paper-light: #f9f9f7;    /* project pages: a touch lighter */
		--c-ink: #1b2a5e;            /* headings, body, ink buttons, ink bands */
		--c-ink-hover: #2f4380;      /* ink buttons on hover */
		--c-muted: #4a5578;          /* secondary text on paper (7:1) */
		--c-mist: #c9d4f2;           /* body text on ink */
		--c-sky-band: #d9e4f0;       /* the light blue band behind Selected work: the sky piece at 24% on paper (Jarv, 24 Oct 2026) */
		--c-coral: #c4472a;          /* contact buttons only: white text 4.9:1 */
		--c-coral-hover: #a93a20;
		--c-white: #ffffff;

		/* The illustration: the paper pieces, the dot before the name, the
		   favicon, the About icons. Artwork only, never text or buttons. */
		--art-coral: #e4613e;
		--art-green: #4fae62;
		--art-ochre: #efbf2c;
		--art-sky: #86b2ec;
		--art-ink: #1b2a5e;

		/* Textures: the paper's fibre grain (about 3.5%), a little stronger on
		   ink (6%), and the light speckle on coral buttons. The grain tiles are
		   the prototype's own, saved once as small palette PNGs. */
		--grain: url("../img/grain-paper.png");
		--grain-ink: url("../img/grain-ink.png");
		--speckle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 -2.6 1.25'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.16'/%3E%3C/svg%3E");

		/* Semantic tokens: what components use */
		--bg: var(--c-paper);
		--fg: var(--c-ink);
		--fg-muted: var(--c-muted);
		--rule: color-mix(in srgb, var(--c-ink) 14%, transparent);
		--accent: var(--c-ink);
		--accent-deep: var(--c-ink-hover);
		--divider-on-ink: rgba(243, 244, 241, 0.18);

		/* Older names, still read by components not yet rebuilt. Remove once
		   each component is ported from the prototype. */
		--ink-900: var(--c-ink);
		--ink-700: var(--c-ink);
		--ink-600: var(--c-muted);
		--ink-500: var(--c-muted);
		--ink-300: var(--c-mist);
		--ink-100: color-mix(in srgb, var(--c-ink) 10%, var(--c-paper));
		--paper: var(--c-paper);
		--accent-ink: var(--c-mist);

		/* ---------------------------------------------------------------
		   Type
		   Two families maximum. Set --font-display and --font-text once
		   the typefaces are chosen; the stack below is the fallback only.
		   --------------------------------------------------------------- */

		--font-display: "Archivo", "Archivo Fallback", system-ui, sans-serif;
		--font-text: "Archivo", "Archivo Fallback", system-ui, sans-serif;

		/* The site's type, as set on the prototype pages (Jarv, 21 Oct 2026).
		   Desktop sizes; phones scale down through the clamps. */
		--t-title: clamp(36px, 9.2vw, 50px);       /* page titles: 900 */
		--t-lede: clamp(18px, 4.6vw, 20px);        /* the line under a page title */
		--t-h2: clamp(26px, 7vw, 28px);            /* section and chapter titles: 900 */
		--t-band: clamp(26px, 10.1vw, 48px);       /* homepage band headings and the closing CTA: 900 */
		--t-body: 16px;                            /* body text */
		--t-small: 14px;                           /* captions, card tags, footer */
		--t-nav: 20px;                             /* name (900), Work, About, Contact (700) */
		--w-title: 900;
		--w-button: 700;

		/* Fluid scale, 1.25 ratio at the small end opening to 1.333.
		   Clamp middles are calculated for a 360–1440px viewport range. */
		--step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.94rem);
		--step-0: clamp(1rem, 0.96rem + 0.22vw, 1.13rem);
		--step-1: clamp(1.25rem, 1.16rem + 0.42vw, 1.5rem);
		--step-2: clamp(1.4rem, 1.28rem + .6vw, 1.75rem);
		--step-3: clamp(1.7rem, 1.5rem + 1vw, 2.3rem);
		--step-4: clamp(2.1rem, 1.8rem + 1.7vw, 3.1rem);
		--step-5: clamp(2.6rem, 2.1rem + 2.6vw, 4.1rem);

		--leading-tight: 1.05;
		--leading-body: 1.5;
		--tracking-tight: -0.02em;

		--measure: 62ch;

		/* ---------------------------------------------------------------
		   Space — 4px base, geometric-ish
		   --------------------------------------------------------------- */

		--space-2xs: 0.25rem;
		--space-xs: 0.5rem;
		--space-s: 0.75rem;
		--space-m: 1.25rem;
		--space-l: 2rem;
		--space-xl: 2.5rem;
		--space-2xl: 3.75rem;
		--space-3xl: clamp(3rem, 2rem + 5vw, 5.5rem);

		/* ---------------------------------------------------------------
		   Layout
		   --------------------------------------------------------------- */

		--wrap-max: 76rem;
		--gutter: clamp(1.25rem, 0.6rem + 3vw, 3rem);

		/* ---------------------------------------------------------------
		   Motion
		   Durations only. Anything that moves reads from these so the
		   whole site can be slowed or sped as one.
		   --------------------------------------------------------------- */

		--dur-fast: 140ms;
		--dur-base: 320ms;
		--dur-slow: 720ms;
		--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
		--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

		/* Header heights: phones, then desktop (see the media query below) */
		--head-h: 64px;
		--gut: 24px;   /* the page's left and right edge (desktop: see the media query below) */

		/* Height-based sizes on the homepage use --vh: the average of svh (space
		   left with Safari's toolbars showing) and lvh (the whole screen). On an
		   iPhone 16 Pro that's ~757px, about what's actually visible. */
		--vh: calc((1svh + 1lvh) / 2);
		--dim: 0.3;   /* faded text and logos start at 30% */
		/* The homepage's shape panels, rounded down to whole pixels (a fractional
		   edge on the sticky panel shows as a hairline seam while scrolling).
		   Services panel: 237px on an iPhone 16 Pro. */
		--art-h: calc(env(safe-area-inset-top, 0px) + var(--head-h) + calc(24.44 * var(--vh)));
		--art-h: round(down, calc(env(safe-area-inset-top, 0px) + var(--head-h) + calc(24.44 * var(--vh))), 1px);
		--hero-drop: calc(4 * var(--vh));   /* the hero shapes sit this much lower than the services' (was 5.68: with 24 below, keeps the arrow clear of Safari's floating toolbar, Jarv, 25 Oct 2026) */
		--hero-art-h: round(down, calc(env(safe-area-inset-top, 0px) + var(--head-h) + var(--hero-drop) + calc(24 * var(--vh))), 1px);   /* art 24% of the screen, was 30% */
	}

	/* Dark bands invert the semantic tokens rather than restating colours
	   on every child. Components never know which band they are in. */
	.band--dark {
		--bg: var(--c-ink);
		--fg: var(--c-paper);
		--fg-muted: var(--c-mist);
		--accent: var(--c-mist);
		--rule: var(--divider-on-ink);
	}

	@media (min-width: 1024px) {
		:root {
			--head-h: 72px;   /* desktop header: 16px above the Contact button */
			/* 48 to 120px, growing with the screen; past 1800px everything sits in a centred 1800px frame */
			--gut: max(clamp(48px, calc((100vw - 1216px) / 2), 120px), calc((100vw - 1800px) / 2 + 120px));
		}
	}

}