/*
Theme Name:   Marafiki Child
Theme URI:    https://marafiki.org
Description:  Child theme of Hello Elementor for the Marafiki Wellness Club member platform.
Author:       FRONTTOBACK STUDIO LLC
Template:     hello-elementor
Version:      0.3.0
Requires PHP: 8.0
Text Domain:  marafiki-child
*/

/*
 * Design tokens for the member platform (My Marafiki dashboard, tracker, wellness card).
 * Each one falls back to Elementor's global Site Settings, so changing a brand color or
 * font in Elementor → Site Settings updates these automatically. The hex/font after the
 * comma is only used if Elementor has no global value set.
 */
:root {
	--marafiki-primary:   var(--e-global-color-primary,   #2f6f4e);
	--marafiki-secondary: var(--e-global-color-secondary, #e8a33d);
	--marafiki-text:      var(--e-global-color-text,      #1f2a24);
	--marafiki-accent:    var(--e-global-color-accent,    #c4553a);
	--marafiki-surface:   #ffffff;
	--marafiki-muted:     #f4f1ea;
	--marafiki-border:    #ddd6c8;

	--marafiki-font-heading: var(--e-global-typography-primary-font-family, inherit);
	--marafiki-font-body:    var(--e-global-typography-text-font-family, inherit);

	--marafiki-radius: 10px;
	--marafiki-gap:    16px;
	--marafiki-tap:    44px; /* Minimum touch target for the mobile-first tracker. */
}

/* Shared base for member-platform screens rendered by marafiki-core. */
.marafiki-app {
	font-family: var(--marafiki-font-body);
	color: var(--marafiki-text);
	max-width: 960px;
	margin: 0 auto;
	padding: var(--marafiki-gap);
}

.marafiki-app h1,
.marafiki-app h2,
.marafiki-app h3 {
	font-family: var(--marafiki-font-heading);
}

.marafiki-app button,
.marafiki-app .marafiki-button,
.marafiki-app input,
.marafiki-app select {
	min-height: var(--marafiki-tap);
}

.marafiki-app .marafiki-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 20px;
	border: 0;
	border-radius: var(--marafiki-radius);
	background: var(--marafiki-primary);
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}

.marafiki-app .marafiki-card {
	background: var(--marafiki-surface);
	border: 1px solid var(--marafiki-border);
	border-radius: var(--marafiki-radius);
	padding: var(--marafiki-gap);
}