/*
Theme Name:  Haft Child
Theme URI:   https://github.com/mateuszguzy/haft-sklep
Description: Motyw potomny Blocksy dla sklepu z haftem na odzieży.
Author:      Mateusz Guzy
Template:    blocksy
Version:     1.0.7
Text Domain: haft-wizualizator
License:     GPL-2.0-or-later
*/

/* Własne style motywu potomnego. Styl rodzica ładowany jest w functions.php. */

/*
 * Design tokens, carried over from the mock-up in local/haft-atelier.html.
 *
 * Deliberately mirrored from theme.json rather than derived from it: theme.json
 * feeds the block editor, these feed our own CSS and the plugin's. One source
 * would be nicer; two that are checked side by side in one file are honest.
 */
:root {
	--haft-len: #efe9dc;
	--haft-kreda: #fbf9f5;
	--haft-atrament: #171a21;
	--haft-denim: #2a3e63;
	--haft-mulina: #c41e3a;

	/*
	 * The accent, pressed. Taken from the mock-up's .btn--nic:hover rather than
	 * derived: a red button darkening to ink on hover reads as a different
	 * control, not the same one under the cursor.
	 */
	--haft-mulina-ciemna: #a3172f;
	--haft-szalwia: #7c8f6e;
	--haft-szew: rgba( 23, 26, 33, 0.14 );

	--haft-font-display: "Bricolage Grotesque", system-ui, sans-serif;
	--haft-font-body: "Karla", system-ui, sans-serif;
	--haft-font-kod: "Space Mono", monospace;

	/* Near-zero radius: a workshop, not an app. */
	--haft-radius: 2px;

	/*
	 * Cards get a softer corner than controls do.
	 *
	 * The shop's radius is 2px on purpose — crisp edges suit embroidery, which
	 * is a craft of straight stitches. But a 2px corner on a large panel like the
	 * cart summary does not read as a decision, it reads as a rectangle nobody
	 * styled. This is for boxes big enough for the curve to be seen.
	 */
	--haft-radius-karta: 12px;

	/*
	 * The one pure-white surface in the shop.
	 *
	 * Everything else sits on linen or chalk, which are warm off-whites. The
	 * order summary is the panel a customer reads numbers off before paying, and
	 * lifting it to true white is what separates it from the page without
	 * needing a border to do the work.
	 */
	--haft-biel: #ffffff;
}

/*
 * Hand our palette to Blocksy instead of painting over it.
 *
 * Blocksy renders the whole site from eight --theme-palette-color-* variables:
 * the page background, cards, borders, links, buttons, the lot. Out of the box
 * they are its stock blue-and-grey (color-1 #2872fa, color-7 #FAFBFC), which is
 * why the shop came out cool grey with blue buttons while our warm tokens sat
 * unused — every one of our rules was repainting one surface at a time on top of
 * a theme still drawing from its own palette. Remapping the palette itself turns
 * the whole site over at once, including the parts we would never think to name.
 *
 * html:root, not :root: Blocksy declares the palette on :root from an inline
 * <style> in the head, which is a tie on specificity and later in document order
 * than our stylesheet link — so a plain :root here silently loses. Adding the
 * element selector wins it outright.
 *
 * The mapping follows Blocksy's own semantics for each slot, so its rules keep
 * meaning what they say.
 */
html:root {
	--theme-palette-color-1: var( --haft-mulina );    /* accent: links, buttons */
	--theme-palette-color-2: var( --haft-atrament );  /* accent, hovered */
	--theme-palette-color-3: var( --haft-atrament );  /* headings */
	--theme-palette-color-4: var( --haft-atrament );  /* body text */
	--theme-palette-color-5: var( --haft-szew );      /* borders and rules */
	--theme-palette-color-6: var( --haft-len );       /* alternate surfaces */
	--theme-palette-color-7: var( --haft-len );       /* the page itself */
	--theme-palette-color-8: var( --haft-kreda );     /* cards and panels */
}

/*
 * The face goes through Blocksy's variable as well as the property. In the
 * block editor Blocksy sets `:root body { font-family: var(--theme-font-family) }`,
 * which outranks a plain `body` — so without the variable the owner edited her
 * pages in the system font while the customer read them in Karla.
 */
body {
	font-family: var( --haft-font-body );
	--theme-font-family: var( --haft-font-body );
	color: var( --haft-atrament );
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

/*
 * Aida cloth weave — the mock-up's texture, two offset dot grids.
 *
 * `html body`, because Blocksy's inline rule is
 * `body { background-color: var(--theme-palette-color-7); background-image: none }`
 * and that `none` is not incidental: it is the theme actively clearing any
 * background image. A plain `body` rule ties and loses on document order, which
 * is exactly why this texture was written once already and never appeared.
 *
 * The colour is left to Blocksy on purpose. Its rule reads color-7, and color-7
 * is now our linen, so the background arrives correct without a second rule
 * competing to set it.
 */
html body {
	background-image:
		radial-gradient( rgba( 23, 26, 33, 0.055 ) 1px, transparent 1px ),
		radial-gradient( rgba( 23, 26, 33, 0.035 ) 1px, transparent 1px );
	background-size: 14px 14px, 14px 14px;
	background-position: 0 0, 7px 7px;
}

/*
 * What shows when the page is dragged past its ends (the rubber band on macOS
 * and iOS) is the html background. Linen at the top, where the header is;
 * denim at the bottom, where the footer is. The body keeps its own textured
 * background, so the page itself does not change.
 *
 * The gradient reads upside down on purpose. It repeats, and the rubber band
 * shows the neighbouring tile, not this one: above the page, the bottom half
 * of the tile before; below it, the top half of the tile after. Denim first
 * and linen second puts linen above the header and denim under the footer.
 */
html {
	background: linear-gradient( var( --haft-denim ) 50%, var( --haft-len ) 50% );
}

:focus-visible {
	outline: 2px solid var( --haft-mulina );
	outline-offset: 3px;
}

/*
 * Headings.
 *
 * `html h1`, and the line height goes through Blocksy's variable rather than
 * the property, because Blocksy sets `h1 { --theme-line-height: 1.5 }` from an
 * inline <style> and applies it via `h1 { line-height: var(--theme-line-height) }`
 * in its bundle. Both are a single element selector — a tie with the plain
 * `h1, h2, h3` this used to be, decided by document order, which Blocksy wins.
 * The display face and weight looked right only by luck of that same coin toss.
 * One extra element in the selector settles it, and setting the variable means
 * Blocksy's own rule carries our value instead of fighting it.
 */
html h1,
html h2,
html h3 {
	font-family: var( --haft-font-display );
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.03;

	--theme-line-height: 1.03;
	--theme-font-weight: 800;
	--theme-font-family: var( --haft-font-display );
}