/* Уншигч Унага -- Design Tokens
   Shared across assets/css/frontend.css, page-templates.css, admin.css.
   Palette continues Beez Mongolia's brand (Beez Black / Beez Fuchsia), the
   same tokens used on travelsim.beez.mn, applied here in a warmer, rounder,
   more playful register appropriate for a children's product. */

:root {
	/* Brand */
	--unaga-black: #0A0A0A;
	--unaga-fuchsia: #E8195A;
	--unaga-fuchsia-dark: #C01049;
	--unaga-fuchsia-tint: #FCE4EC;

	/* Supporting palette -- warm, kid-friendly, distinct per function */
	--unaga-cream: #F5F4F0;       /* card / section backgrounds, primary hero bg (was black) */
	--unaga-cream-deep: #EDE9E1; /* alternating section tint */
	--unaga-white: #FFFFFF;
	--unaga-navy: #1A2236;        /* mascot mane/eyes -- friendlier dark than pure black */
	--unaga-peach: #FBC7B0;       /* mascot blush -- warm accent for playful highlights */
	--unaga-gold: #F4B400;        /* XP / streak / star accents */
	--unaga-green: #1FA858;       /* success / completed */
	--unaga-blue: #2E7DD1;        /* info / in-progress */
	--unaga-grey-900: #1A1A1A;
	--unaga-grey-600: #5B5B5B;
	--unaga-grey-300: #D8D6D0;
	--unaga-grey-100: #EFEEE9;

	/* Typography */
	--unaga-font-display: 'Baloo 2', 'DM Sans', -apple-system, sans-serif; /* rounded, playful -- headings only */
	--unaga-font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;

	--unaga-text-xs: 12px;
	--unaga-text-sm: 14px;
	--unaga-text-base: 16px;
	--unaga-text-lg: 19px;
	--unaga-text-xl: 24px;
	--unaga-text-2xl: 32px;
	--unaga-text-3xl: 44px;

	/* Spacing scale (4px base) */
	--unaga-space-1: 4px;
	--unaga-space-2: 8px;
	--unaga-space-3: 12px;
	--unaga-space-4: 16px;
	--unaga-space-6: 24px;
	--unaga-space-8: 32px;
	--unaga-space-12: 48px;
	--unaga-space-16: 64px;

	/* Shape + elevation */
	--unaga-radius-sm: 10px;
	--unaga-radius-md: 16px;
	--unaga-radius-lg: 24px;
	--unaga-radius-pill: 999px;
	--unaga-shadow-card: 0 2px 10px rgba(10, 10, 10, 0.06);
	--unaga-shadow-card-hover: 0 8px 24px rgba(10, 10, 10, 0.12);

	--unaga-max-width: 1120px;
}