/*
 * Brand design tokens — Job Adverts Uganda. Implements SPEC.md §2.4.
 *
 * No component CSS in this file — only custom properties. Component
 * stylesheets (style.css) consume these, never raw hex values.
 */

:root {
	/* --- Brand colours ---------------------------------------------- */

	/* Blocksy's own brand-accent variable (default #2872fa, a blue)
	   drives its native focus-visible outlines, link hovers, etc. via
	   selectors like `a:focus-visible` that are MORE SPECIFIC than a
	   bare `:focus-visible` rule, so we can't just out-specificity it
	   per element — found live when a Tab-focused link kept showing a
	   blue outline despite our own :focus-visible rule below. Aligning
	   Blocksy's own variable is the correct fix: every native-styled
	   element it touches (not just focus rings) now uses our purple
	   instead of us re-implementing Blocksy's own focus handling. */
	--theme-palette-color-1: #7420AC;

	/* Primary buttons, active nav, links.
	   Contrast vs white / vs --jau-lavender: 8.25:1 / 7.20:1 — passes AA (and AAA) at any text size. */
	--jau-purple: #7420AC;

	/* Hover, focus ring, headings.
	   Contrast vs white / vs --jau-lavender: 11.47:1 / 10.01:1 — passes AAA. */
	--jau-purple-deep: #571285;

	/* Quiet panels, card hover backgrounds. Not used for text. */
	--jau-lavender: #F3EDFB;

	/* Body text.
	   Contrast vs white: 15.52:1 — passes AAA. */
	--jau-ink: #1F2430;

	/* Meta text (dates, secondary labels).
	   Contrast vs white: 6.20:1 — passes AA for normal text (needs 4.5:1);
	   does not reach the 7:1 AAA threshold, which is fine — SPEC targets AA. */
	--jau-ink-soft: #5A6172;

	/* Page / card surfaces. */
	--jau-surface: #FFFFFF;

	/* Borders, dividers. Decorative only — never relied on alone to convey state. */
	--jau-line: #E4E2E9;

	/* Status colours — text-carries-meaning always accompanies these (SPEC §8);
	   colour is decoration, never the sole signal. All measured vs white. */
	--jau-success: #1E7B34; /* 5.33:1 — passes AA */
	--jau-warning: #8A5300; /* 6.33:1 — passes AA */
	--jau-danger: #B3261E;  /* 6.54:1 — passes AA */

	/* --- Typography --------------------------------------------------- */

	--jau-font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	/* --- Spacing (4px base scale) --------------------------------------------------- */

	--jau-space-1: 0.25rem;  /* 4px */
	--jau-space-2: 0.5rem;   /* 8px */
	--jau-space-3: 0.75rem;  /* 12px */
	--jau-space-4: 1rem;     /* 16px */
	--jau-space-5: 1.5rem;   /* 24px */
	--jau-space-6: 2rem;     /* 32px */
	--jau-space-7: 3rem;     /* 48px */
	--jau-space-8: 4rem;     /* 64px */

	/* --- Radius --------------------------------------------------- */

	--jau-radius-sm: 4px;
	--jau-radius-md: 8px;
	--jau-radius-lg: 16px;
	--jau-radius-full: 999px;

	/* --- Shadow (ink-tinted, not pure black) --------------------------------------------------- */

	--jau-shadow-sm: 0 1px 2px rgba(31, 36, 48, 0.06);
	--jau-shadow-md: 0 4px 12px rgba(31, 36, 48, 0.10);
	--jau-shadow-lg: 0 12px 32px rgba(31, 36, 48, 0.14);

	/* --- Hero background (SPEC §2.5) ---------------------------------------------------
	   CSS-only placeholder until a licensed photograph arrives: a gradient plus a
	   low-opacity search-glyph motif, drawn inline in the hero markup (Phase 5).
	   Swapping in a photograph later is one custom property (--jau-hero-image) plus a
	   <picture> element behind the gradient overlay — see docs/ASSETS.md. */
	--jau-hero-gradient: linear-gradient(135deg, var(--jau-purple-deep) 0%, var(--jau-purple) 100%);
	--jau-hero-image: none;
}