/*
Theme Name: mie (Hello Elementor Child)
Theme URI: https://therealmie.com
Description: Child theme for therealmie.com — ships the mie brand kit (Playfair Display + Lato + Raleway, brand-board palette) as CSS custom properties and base typography. Map into Elementor Site Settings → Global Colors / Global Typography to apply across Elementor-built pages.
Author: Awen
Author URI: https://awen.online
Template: hello-elementor
Version: 0.1.0
Text Domain: mie-child
*/

/* Parent stylesheet is enqueued in functions.php — do NOT @import here. */

/* ---------------------------------------------------------------------------
 * Brand kit — single source of truth for colors + fonts
 * Map these into Elementor Site Settings → Global Colors / Global Typography
 * so Elementor widgets pick them up. The variables below are also applied to
 * base HTML elements so non-Elementor surfaces (wp-login, classic editor
 * preview, plain text content) inherit the brand.
 * --------------------------------------------------------------------------- */
:root {
	/* Base — neutral & clean */
	--mie-cool-light-gray: #D6D9E0;     /* secondary background */
	--mie-pale-cool-white: #F0F1F4;     /* primary background */
	--mie-slate-blue-gray: #677381;     /* body text */

	/* Accent — inspired by Cool Summer */
	--mie-soft-sky-blue: #BFC9EB;       /* secondary buttons */
	--mie-steel-blue: #49728C;          /* headings & key text */
	--mie-teal-green: #569DAA;          /* borders & dividers */

	/* Complementary — pop of brightness */
	--mie-cool-aqua: #55C0BA;           /* primary buttons & interactive */
	--mie-soft-lavender: #A3A5D9;       /* hover states */
	--mie-pale-rose: #EFACD5;           /* accent / feature sections */

	/* Aliases that match the awen-client `awen_client_brand` schema slots
	 * so theme code can read either name. */
	--mie-primary: var(--mie-cool-aqua);
	--mie-secondary: var(--mie-steel-blue);
	--mie-text: var(--mie-slate-blue-gray);
	--mie-background: var(--mie-pale-cool-white);
	--mie-accent: var(--mie-pale-rose);

	/* Typography */
	--mie-font-heading: "Playfair Display", Georgia, serif;
	--mie-font-subhead: "Raleway", Helvetica, Arial, sans-serif;
	--mie-font-body: "Lato", Helvetica, Arial, sans-serif;
	--mie-font-script: "Beloved Script", "Playfair Display", Georgia, cursive;
}

/* Base typography — applies to non-Elementor surfaces. Elementor widgets
 * use their own kit settings; once the global typography map is set in
 * Site Settings, the rules below are effectively a fallback. */
body {
	font-family: var(--mie-font-body);
	color: var(--mie-text);
	background-color: var(--mie-background);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--mie-font-heading);
	color: var(--mie-secondary);
	font-weight: 700;
}

/* Subheaders / callouts — Raleway Bold per brand board. Add `.mie-subhead`
 * to a heading or paragraph to opt in. */
.mie-subhead {
	font-family: var(--mie-font-subhead);
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

/* Signature / artistic statement — Beloved Script per brand board. Add
 * `.mie-signature`. Falls back to Playfair if Beloved Script isn't loaded
 * (it isn't a Google Font; load via @font-face from local files when
 * licensing is sorted). */
.mie-signature {
	font-family: var(--mie-font-script);
	font-weight: 400;
	font-style: italic;
}

/* Links + buttons — primary aqua + lavender hover per brand board. */
a {
	color: var(--mie-primary);
	transition: color 150ms ease;
}
a:hover,
a:focus {
	color: var(--mie-soft-lavender);
}

button:not(.elementor-button),
.wp-block-button__link,
input[type="submit"] {
	background-color: var(--mie-primary);
	color: var(--mie-pale-cool-white);
	border: 0;
	padding: 0.6em 1.2em;
	font-family: var(--mie-font-body);
	font-weight: 700;
	letter-spacing: 0.02em;
	transition: background-color 150ms ease, transform 150ms ease;
}
button:not(.elementor-button):hover,
button:not(.elementor-button):focus,
.wp-block-button__link:hover,
.wp-block-button__link:focus,
input[type="submit"]:hover,
input[type="submit"]:focus {
	background-color: var(--mie-soft-lavender);
}

/* Borders & dividers — teal green per brand board. */
hr {
	border: 0;
	border-top: 1px solid var(--mie-teal-green);
	opacity: 0.6;
}