/* ============================================================
   BinaWeb Theme — MINIMAL NEO-BRUTALIST DESIGN SYSTEM
   Style: Purple × White × Yellow
   - Thin-but-solid ink borders, tighter hard offset shadows (no blur)
   - Purple + white base, yellow as the single accent
   - Space Grotesk headings / Inter body / tabular numerals
   - All landing components are scoped under `.ord-page`
   - Breakpoints: 1024px & 640px  |  prefers-reduced-motion
   ============================================================ */

/* ------------------------------------------------------------
   1. GLOBAL DESIGN TOKENS — drives the whole site
   ------------------------------------------------------------ */
:root {
	--ord-ink: #241046;         /* deep purple ink: text, borders, dark surfaces */
	--ord-ink-soft: #5b4a78;
	--ord-paper: #ffffff;
	--ord-mist: #f8f5ff;
	--ord-violet: #6d28d9;      /* purple (primary) */
	--ord-violet-deep: #4c1d95; /* deepest purple */
	--ord-mint: #ffd21e;        /* yellow (accent) */
	--ord-mint-deep: #6d28d9;   /* purple — reads on light surfaces */
	--ord-amber: #ffd21e;
	--ord-coral: #ff5d5d;       /* semantic danger only */
	--ord-sky: #8b5cf6;
	--ord-lime: #ffe066;
	--ord-border: #241046;

	--ord-font-heading: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
	--ord-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;

	--ord-shadow-sm: 4px 4px 0 0 #241046;
	--ord-shadow-md: 6px 6px 0 0 #241046;
	--ord-shadow-lg: 9px 9px 0 0 #241046;

	--ord-radius: 16px;
	--ord-pill: 999px;

	/* Short aliases (same values) so components OUTSIDE `.ord-page`
	   (header, drawer, footer buttons) can also resolve var(--ink) etc. */
	--ink: #241046;
	--paper: #ffffff;
	--mist: #f8f5ff;
	--violet: #6d28d9;
	--violet-deep: #4c1d95;
	--mint: #ffd21e;
	--mint-deep: #6d28d9;
	--amber: #ffd21e;
	--coral: #ff5d5d;
	--sky: #8b5cf6;
	--lime: #ffe066;
}

/* Whole-site recolor to the purple + white + yellow system.
   Yellow is the only fill accent, purple is the ink; red is reserved for
   genuine danger/problem markers. */
body {
	background-color: #241046;
	color: #f6f2ff;
	font-family: var(--ord-font-body);
}

/* Whole-site headings → Space Grotesk. `!important` guarantees every
   template (main.css `.section-title` etc.) uses the v4 heading font. */
body h1, body h2, body h3, body h4, body h5, body h6 {
	font-family: var(--ord-font-heading) !important;
}

/* Recolor the legacy accent so every template picks up the new yellow. */
.text-accent {
	color: var(--ord-mint);
}

/* Sticky (not fixed) header in v4 — no manual top padding needed. */
body .site-main {
	padding-top: 0;
}

.page-title-hidden .content-area::before,
.page-title-hidden .section:first-of-type::before {
	top: 12px;
	background: linear-gradient(90deg, var(--ord-mint), var(--ord-violet));
	box-shadow: 0 0 18px rgba(255, 210, 30, 0.35);
}

/* Selection + scrollbar in the new palette. */
::selection {
	background-color: var(--ord-mint);
	color: var(--ord-ink);
}