/* ════════════════════════════════════════════════════════════════
   COLORS — Brand palette, semantic naming
   ────────────────────────────────────────────────────────────────
   File:   .obsidian/plugins/slides-extended/css/colors.css
   Load order: must load BEFORE base.css and any other CSS file
   that references --accent, --color-*, or --accent-*.

   Add new colors here as the project grows. Naming convention:
   --color-<name>, lowercase, no abbreviations.
   ════════════════════════════════════════════════════════════════ */

:root {
	/* -- Core palette ------------------------------------------------ */
	--color-white:    #ffffff;
	--color-cream:    #f0ead6; /* placeholder — confirm exact hex */
	--color-black:    #000000;
	--color-charcoal: #333333;
	--color-petrol:   #0d2b33; /* placeholder — confirm exact hex */
	--color-orange:   #f7953a;
	--color-slate:    #8a8a8a; /* placeholder — confirm exact hex */
	--color-sky:      #cfe8f3; /* pastel light blue, placeholder — confirm exact hex */
	--color-navy:     #39434a; /* dark blue-gray, same hue family as sky — placeholder, confirm exact hex */
	--color-purple:   #5b2d8e; /* dark purple for hyperlink hover — adjust hex to taste */

	/* -- Accent aliases ------------------------------------------------
	 * Kept for backward compatibility with base.css / typography.css,
	 * which reference --accent, --accent-dim, --accent-faint directly.
	 */
	--accent:       var(--color-orange);
	--accent-dim:   rgba(247, 149, 58, 0.50);
	--accent-faint: rgba(247, 149, 58, 0.10);
}

/* -- Dark text variant -----------------------------------------------
 * For light/bright backgrounds (e.g. orange) where white text doesn't
 * read. Overrides the relevant color tokens locally — every component
 * that reads --sidebar-color / --mag-headline-color / --mag-h2-color /
 * --mag-h3-color switches automatically, no per-rule changes needed.
 * Usage: add alongside existing classes on the text container, e.g.
 *   <div class="col-35 body-text dark-text" style="--sidebar-bg: ...;">
 */
.dark-text {
	--sidebar-color:      black;
	--mag-headline-color: var(--color-navy);
	--mag-h2-color:       var(--color-navy);
	--mag-h3-color:       var(--color-navy);
}