/* ============================================================
   Magni · Sacred Czech — design tokens
   Mirrors hi/tokens.jsx from the Claude Design export. Keep in
   sync if the design changes. All values are CSS custom props
   so any Elementor widget / Custom CSS can pick them up.
   ============================================================ */

:root {
	/* ---- Palette (oklch-based, matches brand manual) ---- */
	--magni-ink:         oklch(0.18 0.01 60);
	--magni-ink-soft:    oklch(0.40 0.01 60);
	--magni-ink-faint:   oklch(0.62 0.01 60);
	--magni-rule:        oklch(0.88 0.008 60);
	--magni-paper:       oklch(0.985 0.006 75);
	--magni-cream:       oklch(0.72 0.055 75);
	--magni-cream-light: oklch(0.92 0.025 78);
	--magni-cream-deep:  oklch(0.58 0.06 72);
	--magni-black:       oklch(0.14 0.006 60);
	--magni-black-soft:  oklch(0.22 0.006 60);

	/* ---- Bronze pennant accent ---- */
	--magni-accent-hue:    52;
	--magni-accent-chroma: 0.13;
	--magni-accent:        oklch(0.55 0.13 52);
	--magni-accent-deep:   oklch(0.42 0.13 50);
	--magni-accent-light:  oklch(0.66 0.11 54);
	--magni-accent-soft:   oklch(0.55 0.13 52 / 0.08);

	/* ---- Lime/green diagonal flag (NEW / TIP) ---- */
	--magni-flag: oklch(0.74 0.17 120);

	/* ---- Typography ---- */
	--magni-font-display: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
	--magni-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

	/* ---- Spacing scale ---- */
	--magni-gap-1: 8px;
	--magni-gap-2: 16px;
	--magni-gap-3: 24px;
	--magni-gap-4: 32px;
	--magni-gap-5: 48px;
	--magni-gap-6: 80px;
	--magni-gap-7: 120px;

	/* ---- Layout ---- */
	--magni-content-max:  1100px;
	--magni-canvas-max:   1280px;
	--magni-page-pad:     48px;

	/* ---- Borders & shadows ---- */
	--magni-shadow-soft:    0 2px 12px rgba(15, 12, 8, 0.06);
	--magni-shadow-strong:  0 20px 80px rgba(0, 0, 0, 0.6);
}

/* Fallback palette for browsers without oklch support
   (Safari < 15.4, Firefox < 113). Approximate sRGB values. */
@supports not (color: oklch(0.5 0.1 60)) {
	:root {
		--magni-ink:         #1f1c17;
		--magni-ink-soft:    #5b554c;
		--magni-ink-faint:   #8e887d;
		--magni-rule:        #dad7d1;
		--magni-paper:       #faf9f5;
		--magni-cream:       #cdb98f;
		--magni-cream-light: #ebe4d2;
		--magni-cream-deep:  #9c8662;
		--magni-black:       #161310;
		--magni-black-soft:  #2a2620;
		--magni-accent:      #a06a2a;
		--magni-accent-deep: #7d4f1e;
		--magni-accent-light:#bd8c4f;
		--magni-accent-soft: rgba(160, 106, 42, 0.08);
		--magni-flag:        #8eb83d;
	}
}