/*
 Theme Name:   Rachel & Mark Child
 Description:  Child theme for the Rachel & Mark rebuild (studio.rachelandmark.co.uk)
 Template:     generatepress
 Version:      0.1.0
*/

/*
 * Base type, page ground and the three design "looks" only. Components are
 * GenerateBlocks Global Styles that read the --look tokens below, so one set
 * of components renders in all three designs.
 */

@font-face { font-family: "Bricolage Grotesque"; font-weight: 400 800; font-display: swap; src: url(assets/fonts/bricolage.woff2) format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 400 700; font-display: swap; src: url(assets/fonts/figtree.woff2) format("woff2"); }
@font-face { font-family: "Newsreader"; font-weight: 500; font-display: swap; src: url(assets/fonts/newsreader-500.woff2) format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 500; font-display: swap; src: url(assets/fonts/newsreader-500-italic.woff2) format("woff2"); }
@font-face { font-family: "Caveat"; font-weight: 600; font-display: swap; src: url(assets/fonts/caveat-600.woff2) format("woff2"); }

/* Look A — Studio: the current brand, refreshed (purple, slate, sunshine yellow). */
:root {
	--l-bg: #ffffff;
	--l-surface: #f5f2fa;
	--l-surface-2: #e7edf1;
	--l-ink: #1f1a2b;
	--l-ink-2: #52496a;
	--l-brand: #6c3fb5;
	--l-brand-ink: #ffffff;
	--l-accent: #f6d13d;
	--l-accent-ink: #1f1a2b;
	--l-line: #ddd5ea;
	--l-dark: #241a3a;
	--l-dark-ink: #f3eefb;
	--l-radius: 18px;
	--l-radius-sm: 10px;
	--l-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
	--l-display-weight: 700;
	--l-display-case: none;
	--l-body: "Figtree", "Segoe UI", system-ui, sans-serif;
	--l-hand: "Caveat", "Segoe Print", cursive;
	--l-shadow: 0 18px 40px -22px rgba(36, 26, 58, 0.45);
}

/* Look B — Coast: editorial, Cornish harbour colours, serif headlines. */
body.look-coast {
	--l-bg: #fbfcfb;
	--l-surface: #e9f1ef;
	--l-surface-2: #dbe7ea;
	--l-ink: #0f2a3a;
	--l-ink-2: #3f5b68;
	--l-brand: #1f6f78;
	--l-brand-ink: #ffffff;
	--l-accent: #e8745a;
	--l-accent-ink: #ffffff;
	--l-line: #c9dad9;
	--l-dark: #0f2a3a;
	--l-dark-ink: #e6f0ef;
	--l-radius: 4px;
	--l-radius-sm: 2px;
	--l-display: "Newsreader", Georgia, serif;
	--l-display-weight: 500;
	--l-shadow: none;
}

/* Look C — Bold: big yellow blocks and handwritten notes, echoing the old angled shapes. */
body.look-bold {
	--l-bg: #fffdf5;
	--l-surface: #fff3c4;
	--l-surface-2: #ffe36e;
	--l-ink: #15131a;
	--l-ink-2: #3b3644;
	--l-brand: #15131a;
	--l-brand-ink: #ffd23f;
	--l-accent: #ffd23f;
	--l-accent-ink: #15131a;
	--l-line: #15131a;
	--l-dark: #15131a;
	--l-dark-ink: #fffdf5;
	--l-radius: 0px;
	--l-radius-sm: 0px;
	--l-display-weight: 800;
	--l-shadow: 8px 8px 0 #15131a;
}

html, body { overflow-x: clip; } /* decorative offsets must never cause sideways scroll */

body {
	background: var(--l-bg);
	color: var(--l-ink);
	font-family: var(--l-body);
	font-size: 18px;
	line-height: 1.65;
}

h1, h2, h3, h4 {
	font-family: var(--l-display);
	font-weight: var(--l-display-weight);
	line-height: 1.04;
	letter-spacing: -0.015em;
	text-wrap: balance;
	color: var(--l-ink);
}

a { color: var(--l-brand); }

::selection { background: var(--l-accent); color: var(--l-accent-ink); }
:focus-visible { outline: 3px solid var(--l-accent); outline-offset: 3px; }

.site.grid-container,
.one-container .container,
.one-container .site-content,
.separate-containers .inside-article { background: transparent; }

.site-main .entry-content > p,
.site-main .entry-content > ul,
.site-main .entry-content > h2,
.site-main .entry-content > h3 { max-width: 720px; margin-inline: auto; padding-inline: 16px; box-sizing: content-box; }

@media (prefers-reduced-motion: reduce) {
	* { animation: none !important; transition: none !important; }
}