/**
 * Design tokens
 *
 * The single source of truth for colour, type, spacing and layout.
 * Change a value here and it propagates through every component and block.
 *
 * Naming keeps the Norwegian design-system names (Lys, Mørk sort, Gull) as
 * aliases so values pasted straight out of Figma keep working.
 *
 * `body` is listed alongside `:root` on purpose: WordPress rewrites `body`
 * selectors in editor stylesheets to the block canvas wrapper, so this is what
 * makes the tokens available to blocks previewed inside the editor.
 *
 * @package Norwegian_Flagstone
 */

:root,
body {

	/* Brand palette -------------------------------------------------------- */

	--nf-lys: #fff8e1;        /* Light cream — page background, text on dark  */
	--nf-mork-sort: #1b1916;  /* Near black — text on light, dark surfaces    */
	--nf-gull: #d1bc92;       /* Gold / tan — primary accent, buttons         */
	--nf-white: #fff;
	--nf-black: #000;

	/* Figma aliases. Values pasted as var(--Lys, #FFF8E1) resolve to these. */
	--Lys: var(--nf-lys);
	--Mrk-sort: var(--nf-mork-sort);
	--Gull: var(--nf-gull);

	/* Derived tints & shades ----------------------------------------------- */

	--nf-lys-70: rgb(255 248 225 / 70%);
	--nf-lys-50: rgb(255 248 225 / 50%);
	--nf-lys-15: rgb(255 248 225 / 15%);
	--nf-mork-sort-70: rgb(27 25 22 / 70%);
	--nf-mork-sort-50: rgb(27 25 22 / 50%);
	--nf-mork-sort-15: rgb(27 25 22 / 15%);
	--nf-gull-hover: #c2a978;
	--nf-mork-sort-hover: #2f2c27;

	/* Semantic colour roles ------------------------------------------------ */

	--nf-color-bg: var(--nf-lys);
	--nf-color-text: var(--nf-mork-sort);
	--nf-color-text-muted: var(--nf-mork-sort-70);
	--nf-color-heading: var(--nf-mork-sort);
	--nf-color-link: var(--nf-mork-sort);
	--nf-color-link-hover: var(--nf-gull-hover);
	--nf-color-border: var(--nf-mork-sort-15);
	--nf-color-accent: var(--nf-gull);

	/* Inverted context (dark surfaces, media overlays) */
	--nf-color-bg-dark: var(--nf-mork-sort);
	--nf-color-text-on-dark: var(--nf-lys);

	/* Media overlay used behind text on imagery */
	--nf-overlay: rgb(27 25 22 / 25%);

	/* Typography ----------------------------------------------------------- */

	/* Caesura is served from Adobe Fonts (Typekit). Serif fallbacks are used
	   because the real face is a high-contrast serif — a sans fallback would
	   reflow badly while the kit loads. */
	--nf-font-display: caesura, "Times New Roman", times, serif;
	--nf-font-body: cabin, "Helvetica Neue", helvetica, arial, sans-serif;

	--nf-font-weight-regular: 400;
	--nf-font-weight-medium: 500;
	--nf-font-weight-bold: 700;

	/*
	 * Type scale. The max of each clamp() is the exact Figma desktop value;
	 * the min keeps long Norwegian words from breaking on small screens.
	 */
	--nf-fs-hero: clamp(1.75rem, 1.15rem + 2.6vw, 2.5rem);   /* 28 → 40px    */
	--nf-fs-h1: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);        /* 28 → 40px    */
	--nf-fs-h2: clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem);   /* 22 → 30px    */
	--nf-fs-h3: clamp(1.25rem, 1.1rem + 0.7vw, 1.5625rem);   /* 20 → 25px    */
	--nf-fs-intro: clamp(1.25rem, 1.05rem + 0.85vw, 1.5625rem); /* 20 → 25px */
	--nf-fs-lead: 1.25rem;                                   /* 20px         */
	--nf-fs-body: 1rem;                                      /* 16px         */
	--nf-fs-small: 0.875rem;                                 /* 14px         */
	--nf-fs-logo: clamp(1.25rem, 1.1rem + 0.5vw, 1.5625rem); /* 20 → 25px    */
	--nf-fs-nav: 1rem;                                       /* 16px         */

	--nf-lh-tight: 1.08;
	--nf-lh-display: normal;
	--nf-lh-heading: 1.2;
	--nf-lh-body: 1.4;   /* 140% — matches the Figma body/intro spec */
	--nf-lh-loose: 1.6;

	--nf-tracking-wide: 0.04em;

	/* Spacing scale -------------------------------------------------------- */

	--nf-space-3xs: 0.25rem;  /* 4px  */
	--nf-space-2xs: 0.5rem;   /* 8px  */
	--nf-space-xs: 0.75rem;   /* 12px */
	--nf-space-s: 1rem;       /* 16px */
	--nf-space-m: 1.5rem;     /* 24px */
	--nf-space-l: 2rem;       /* 32px */
	--nf-space-xl: 3rem;      /* 48px */
	--nf-space-2xl: 4rem;     /* 64px */
	--nf-space-3xl: 6rem;     /* 96px */

	/* Vertical rhythm for blocks. Blocks expose small/medium/large/none. */
	--nf-section-space-s: clamp(1.5rem, 3vw, 2.5rem);
	--nf-section-space-m: clamp(2.5rem, 5vw, 4rem);
	--nf-section-space-l: clamp(4rem, 8vw, 7rem);

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

	--nf-gutter: clamp(1.25rem, 4vw, 2.5rem);  /* 20 → 40px page inset */
	--nf-container: 1440px;   /* Outer bound for full-width sections   */
	--nf-content: 1140px;     /* Default content column                */
	--nf-measure: 45rem;      /* 720px — comfortable reading width     */
	--nf-measure-narrow: 39rem; /* 624px — centred intro copy          */

	/*
	 * Header height is derived from the wordmark rather than hard-coded, so it
	 * stays correct as --nf-fs-logo scales down on smaller screens:
	 * two lines of the logo, plus 20px of padding above and below.
	 * Desktop: 25px × 1.08 × 2 + 40 = 94px.
	 */
	--nf-header-padding: 1.25rem; /* 20px */
	--nf-logo-line-height: 1.08;  /* 27px at 25px */
	--nf-logo-lines: 2;
	--nf-header-height: calc(
		(var(--nf-fs-logo) * var(--nf-logo-line-height) * var(--nf-logo-lines)) +
		(var(--nf-header-padding) * 2)
	);

	/*
	 * Distance the fixed header is pushed down from the top of the viewport.
	 * Overridden to the admin-bar height for logged-in users in site-header.css.
	 */
	--nf-header-offset: 0px;

	/* Total space anything below the header has to clear. */
	--nf-header-space: calc(var(--nf-header-height) + var(--nf-header-offset));

	/* Borders, radii, shadows --------------------------------------------- */

	--nf-radius-s: 3px;
	--nf-radius: 5px;         /* Buttons, per Figma */
	--nf-radius-l: 10px;
	--nf-radius-pill: 999px;

	--nf-border-width: 1px;

	--nf-shadow-s: 0 1px 2px rgb(27 25 22 / 8%);
	--nf-shadow-m: 0 8px 24px rgb(27 25 22 / 12%);
	--nf-shadow-text: 0 1px 12px rgb(27 25 22 / 35%);

	/* Controls ------------------------------------------------------------- */

	--nf-control-height: 2.125rem;  /* 34px — Figma button height */
	--nf-control-padding-x: 1.25rem;

	/* Motion --------------------------------------------------------------- */

	--nf-duration-fast: 120ms;
	--nf-duration: 220ms;
	--nf-duration-slow: 420ms;
	--nf-ease: cubic-bezier(0.4, 0, 0.2, 1);
	--nf-transition: var(--nf-duration) var(--nf-ease);

	/* Z-index ladder ------------------------------------------------------- */

	--nf-z-base: 1;
	--nf-z-media-overlay: 2;
	--nf-z-content: 3;
	--nf-z-header: 100;
	--nf-z-drawer: 200;
	--nf-z-skip-link: 300;
}