/*
 * base.css — CSS Reset + Root Custom Property Aliases
 * Sapiens + Machines Block Theme
 * ─────────────────────────────────────────────────────────────────────────────
 * Load order : 1 of 6
 * Depends on : theme.json (WordPress generates --wp--preset--* custom props)
 *
 * Architecture note:
 *   theme.json is the single source of truth for all design tokens.
 *   WordPress automatically generates:
 *     --wp--preset--color--{slug}
 *     --wp--preset--font-family--{slug}
 *     --wp--preset--font-size--{slug}
 *     --wp--preset--spacing--{slug}
 *
 *   This file creates SHORT ALIASES for those verbose names, e.g.:
 *     --ink: var(--wp--preset--color--ink)
 *
 *   All other CSS files (typography, components, forms, patterns, responsive)
 *   reference ONLY the short aliases — never hardcoded values, never the
 *   long --wp--preset-- names. This keeps authored CSS readable and ensures
 *   every value traces back to a named token in theme.json.
 * ─────────────────────────────────────────────────────────────────────────────
 */

/* ── 1. Modern CSS Reset ────────────────────────────────────────────────────── */
/* Based on Josh Comeau's reset with FSE-specific additions.                     */

*,
*::before,
*::after {
	box-sizing: border-box;
}

* {
	margin: 0;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust:         100%;
	scroll-behavior:          smooth;
	hanging-punctuation:      first last;
}

