/**
 * nastf-2026 — theme tokens + light/dark support.
 *
 * Strategy: declare our OWN tokens, then feed WordPress's generated preset
 * variables from them. Every block that references a palette slug — core blocks
 * and the nastf-* blocks alike — then follows the active theme with no per-block
 * work, because it is already reading --wp--preset--color--*.
 *
 * Values mirror Material UI's light and dark palettes, which is what
 * www.nastf.org (Lyle's React app) renders with, so the logged-in WordPress side
 * reads as the same product as the logged-out marketing side.
 *
 * Note MUI does NOT simply invert for dark mode: the primary blue lightens to
 * #90caf9 and text ON that blue goes dark, because a saturated mid-blue fails
 * contrast against a dark ground. That is why --nastf-on-primary is a token
 * rather than a hardcoded white.
 */

:root {
	--nastf-bg: #f9f9f9;           /* page ground */
	--nastf-surface: #ffffff;      /* cards, header, panels */
	--nastf-text: rgba(0, 0, 0, 0.87);
	--nastf-text-2: rgba(0, 0, 0, 0.6);
	--nastf-border: rgba(0, 0, 0, 0.12);
	--nastf-primary: #1976d2;
	--nastf-primary-hover: #1565c0;
	--nastf-primary-light: #90caf9;
	--nastf-on-primary: #ffffff;
	--nastf-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);
	--nastf-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.14), 0 2px 4px rgba(0, 0, 0, 0.08);

	/* One radius for cards, panels and controls. 8px is what www.nastf.org uses
	   (MUI's default is 4px, so this is a deliberate choice on their side). The
	   blocks previously ranged 10/12/16px depending on which was written first. */
	--nastf-radius: 8px;

	color-scheme: light;
}

:root[data-nastf-theme="dark"] {
	--nastf-bg: #121212;
	--nastf-surface: #1e1e1e;
	--nastf-text: rgba(255, 255, 255, 0.92);
	--nastf-text-2: rgba(255, 255, 255, 0.7);
	--nastf-border: rgba(255, 255, 255, 0.12);
	--nastf-primary: #90caf9;
	--nastf-primary-hover: #b3dcfb;
	--nastf-primary-light: #64b5f6;
	--nastf-on-primary: rgba(0, 0, 0, 0.87);
	/* Shadows read as almost nothing on a dark ground, so dark mode leans on the
	   surface/background contrast for separation and keeps the shadow subtle. */
	--nastf-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), 0 1px 2px rgba(0, 0, 0, 0.4);
	--nastf-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.7), 0 2px 4px rgba(0, 0, 0, 0.5);
	color-scheme: dark;
}

/* Follow the OS when the visitor has expressed no preference of their own. */
@media (prefers-color-scheme: dark) {
	:root:not([data-nastf-theme="light"]) {
		--nastf-bg: #121212;
		--nastf-surface: #1e1e1e;
		--nastf-text: rgba(255, 255, 255, 0.92);
		--nastf-text-2: rgba(255, 255, 255, 0.7);
		--nastf-border: rgba(255, 255, 255, 0.12);
		--nastf-primary: #90caf9;
		--nastf-primary-hover: #b3dcfb;
		--nastf-primary-light: #64b5f6;
		--nastf-on-primary: rgba(0, 0, 0, 0.87);
		--nastf-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), 0 1px 2px rgba(0, 0, 0, 0.4);
		--nastf-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.7), 0 2px 4px rgba(0, 0, 0, 0.5);
		color-scheme: dark;
	}
}

/* Hand our tokens to WordPress's preset variables. This is the line that makes
   every palette-slug-using block theme-aware for free. */
:root,
:root[data-nastf-theme] {
	--wp--preset--color--fg: var(--nastf-text);
	--wp--preset--color--muted: var(--nastf-text-2);
	--wp--preset--color--border: var(--nastf-border);
	--wp--preset--color--base: var(--nastf-surface);
	--wp--preset--color--surface: var(--nastf-bg);
	--wp--preset--color--nastf-accent: var(--nastf-primary);
	--wp--preset--color--nastf-accent-dark: var(--nastf-primary-hover);
	--wp--preset--color--nastf-accent-light: var(--nastf-primary-light);
}

body {
	background-color: var(--nastf-bg);
	color: var(--nastf-text);
}

/*
 * Template parts commit some colors as literal hex in their block markup
 * (header background, border), which cannot follow a variable. Re-point those
 * few here rather than rewriting the markup, so the parts stay editable in the
 * Site Editor without re-breaking dark mode.
 */
/*
 * NOTE the descendant combinator. core/template-part renders NESTED elements:
 * an outer <header class="wp-block-template-part"> (transparent) wrapping the
 * part's own <header class="wp-block-group has-background"> which carries the
 * literal background-color:#ffffff inline. An earlier version of this rule used
 * `.wp-site-blocks > header.wp-block-group`, which matched neither — the outer
 * header is not a .wp-block-group, and the inner one is not a direct child of
 * .wp-site-blocks. The header and footer therefore stayed white in dark mode.
 *
 * !important is required to beat the inline style the block editor emits.
 */
