/*!
Theme Name: Purple Moon Systems
Theme URI: https://www.purplemoondesigns.co.uk/
Author: Purple Moon Designs
Author URI: https://www.purplemoondesigns.co.uk
Description: A reusable base theme for Purple Moon Designs application projects — internal operations tools and client login/member portals. Ships the pmd framework (CPT + AJAX + Modal), role-based access, branded email, Cloudflare R2 media offload, Twilio 2FA login, PWA scaffold and an audit log. Brand everything per project from a single style-guide.php. Built on a WordPress + ACF Pro + Tailwind stack.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: purplemoonsystems

This theme is intended as a starting point. Per project: fill in the brand tokens
in the :root block below (or override them in pages/style-guide.php), then build
features with pmd_cpt() + pmd_ajax() + pmd_modal_*().
*/

/* =============================================================================
 * DESIGN TOKENS — single source of truth for the whole UI.
 *
 * Every component (including the pmd-modal system) reads these variables with a
 * fallback. Re-skin an entire project by editing ONLY this block, or by setting
 * the same variables inside pages/style-guide.php for that project.
 *
 * Defaults below match the Workboard style guide (slate + emerald, DM Sans).
 * Swap --ac / --ach / --acbg for the client's brand colour and you're themed.
 * ============================================================================= */
:root {
	/* Surfaces */
	--bg:   #ffffff;   /* card / page surface (white) */
	--s1:   #f8fafc;   /* slate-50  — subtle surface */
	--s2:   #f1f5f9;   /* slate-100 — secondary surface */
	--s3:   #e2e8f0;   /* slate-200 — app chrome / sidebar rail */

	/* Text */
	--t:    #020617;   /* slate-950 — primary text / headings */
	--tm:   #475569;   /* slate-600 — body text */
	--td:   #94a3b8;   /* slate-400 — muted / icon text */

	/* Borders */
	--bd:   #e2e8f0;   /* slate-200 — hairlines, input borders */

	/* Brand accent — Workboard emerald */
	--ac:   #047857;                     /* emerald-700 — primary accent */
	--ach:  #065f46;                     /* emerald-800 — accent hover */
	--acbg: rgba(4, 120, 87, .10);       /* accent @ 10% — focus fill / tints */
	--ac2:  #10b981;                     /* emerald-500 — gradient end / secondary */

	/* Status */
	--gn:   #047857;   /* emerald-700 — success / complete */
	--am:   #b45309;   /* amber-700   — review / warning */
	--rd:   #e11d48;   /* rose-600    — danger / validation */
	--bl:   #1d4ed8;   /* blue-700    — in progress / info */

	/* Radius scale */
	--r:    10px;      /* rounded-lg  — inputs, buttons, toasts */
	--rm:   12px;      /* rounded-xl  — cards, modals */
	--rs:   8px;       /* rounded-lg  — small chips, badges */

	/* Elevation */
	--shadow-soft: 0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
	--shadow-md:   0 4px 24px -6px rgba(15,23,42,.12);
	--shadow-xl:   0 12px 40px -8px rgba(2,6,23,.18);

	/* Type */
	--font-heading: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--font-body:    'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* =============================================================================
 * MINIMAL RESET / BASE
 * Tailwind (loaded per-page or via build) handles utilities. This file owns
 * brand tokens + the app shell structure so it survives Tailwind JIT purging.
 * ============================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font-body); color: var(--t); background: var(--s1); }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ac); text-decoration: none; }
a:hover { color: var(--ach); }

.content_wrap { max-width: 1400px; width: 90%; margin: 0 auto; }
.screen-reader-text { position: absolute !important; clip: rect(1px,1px,1px,1px); width: 1px; height: 1px; overflow: hidden; }

/* =============================================================================
 * APP SHELL — sidebar + main, both fully token-driven.
 * Class prefix: pms-  (rename freely; keep prefixes consistent per project)
 * ============================================================================= */
.pms-app { display: flex; min-height: 100vh; background: var(--s1); }

.pms-sidebar {
	/* Visuals are Tailwind-driven in template-parts/sidebar.php.
	   These rules keep layout sticky + scroll behaviour. */
	position: sticky;
	top: 0;
	height: 100vh;
	overflow-y: auto;
}

.pms-main { flex: 1 1 auto; min-width: 0; padding: 0; }

/* Generic card surface */
.pms-card { background: var(--bg); border: 1px solid var(--bd); border-radius: var(--rm); box-shadow: var(--shadow-soft); padding: 24px; }

/* Buttons (also documented in style-guide.php) */
.pms-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: var(--r); font-family: var(--font-body); font-weight: 600; font-size: 14px; cursor: pointer; border: 1px solid transparent; transition: background .15s ease, border-color .15s ease, color .15s ease; }
.pms-btn--primary { background: var(--ac); color: #fff; }
.pms-btn--primary:hover { background: var(--ach); color: #fff; }
.pms-btn--secondary { background: var(--bg); color: var(--t); border-color: var(--bd); }
.pms-btn--secondary:hover { background: var(--s2); }
.pms-btn--ghost { background: transparent; color: var(--tm); }
.pms-btn--ghost:hover { background: var(--s2); color: var(--t); }
.pms-btn--destructive { background: var(--rd); color: #fff; }
.pms-btn--destructive:hover { filter: brightness(.92); }

/* Badges / status pills */
.pms-pill { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.4; }
.pms-pill--green { background: rgba(21,128,61,.10); color: var(--gn); }
.pms-pill--amber { background: rgba(180,83,9,.10);  color: var(--am); }
.pms-pill--red   { background: rgba(185,28,28,.10); color: var(--rd); }
.pms-pill--blue  { background: rgba(29,78,216,.10); color: var(--bl); }
.pms-pill--gray  { background: var(--s2); color: var(--tm); }

/* Action-menu portal target (see CLAUDE.md — dropdowns are portalled to body) */
.pms-dropdown { position: fixed; z-index: 9999; min-width: 176px; background: var(--bg); border: 1px solid var(--bd); border-radius: var(--r); box-shadow: var(--shadow-md); padding: 6px; }

/* Narrow screens: column shell; sidebar is Tailwind-hidden below lg */
@media (max-width: 1023px) {
	.pms-app { flex-direction: column; }
}