body {
	min-height: 100svh;
	line-height: 1.65;
	-webkit-font-smoothing:  antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img,
picture,
video,
canvas,
svg {
	display:   block;
	max-width: 100%;
}

input,
button,
textarea,
select {
	font: inherit;
}

p,
h1, h2, h3, h4, h5, h6 {
	overflow-wrap: break-word;
}

ul, ol {
	padding-inline-start: 1.5em;
}

/* Remove default list styling when lists are used as navigation */
nav ul,
nav ol {
	list-style:          none;
	padding-inline-start: 0;
}

/* ── 2. Root Custom Property Aliases ────────────────────────────────────────── */
/*
 * Never use hardcoded values after this block.
 * ✅  background: var(--paper-deep)
 * ❌  background: #EAE5D6
 * ❌  background: var(--wp--preset--color--paper-deep)
 */

:root {

	/* ── Colors ─────────────────────────────────────── */

	/* Ink family — text, borders, UI on light backgrounds */
	--ink:          var(--wp--preset--color--ink);        /* #1B1916 */
	--ink-soft:     var(--wp--preset--color--ink-soft);   /* #4A453E */
	--ink-faint:    var(--wp--preset--color--ink-faint);  /* #7A7567 */

	/* Paper family — page backgrounds */
	--paper:        var(--wp--preset--color--paper);      /* #F3F0E7 — base page bg     */
	--paper-deep:   var(--wp--preset--color--paper-deep); /* #EAE5D6 — alternate bands  */
	--paper-lift:   var(--wp--preset--color--paper-lift); /* #FBF9F3 — elevated cards   */

	/* Line family — borders and dividers */
	--line:         var(--wp--preset--color--line);       /* #D7D0BC */
	--line-soft:    var(--wp--preset--color--line-soft);  /* #E3DDCB */

	/* Sapiens — human / warm amber accent */
	--sapiens:      var(--wp--preset--color--sapiens);      /* #B8763F */
	--sapiens-deep: var(--wp--preset--color--sapiens-deep); /* #8C5A2E */
	--sapiens-tint: var(--wp--preset--color--sapiens-tint); /* #EFDFC8 */

	/* Machine — technical / slate blue accent */
	--machine:      var(--wp--preset--color--machine);      /* #3E5C6B */
	--machine-deep: var(--wp--preset--color--machine-deep); /* #28404C */
	--machine-tint: var(--wp--preset--color--machine-tint); /* #D7E1E3 */

	/* Moss — confirmation / forest green */
	--moss:         var(--wp--preset--color--moss);         /* #3F4D38 — primary CTA    */
	--moss-deep:    var(--wp--preset--color--moss-deep);    /* #2C3727 — CTA hover      */
	--moss-tint:    var(--wp--preset--color--moss-tint);    /* #DCE3D3 */

	/* Status */
	--success:      var(--wp--preset--color--success);      /* #3D5C3A */
	--warning:      var(--wp--preset--color--warning);      /* #8C6220 */
	--error:        var(--wp--preset--color--error);        /* #8C3530 */

	/* ── Spacing ─────────────────────────────────────── */

	--space-3xs: var(--wp--preset--spacing--3xs);  /*   4px */
	--space-2xs: var(--wp--preset--spacing--2xs);  /*   8px */
	--space-xs:  var(--wp--preset--spacing--xs);   /*  12px */
	--space-sm:  var(--wp--preset--spacing--sm);   /*  16px */
	--space-md:  var(--wp--preset--spacing--md);   /*  24px */
	--space-lg:  var(--wp--preset--spacing--lg);   /*  32px */
	--space-xl:  var(--wp--preset--spacing--xl);   /*  48px */
	--space-2xl: var(--wp--preset--spacing--2xl);  /*  72px */
	--space-3xl: var(--wp--preset--spacing--3xl);  /* 112px */

	/* ── Typography ──────────────────────────────────── */

	--font-display:  var(--wp--preset--font-family--fraunces);
	--font-body:     var(--wp--preset--font-family--work-sans);
	--font-mono:     var(--wp--preset--font-family--ibm-plex-mono);

	--size-display:  var(--wp--preset--font-size--display); /* 56px */
	--size-h1:       var(--wp--preset--font-size--h1);      /* 48px */
	--size-h2:       var(--wp--preset--font-size--h2);      /* 36px */
	--size-h3:       var(--wp--preset--font-size--h3);      /* 26px */
	--size-h4:       var(--wp--preset--font-size--h4);      /* 20px */
	--size-large:    var(--wp--preset--font-size--large);   /* 18px */
	--size-base:     var(--wp--preset--font-size--base);    /* 16px */
	--size-small:    var(--wp--preset--font-size--small);   /* 14px */
	--size-label:    var(--wp--preset--font-size--label);   /* 12px */

	/* ── Layout ──────────────────────────────────────── */

	--container:        1240px;
	--container-narrow:  760px;

	/* ── Border Radius ───────────────────────────────── */

	--radius-sm:   3px;   /* Tag pills, small UI elements */
	--radius-md:   6px;   /* Larger UI elements           */
	--radius-card: 4px;   /* Cards and panels             */

	/* ── Transitions ─────────────────────────────────── */

	--transition-fast: 150ms ease;
	--transition-base: 250ms ease;
	--transition-slow: 400ms ease;

	/* ── Fraunces Variable Font Settings ─────────────── */
	/* Applied globally to all Fraunces usage via the CSS cascade. */
	/* Override per-element if SOFT/WONK need to differ.           */

	--fraunces-axes: 'SOFT' 0, 'WONK' 1;
}

/* ── 3. Fraunces Variable Font Axes ─────────────────────────────────────────── */
/*
 * theme.json sets font-variation-settings on heading elements.
 * This rule ensures any Fraunces usage outside of headings also respects
 * the brand axis settings (e.g. pull quotes, bylines).
 */

.font-display,
.wp-block-pullquote,
.wp-block-quote {
	font-variation-settings: var(--fraunces-axes);
}

/* ── 4. Mono Label Utility Class ─────────────────────────────────────────────── */
/*
 * Applied to eyebrows, section labels, stat captions, tag labels.
 * Usage: add class="sm-label" to a core/paragraph block via the
 *        Advanced > Additional CSS class(es) field in the editor.
 */

.sm-label {
	font-family:     var(--font-mono);
	font-size:       var(--size-label);
	font-weight:     500;
	line-height:     1.4;
	letter-spacing:  0.08em;
	text-transform:  uppercase;
	color:           var(--ink-faint);
}

/* Sapiens-colored eyebrow variant */
.sm-label--sapiens {
	color: var(--sapiens-deep);
}

/* Machine-colored label variant */
.sm-label--machine {
	color: var(--machine);
}

/* ── 5. WordPress Block Layout Adjustments ──────────────────────────────────── */

/* Remove default outer padding from the site root — sections control their own padding. */
.wp-site-blocks {
	padding-inline: 0;
	padding-block:  0;
}

/* Prevent width overflow in nested auto-layout contexts. */
.wp-block-group,
.wp-block-columns,
.wp-block-cover,
.wp-block-query {
	min-width: 0;
}

/* Constrain wide-aligned blocks to the 1240px container. */
.alignwide {
	max-width: var(--container);
}

/* Full-bleed blocks fill the viewport regardless of container padding. */
.wp-block-group.alignfull,
.wp-block-cover.alignfull {
	margin-inline: calc(-1 * var(--wp--style--root--padding-left, 0px));
	width: calc(
		100% +
		var(--wp--style--root--padding-left,  0px) +
		var(--wp--style--root--padding-right, 0px)
	);
	max-width: calc(
		100% +
		var(--wp--style--root--padding-left,  0px) +
		var(--wp--style--root--padding-right, 0px)
	);
}

/* ── 6. Focus & Selection ────────────────────────────────────────────────────── */

:focus-visible {
	outline:        2px solid var(--sapiens);
	outline-offset: 3px;
	border-radius:  var(--radius-sm);
}

/* Remove default :focus styles in favour of :focus-visible */
:focus:not(:focus-visible) {
	outline: none;
}

::selection {
	background-color: var(--sapiens-tint);
	color:            var(--sapiens-deep);
}

/* ── 7. Horizontal Rule / Separator ─────────────────────────────────────────── */

hr,
.wp-block-separator {
	border:        none;
	border-top:    1px solid var(--line);
	margin-block:  var(--space-lg);
	height:        0;
}

/* ── 8. Base Link Styles ─────────────────────────────────────────────────────── */
/*
 * theme.json handles link colour and decoration on block elements.
 * These rules cover semantic HTML outside the block editor scope.
 */

a {
	color:                   inherit;
	text-underline-offset:   0.2em;
	text-decoration-thickness: 1px;
	transition:              color var(--transition-fast);
}

a:hover {
	color: var(--sapiens);
}

/* ── 9. Reduced Motion ───────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration:   0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration:  0.01ms !important;
		scroll-behavior:      auto !important;
	}
}

/* ── 10. WordPress Admin Bar Offset ──────────────────────────────────────────── */
/*
 * When the admin bar is visible, push any sticky header down so it
 * doesn't overlap the bar.
 */

.admin-bar .wp-block-template-part[data-wp-template-part-slug="header"] {
	top: var(--wp-admin--admin-bar--height, 32px);
}

/* ── 11. Print Baseline ──────────────────────────────────────────────────────── */

@media print {
	body {
		background: white;
		color:      black;
		font-size:  12pt;
	}

	a[href]::after {
		content: ' (' attr(href) ')';
		font-size: 0.8em;
		color: #555;
	}

	.wp-block-template-part[data-wp-template-part-slug="header"],
	.wp-block-template-part[data-wp-template-part-slug="footer"] {
		display: none;
	}
}