.wp-site-blocks header.wp-block-group.has-background,
.wp-site-blocks footer.wp-block-group.has-background {
	background-color: var(--nastf-surface) !important;
	border-color: var(--nastf-border) !important;
	color: var(--nastf-text);
}

/* Contained buttons: text must contrast the blue, which differs per theme. */
.wp-block-button__link:not(.is-style-outline),
.wp-element-button:not(.is-style-outline) {
	color: var(--nastf-on-primary);
}

/* ---------------------------------------------------------------------------
 * wpDataTables.
 *
 * The plugin hardcodes light cell backgrounds (#ffffff, #f5f5f5 for striping)
 * and sets NO text colour, so the text inherits from the page. In dark mode that
 * means white text on white cells: the odd rows showed a faint ghost and the
 * even rows disappeared completely, which read as a half-empty table rather than
 * a styling bug.
 *
 * Painted from the tokens UNCONDITIONALLY rather than behind a dark-mode
 * selector. In light mode the tokens already equal the plugin's own colours, so
 * nothing changes; in dark mode it follows on its own, including via
 * prefers-color-scheme where no attribute is stamped. It also means this works
 * on both wpDataTables versions in play — production is on 7.5.2.3, local is on
 * 8.0.2 from the upgrade rehearsal — instead of depending on 8.0.2's own
 * light/dark stylesheets.
 *
 * !important is required: the plugin's own rules are more specific.
 * ------------------------------------------------------------------------- */
table.wpDataTable,
.wpDataTables table.wpDataTable {
	background-color: var(--nastf-surface);
	color: var(--nastf-text);
}

table.wpDataTable tbody td,
table.wpDataTable tbody th {
	background-color: var(--nastf-surface) !important;
	color: var(--nastf-text) !important;
	border-color: var(--nastf-border) !important;
}

/* Zebra striping, rebuilt from the tokens so it survives the theme flip. */
table.wpDataTable tbody tr.odd td,
table.wpDataTable tbody tr:nth-child(odd) td {
	background-color: color-mix(in srgb, var(--nastf-text) 4%, var(--nastf-surface)) !important;
}

table.wpDataTable tbody tr:hover td {
	background-color: color-mix(in srgb, var(--nastf-primary) 10%, var(--nastf-surface)) !important;
}

table.wpDataTable thead th,
table.wpDataTable tfoot th,
table.wpDataTable tfoot td {
	background-color: var(--nastf-bg) !important;
	color: var(--nastf-text) !important;
	border-color: var(--nastf-border) !important;
}

/* Digits line up in columns instead of drifting. */
table.wpDataTable td,
table.wpDataTable th {
	font-variant-numeric: tabular-nums;
}

/* The surrounding chrome the plugin renders: length/search controls, paging,
   export buttons and the filter inputs in the footer row. */
.wpDataTables .dataTables_wrapper,
.wpDataTables .dataTables_info,
.wpDataTables .dataTables_length,
.wpDataTables .dataTables_filter,
.wpDataTables .dataTables_paginate,
.wpDataTables .dataTables_paginate a,
.wpDataTables .dataTables_paginate span {
	color: var(--nastf-text);
}

.wpDataTables input[type="text"],
.wpDataTables input[type="search"],
.wpDataTables select,
table.wpDataTable tfoot input {
	background-color: var(--nastf-surface);
	color: var(--nastf-text);
	border-color: var(--nastf-border);
}

/* ---------------------------------------------------------------------------
 * The toggle itself.
 * ------------------------------------------------------------------------- */
.nastf-theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--nastf-text-2);
	cursor: pointer;
	line-height: 0;
	transition: background-color 120ms ease, color 120ms ease;
}

.nastf-theme-toggle:hover {
	background-color: color-mix(in srgb, currentColor 12%, transparent);
	color: var(--nastf-text);
}

.nastf-theme-toggle:focus-visible {
	outline: 2px solid var(--nastf-primary);
	outline-offset: 2px;
}

.nastf-theme-toggle svg {
	width: 22px;
	height: 22px;
	fill: currentColor;
}

/* Show the icon for the theme you would switch TO, which is the convention
   MUI's own toggle follows. */
.nastf-theme-toggle .nastf-theme-toggle__moon { display: none; }
.nastf-theme-toggle .nastf-theme-toggle__sun { display: block; }

:root[data-nastf-theme="dark"] .nastf-theme-toggle .nastf-theme-toggle__moon { display: block; }
:root[data-nastf-theme="dark"] .nastf-theme-toggle .nastf-theme-toggle__sun { display: none; }

@media (prefers-color-scheme: dark) {
	:root:not([data-nastf-theme="light"]) .nastf-theme-toggle .nastf-theme-toggle__moon { display: block; }
	:root:not([data-nastf-theme="light"]) .nastf-theme-toggle .nastf-theme-toggle__sun { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.nastf-theme-toggle { transition: none; }
}