/*
 * Design tokens — the whole look of the site in one file.
 *
 * Everything else (style.css) only ever refers to these values, so changing
 * a colour, font, corner radius or spacing step here changes it everywhere.
 * Nothing below depends on WordPress, so it's safe to experiment.
 *
 * ---------------------------------------------------------------------------
 * Want to change...          Edit...
 * ---------------------------------------------------------------------------
 * the main brand colour      --color-primary (and --color-primary-dark for
 *                            hover, --color-primary-soft for tinted pills)
 * the page background        --color-bg, plus --color-surface for cards
 * the body font              --font-sans, and add the font files to
 *                            assets/fonts/ + assets/fonts/fonts.css
 * the handwritten accent     --font-hand (used by the .hand class)
 * heading / hero sizes       --text-* (they already scale with the screen)
 * rounder or squarer corners --radius-sm / --radius / --radius-lg
 * softer or sharper shadows  --shadow / --shadow-hover
 * page width and gutters     --container / --gutter
 * ---------------------------------------------------------------------------
 */

:root {
	/* --- Brand ---------------------------------------------------------- */
	--color-primary: #5840a0;
	--color-primary-dark: #452f86;
	--color-primary-soft: #ebe5f7;
	--color-accent: #e3a33a;

	/* --- Surfaces and text ---------------------------------------------- */
	--color-bg: #fbf9f5;
	--color-surface: #fff;
	--color-surface-warm: #f7f1e6;
	--color-lilac: #f1ecf8;
	--color-ink: #1f1b2e;
	--color-muted: #6c6879;
	--color-line: #ebe5dc;

	/* Example text inside empty boxes ("My first ceramic bowl"). Kept very
	   light so it isn't mistaken for something already typed. */
	--color-placeholder: #c9c4bd;

	/* Text drawn on top of --color-primary (buttons, active chips). */
	--color-on-primary: #fff;

	/* Sticky header: the page background, slightly see-through. */
	--color-header-bg: rgb(251 249 245 / 92%);

	/* How the profile map looks at rest; it goes full colour on hover/focus.
	   Option A (current): colours at half strength, slightly transparent.
	   Option B: grayscale(0.9) contrast(0.9) opacity(0.9) — nearly grey, so
	   the brand-purple country outline is the only colour.
	   "none" gives a plain colour map. */
	--map-idle-filter: saturate(0.45) opacity(0.75);

	/* Heart on creations you've saved to your favorites. */
	--color-heart: #d6336c;

	/* --- Feedback -------------------------------------------------------- */
	--color-success: #2f7d5b;
	--color-success-bg: #e3f3eb;
	--color-error: #b3261e;
	--color-error-bg: #fbe9e7;

	/* --- Profile map ----------------------------------------------------- */
	/* Size of the map on a profile. The height follows at 16:9, so this one
	   value scales both. */
	--profile-map-width: 252px;
	--map-water: var(--tint-sky);
	--map-land: var(--color-surface);
	--map-border: var(--color-line);
	--map-home: var(--color-primary-soft);
	--map-home-border: var(--color-primary);
	--map-pin: var(--color-primary);

	/* --- Avatar tints (cycled per user when they have no photo) ---------- */
	--tint-lilac: #e4dcf5;
	--tint-mustard: #f8e5bf;
	--tint-mint: #d6efe2;
	--tint-peach: #fbdcd0;
	--tint-sky: #d7e8f7;

	/* --- Type ------------------------------------------------------------ */
	--font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-hand: "Caveat", "Comic Sans MS", cursive;
	--text-sm: 0.875rem;
	--text-base: 1rem;
	--text-lg: 1.125rem;
	--text-xl: 1.375rem;
	--text-2xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
	--text-hero: clamp(2.5rem, 1.6rem + 3.8vw, 4.25rem);

	/* --- Spacing scale --------------------------------------------------- */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.5rem;
	--space-6: 2rem;
	--space-7: 3rem;
	--space-8: 4.5rem;

	/* --- Shape and depth -------------------------------------------------- */
	--radius-sm: 10px;
	--radius: 16px;
	--radius-lg: 24px;
	--radius-pill: 999px;
	--shadow: 0 1px 2px rgb(31 27 46 / 4%), 0 8px 24px rgb(31 27 46 / 6%);
	--shadow-hover: 0 2px 4px rgb(31 27 46 / 5%), 0 14px 32px rgb(31 27 46 / 10%);

	/* --- Layout ----------------------------------------------------------- */
	--container: 1200px;
	--gutter: clamp(1rem, 4vw, 2rem);

	/* Height of the sticky site header. */
	--header-height: 68px;

	/* How much of the screen below the header a creation's photo may take,
	   so it's fully visible before scrolling with room to spare.
	   Smaller = smaller photos (1 would fill it completely). */
	--media-screen-share: 0.85;

	/* Tallest a photo or player may be on a creation's page, worked out from
	   the visitor's screen on any device. Proportions are always kept: a tall
	   photo gets narrower. Never smaller than 240px (e.g. a phone held
	   sideways). Clicking a photo shows it full screen. */
	--media-max-height: max(240px, calc((100vh - var(--header-height) - var(--space-6)) * var(--media-screen-share)));
}

/* Phones' browser bars come and go; "svh" is the screen height with them
   showing, so the photo still fits when they are. */
@supports (height: 100svh) {
	:root {
		--media-max-height: max(240px, calc((100svh - var(--header-height) - var(--space-6)) * var(--media-screen-share)));
	}
}