/* ==========================================================================
   BRAT Diet Care - Planner dark mode legibility
   ==========================================================================

   planner.css is a compiled Tailwind bundle and is never hand-edited. It is
   built for light mode, and in dark mode every surface collapses onto the same
   two near-black values: the page is #0d1513 and the cards are stone-900,
   about #1c1917. A card stops reading as a card, the shadow that used to
   separate them is switched off in dark, and the tool reads as one black
   rectangle. That is the "too dark to read in dark mode" complaint.

   The correction is here rather than in the bundle because the palette is
   variables. Tailwind v4 emits every colour as a --color-* custom property, and
   both the pre-rendered PHP markup and the compiled React app reference those
   variables - dark:bg-stone-900 appears in the bundle and 30 times in the app.
   Re-pointing them lifts every occurrence at once: no rebuild, and no edit to
   either build.

   Every value below is a var(--brat-*) reference rather than a literal of its
   own. inc/style-vars.php prints those into the head of every page from the
   dashboard's own colour settings, so the planner cannot drift away from the
   blog: change the brand colours in Appearance -> BRAT Diet Care and the tool
   follows with no rebuild.
   --------------------------------------------------------------------------- */

html.dark {
	/* Cards. */
	--color-stone-950: var(--brat-bg);
	--color-stone-900: var(--brat-surface);

	/* Borders, a step above the card so its edge is actually visible. */
	--color-stone-800: var(--brat-border);
	--color-stone-700: var(--brat-border);

	/*
	 * Muted and secondary text. dark:text-stone-400 carries captions, helper
	 * lines and reading times, and stone-300 carries card body copy - both sit
	 * on the surfaces above, so they move with them. Headlines use stone-50 to
	 * stone-100 and are already at the top of the scale.
	 */
	--color-stone-500: var(--brat-text-muted);
	--color-stone-400: var(--brat-text-muted);
	--color-stone-300: var(--brat-text-soft);
	--color-stone-200: var(--brat-text);
	--color-stone-100: var(--brat-text);
	--color-stone-50: var(--brat-text);
}

/*
 * High-specificity text and typography contrast guarantees in dark mode.
 * Ensures all headings, labels, button text, and subtitles remain crisp
 * and fully legible against dark backgrounds.
 */
html.dark h1,
html.dark h2,
html.dark h3,
html.dark h4,
html.dark h5,
html.dark h6 {
	color: var(--brat-text, #ffffff) !important;
}

html.dark .text-stone-900,
html.dark .text-stone-800 {
	color: var(--brat-text, #f5f5f4) !important;
}

html.dark .dark\:text-stone-50,
html.dark .dark\:text-stone-100,
html.dark .dark\:text-stone-200 {
	color: var(--brat-text, #ffffff) !important;
}

html.dark .dark\:text-stone-300,
html.dark .dark\:text-stone-400,
html.dark .dark\:text-stone-500,
html.dark p.text-stone-600,
html.dark p.text-stone-500,
html.dark span.text-stone-500,
html.dark span.text-stone-400 {
	color: var(--brat-text-muted, #b8b3aa) !important;
}

/* Warning notice in dark mode */
html.dark .dark\:text-amber-200,
html.dark .dark\:text-amber-200\/90,
html.dark .dark\:text-amber-300,
html.dark .text-amber-900,
html.dark .text-amber-900\/90 {
	color: #fde68a !important;
}

/* Quick-nav progress text in dark mode */
html.dark .dark\:bg-stone-900\/90 p,
html.dark .dark\:bg-stone-900 p {
	color: var(--brat-text, #f5f5f4) !important;
}

/*
 * The one surface the bundle writes as a literal instead of a variable: the app
 * background, and the two translucent bars derived from it. Same lift, applied
 * through the escaped class names Tailwind generates for arbitrary values.
 *
 * planner-dark.css depends on planner.css, so this prints after it, and the
 * extra html.dark supplies the specificity needed to win - no !important.
 */
html.dark .dark\:bg-\[\#0d1513\] {
	background-color: var(--brat-bg);
}

html.dark .dark\:bg-\[\#0d1513\]\/85 {
	background-color: color-mix(in srgb, var(--brat-bg) 85%, transparent);
}

html.dark .dark\:bg-\[\#0d1513\]\/90 {
	background-color: color-mix(in srgb, var(--brat-bg) 90%, transparent);
}

/*
 * A hairline for the planner's own cards. The bundle drops the shadow in dark
 * mode because a shadow does not read against a dark page, which leaves nothing
 * separating a card from the background. This puts the edge back with a border
 * rather than a shadow, and only on the elements that are actually panels.
 */
html.dark .dark\:border,
html.dark .dark\:border-stone-200,
html.dark .dark\:border-stone-200\/80,
html.dark .dark\:border-stone-200\/90 {
	border-color: var(--brat-border);
}