/*
 * Design tokens — the color/spacing values used across every Cyber Ammo
 * snippet (a3655c67, c8a2b1f4, etc.) are all the same palette. Centralized
 * here so a rebrand or theme tweak is a one-file change instead of a
 * find-and-replace across a dozen CSS blocks.
 */
:root {
	--dma-bg: #0a0a0c;
	--dma-surface: #111114;
	--dma-surface-hover: #1a1a1e;
	--dma-border: #222228;
	--dma-border-hover: #333339;
	--dma-text: #e0e0e4;
	--dma-text-muted: #7a7a84;
	--dma-accent: #EF524E;
	--dma-accent-hover: #d94440;
	--dma-accent-dim: rgba(239, 82, 78, 0.12);
	--dma-accent-glow: rgba(239, 82, 78, 0.25);
	--dma-white: #ffffff;
	--dma-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--dma-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
	--dma-header-height: 64px;

	/* Heading/high-contrast foreground — kept separate from --dma-white
	   (which is reserved for text/icons sitting ON the accent-red color,
	   staying literal white in both themes) so headings, nav links, card
	   titles etc. can flip to a dark ink color in light mode just by
	   overriding this one variable. */
	--dma-heading: #ffffff;
	/* Sticky header's translucent backdrop-blur background. */
	--dma-header-bg: rgba(10, 10, 12, 0.92);
	/* Subtle hover wash over a surface (dropdown items, sidebar nav links). */
	--dma-hover-tint: rgba(255, 255, 255, 0.05);
	/* Low-contrast divider lines (table rows, dashed section rules) that
	   need to invert direction between themes — white-based in dark mode,
	   black-based in light mode, or they disappear on a light background. */
	--dma-hairline: rgba(255, 255, 255, 0.08);
	/* Neutral tile behind transparent-background product photos. */
	--dma-image-bg: #0d0d0f;
}

/* ========================================
   LIGHT MODE
   Toggled via a `data-theme="light"` attribute on <html> (see
   assets/js/theme-toggle.js and the toggle button in header.php). Dark
   mode is the default/unchanged look — nothing above this block changes.
   Lighter, not white: the page background is a soft neutral gray so
   surfaces (cards, panels) can sit on it a shade lighter, mirroring how
   dark mode's cards are a shade lighter than its near-black background.
   ======================================== */
:root[data-theme="light"] {
	--dma-bg: #eef0f3;
	--dma-surface: #ffffff;
	--dma-surface-hover: #f6f7f9;
	--dma-border: #e1e4e9;
	--dma-border-hover: #cbd0d8;
	--dma-text: #3b3f4a;
	--dma-text-muted: #6b7180;
	/* Brand red darkened slightly from the dark-mode accent — #EF524E as
	   plain text on a light background falls short of WCAG AA (~3:1); this
	   shade clears it (~4.6:1 on white) while still reading as the same
	   brand color. */
	--dma-accent: #d6403c;
	--dma-accent-hover: #c13530;
	--dma-accent-dim: rgba(214, 64, 60, 0.10);
	--dma-accent-glow: rgba(214, 64, 60, 0.22);
	--dma-heading: #14161c;
	--dma-header-bg: rgba(255, 255, 255, 0.85);
	--dma-hover-tint: rgba(0, 0, 0, 0.04);
	--dma-hairline: rgba(0, 0, 0, 0.08);
	--dma-image-bg: #eef0f3;
}