/*
 * BRAND TOKENS — the rebrand file.
 * The Zoonum design system has two palettes:
 *   1. SHELL  (--zns-*): the dark header, footer and gate screens.
 *   2. CONTENT (--zn-*): the light page sections (hero, products, forms).
 * Change these values (or use Appearance → Customize → Brand) and the whole
 * theme rebrands. Nothing else needs touching.
 */
:root {
	/* ── CONTENT palette (light sections) ─────────────────── */
	--zn-primary:      #1565C0;
	--zn-primary-rgb:  21, 101, 192; /* keep in sync with --zn-primary */
	--zn-primary-light:#42A5F5;
	--zn-primary-dark: #0D47A1;
	--zn-primary-bg:   rgba(var(--zn-primary-rgb), 0.08);
	--zn-primary-bdr:  rgba(var(--zn-primary-rgb), 0.18);
	--zn-dark:         #111827;
	--zn-dark-card:    #1e293b;
	--zn-light:        #ffffff;
	--zn-light-alt:    #f1f5f9;
	--zn-light-card:   #f8fafc;
	--zn-text:         #1e293b;
	--zn-text-muted:   #64748b;
	--zn-text-light:   #94a3b8;
	--zn-border:       #e2e8f0;
	--zn-border-dark:  rgba(255, 255, 255, 0.1);

	/* ── SHELL palette (dark header / footer / gate) ──────── */
	--zns-bg:          #090c11;
	--zns-bg-alt:      #0d1117;
	--zns-card:        #111620;
	--zns-border:      rgba(58, 150, 255, 0.12);
	--zns-border-mid:  rgba(58, 150, 255, 0.22);
	--zns-brand:       #3A96FF;
	--zns-brand-rgb:   58, 150, 255; /* keep in sync with --zns-brand */
	--zns-brand-dim:   rgba(var(--zns-brand-rgb), 0.12);
	--zns-brand-glow:  rgba(var(--zns-brand-rgb), 0.3);
	--zns-text:        #dde4f0;
	--zns-muted:       #6a7a90;
	--zns-faint:       #3a4556;

	/* ── Typography ───────────────────────────────────────── */
	--zn-font-heading: 'Montserrat', sans-serif;
	--zn-font-body:    'DM Sans', sans-serif;
	--zn-font-mono:    'IBM Plex Mono', monospace;
	--zns-font-head:   var(--zn-font-heading);
	--zns-font-body:   var(--zn-font-body);
	--zns-font-mono:   var(--zn-font-mono);

	/* ── Shape ────────────────────────────────────────────── */
	--zn-radius:       10px;
	--zn-radius-small: 6px;
	--zns-radius:      var(--zn-radius);
	--zn-shadow:       0 2px 12px rgba(0, 0, 0, 0.06);
	--zn-shadow-hover: 0 6px 24px rgba(0, 0, 0, 0.1);
	--zn-container:    1200px;
	--zn-gap:          24px;

	/* ── Legacy aliases (v1 theme parts: blog, comments, 404) ── */
	--zn-color-primary:      var(--zn-primary);
	--zn-color-primary-dark: var(--zn-primary-dark);
	--zn-color-accent:       var(--zn-primary-light);
	--zn-color-text:         var(--zn-text);
	--zn-color-muted:        var(--zn-text-muted);
	--zn-color-bg:           var(--zn-light);
	--zn-color-surface:      var(--zn-light-alt);
	--zn-color-border:       var(--zn-border);
	--zn-color-error:        #c0392b;
	--zn-color-success:      #1f8a4c;
	--zn-button-bg:          var(--zn-primary);
	--zn-button-text:        #ffffff;
	--zn-button-bg-hover:    var(--zn-primary-dark);
	--zn-header-bg:          var(--zns-bg);
	--zn-header-text:        var(--zns-text);
	--zn-footer-bg:          var(--zns-bg);
	--zn-footer-text:        var(--zns-muted);
}