/*
 * pm-v2-tokens — design tokens.
 *
 * Scoped to .pm-v2 so nothing leaks into the parent markup, the admin, or plugin
 * output rendered outside the theme shell.
 *
 * DESIGN DIRECTION (Swiss / directory-catalogue):
 *   A software LIBRARY, not a marketing site. Grid-based, high contrast, one
 *   accent colour, no decorative gradients, no glow, minimal shadow. Information
 *   density is a feature: a visitor must be able to scan versions, sizes and
 *   checksums quickly. Borders are hairline structure, never decoration.
 *
 * DARK MODE: this file defines the LIGHT values on `.pm-v2`. A matching block
 * further down redefines ONLY the colour-bearing tokens under
 * `@media (prefers-color-scheme: dark)`. Because every component reads tokens and
 * never literal colours, dark mode falls out of the cascade with no duplicated
 * component CSS. `color-scheme` is declared so form controls, scrollbars and the
 * canvas follow the same preference instead of staying stubbornly light.
 *
 * GeneratePress' own --contrast-* variables are intentionally NOT overridden.
 *
 * Breakpoints used across the theme:
 *   < 640px   mobile
 *   >= 640px  wide mobile / small tablet
 *   >= 768px  tablet
 *   >= 1024px desktop shell
 *   >= 1280px wide desktop
 */

body.pm-v2 {
	/* Colour scheme — lets UA form controls / scrollbars follow the preference. */
	color-scheme: light;

	/* ------------------------------------------------------------------ type --
	 * Seven steps. The two largest are fluid so a long Vietnamese title never
	 * overflows on a phone and never looks timid on a 1920px display.
	 */
	--fs-display: clamp(1.5rem, 1.15rem + 1.5vw, 2.125rem);
	--fs-h1: clamp(1.375rem, 1.15rem + 1vw, 1.75rem);
	--fs-h2: clamp(1.125rem, 1.02rem + 0.45vw, 1.375rem);
	--fs-h3: 1.0625rem;
	--fs-body: 1em;
	--fs-meta: 0.8125rem;
	/* Label scale for small-caps section/widget titles. Sits ABOVE `--fs-micro` on purpose:
	   a 12px uppercase label with 0.08em tracking is legible only at close range, so the
	   label role gets its own step at 13px and keeps the tracking tighter (0.06em) so it
	   stays optically balanced. `--fs-widget-title` is one step up again for widget heads. */
	--fs-label: 0.8125rem;
	--fs-widget-title: 0.875rem;
	--fs-micro: 0.75rem;

	--lh-tight: 1.2;
	--lh-snug: 1.35;
	--lh-body: 1.6;

	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;

	/* --------------------------------------------------------------- spacing --
	 * 4px base. 1-9 plus a fluid section rhythm.
	 */
	--sp-1: 4px;
	--sp-2: 8px;
	--sp-3: 12px;
	--sp-4: 16px;
	--sp-5: 24px;
	--sp-6: 32px;
	--sp-7: 48px;
	--sp-8: 64px;
	--sp-9: 96px;

	/* ----------------------------------------------------------------- shape --
	 * Small radii. A catalogue reads as structural; pill corners are reserved for
	 * the one control that must read as a control (the search field).
	 */
	--r-xs: 3px;
	--r-sm: 5px;
	--r-md: 8px;
	--r-lg: 12px;
	--r-pill: 999px;

	/* ---------------------------------------------------------------- borders --
	 * One hairline weight, two strengths.
	 */
	--bw: 1px;
	--bw-strong: 2px;

	/* --------------------------------------------------------------- surfaces --
	 * Semantic colour tokens. Components MUST read these, never literals.
	 */
	--bg: var(--pm-native-bg, var(--base-2));
	--bg-sunken: var(--pm-native-bg, var(--base-2));
	--surface: var(--pm-native-surface, var(--base-3));
	--surface-raised: var(--pm-native-surface, var(--base-3));
	--surface-muted: var(--pm-native-bg, var(--base-2));

	--text: var(--pm-native-text, var(--contrast));
	--text-strong: var(--pm-native-text, var(--contrast));
	--muted: var(--contrast-2);
	--muted-strong: var(--contrast-2);
	--inverse-text: var(--pm-native-surface, var(--base-3));

	--border: color-mix(in srgb, var(--contrast-3) 35%, transparent);
	--border-strong: var(--contrast-3);

	--primary: var(--pm-native-link, var(--accent));
	--primary-hover: var(--pm-native-hover, var(--contrast));
	--primary-soft: color-mix(in srgb, var(--pm-native-link, var(--accent)) 10%, var(--pm-native-surface, var(--base-3)));
	--primary-contrast: var(--pm-native-surface, var(--base-3));
	--focus: var(--pm-native-link, var(--accent));

	--success: #16704a;
	--success-soft: #e6f4ed;
	--warning: #96540a;
	--warning-soft: #fdf1e0;
	--error: #b42318;
	--error-soft: #fdeceb;

	/* Chip / neutral tag surface. */
	--chip-bg: var(--base);
	--chip-text: var(--pm-native-text, var(--contrast));

	/* ----------------------------------------------------------------- shadows --
	 * Barely-there. Structure comes from borders; shadow only lifts interactive
	 * surfaces by one plane.
	 */
	--shadow-sm: 0 1px 2px rgba(16, 20, 24, 0.05);
	--shadow-md: 0 2px 8px rgba(16, 20, 24, 0.07);
	--shadow-lg: 0 8px 24px rgba(16, 20, 24, 0.10);

	/* ---------------------------------------------------------------- layout -- */
	--pm-max: 1200px;
	--pm-gutter: 16px;
	--pm-rail-width: 300px;
	--pm-read-measure: 44rem;

	/* Component text inherits its native GP context; no global font override. */
	--pm-font: inherit;
	--pm-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
		"Liberation Mono", monospace;

	/* ----------------------------------------------------------------- motion --
	 * One easing, one duration. Every transition in the theme uses these.
	 */
	--pm-ease: 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);
	--pm-ease-fast: 0.12s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (min-width: 1024px) {
	body.pm-v2 {
		--pm-gutter: 24px;
	}
}

/*
 * THEME RESOLUTION — three states, one palette per state.
 *
 *   1. No `data-theme` attribute: follow the OS (`prefers-color-scheme`).
 *   2. `data-theme="light"` / `data-theme="dark"`: an EXPLICIT visitor choice, set by the
 *      header toggle and persisted in localStorage. It wins over the OS.
 *
 * The dark palette is written once as a mixin-like block below and re-applied for both
 * the automatic (media query) and the explicit (`[data-theme="dark"]`) case, so a
 * visitor who forces dark on a light-OS device gets the identical tokens.
 *
 * `color-scheme` is set per state as well, so form controls, scrollbars and the canvas
 * follow the SAME choice rather than the OS default.
 */

/* --- explicit DARK -------------------------------------------------------- */
html[data-theme="dark"] body.pm-v2 {
	--bg: #14171a;
	--bg-sunken: #101316;
	--surface: #1a1e22;
	--surface-raised: #22272c;
	--surface-muted: #1d2126;
	--text: #e6e9ec;
	--text-strong: #f5f7f9;
	--muted: #9aa4ae;
	--muted-strong: #b3bcc5;
	--inverse-text: #14171a;
	--border: #2b3138;
	--border-strong: #3a424b;
	--primary: #6aa8ff;
	--primary-hover: #8dbcff;
	--primary-soft: #17263a;
	--primary-contrast: #0d1116;
	--focus: #8dbcff;
	--success: #4fc48d;
	--success-soft: #14251d;
	--warning: #e0a558;
	--warning-soft: #2a2114;
	--error: #f08579;
	--error-soft: #2c1a18;
	--chip-bg: #262c33;
	--chip-text: #c3cbd3;
	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
	--shadow-md: 0 2px 10px rgba(0, 0, 0, 0.45);
	--shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.55);
	color-scheme: dark;
}

/* --- FOLLOW THE OS (only when the visitor has not chosen explicitly) ------- */
@media (prefers-color-scheme: dark) {
	html:not([data-theme]) body.pm-v2 {
		--bg: #14171a;
		--bg-sunken: #101316;
		--surface: #1a1e22;
		--surface-raised: #22272c;
		--surface-muted: #1d2126;
		--text: #e6e9ec;
		--text-strong: #f5f7f9;
		--muted: #9aa4ae;
		--muted-strong: #b3bcc5;
		--inverse-text: #14171a;
		--border: #2b3138;
		--border-strong: #3a424b;
		--primary: #6aa8ff;
		--primary-hover: #8dbcff;
		--primary-soft: #17263a;
		--primary-contrast: #0d1116;
		--focus: #8dbcff;
		--success: #4fc48d;
		--success-soft: #14251d;
		--warning: #e0a558;
		--warning-soft: #2a2114;
		--error: #f08579;
		--error-soft: #2c1a18;
		--chip-bg: #262c33;
		--chip-text: #c3cbd3;
		--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
		--shadow-md: 0 2px 10px rgba(0, 0, 0, 0.45);
		--shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.55);
		color-scheme: dark;
	}
}

/* Native chrome: colour-only dark-mode enhancement.
 * Custom HTML widgets keep their author's palette, including nested headings/links.
 * Ordinary widget titles need the dark foreground rather than GP's light-only colour.
 */
html[data-theme="dark"] .pm-v2 .widget:not(.widget_custom_html) .widget-title { color: var(--text-strong); }
html[data-theme="dark"] body.pm-v2 { background-color: var(--bg); color: var(--text); }
html[data-theme="dark"] .pm-v2 .site-header,
html[data-theme="dark"] .pm-v2 .main-navigation,
html[data-theme="dark"] .pm-v2 .main-navigation .inside-navigation,
html[data-theme="dark"] .pm-v2 .main-navigation .main-nav ul li a,
html[data-theme="dark"] .pm-v2 .main-navigation .menu-toggle,
html[data-theme="dark"] .pm-v2 .site-info,
html[data-theme="dark"] .pm-v2 .footer-widgets,
html[data-theme="dark"] .pm-v2 .sidebar .widget:not(.widget_custom_html),
html[data-theme="dark"] .pm-v2 .inside-article,
html[data-theme="dark"] .pm-v2 .search-modal-form { background-color: var(--surface); color: var(--text); }
html[data-theme="dark"] .pm-v2 .main-navigation .main-nav ul ul { background-color: var(--surface-raised); }
html[data-theme="dark"] .pm-v2 .main-navigation .menu-bar-items,
html[data-theme="dark"] .pm-v2 .main-navigation .menu-bar-items a,
html[data-theme="dark"] .pm-v2 button.slideout-exit { color: var(--text); }
html[data-theme="dark"] .pm-v2 .main-navigation .menu-bar-items a:hover,
html[data-theme="dark"] .pm-v2 .main-navigation .menu-bar-items a:focus,
html[data-theme="dark"] .pm-v2 button.slideout-exit:hover,
html[data-theme="dark"] .pm-v2 button.slideout-exit:focus { background-color: var(--surface-muted); color: var(--primary); }
html[data-theme="dark"] .pm-v2 .main-navigation .main-nav ul li:hover > a,
html[data-theme="dark"] .pm-v2 .main-navigation .main-nav ul li.sfHover > a,
html[data-theme="dark"] .pm-v2 .main-navigation .main-nav ul li[class*="current-menu-"] > a { background-color: var(--surface-muted); color: var(--primary); }
html[data-theme="dark"] .pm-v2 .site-header a,
html[data-theme="dark"] .pm-v2 .site-footer a:not(.widget_custom_html *),
html[data-theme="dark"] .pm-v2 .sidebar .widget:not(.widget_custom_html) a,
html[data-theme="dark"] .pm-v2 .entry-title a,
html[data-theme="dark"] .pm-v2 .entry-content a { color: var(--primary); }
html[data-theme="dark"] .pm-v2 .site-header .main-title a,
html[data-theme="dark"] .pm-v2 .site-description,
html[data-theme="dark"] .pm-v2 h1:not(.widget-title):not(.widget_custom_html *),
html[data-theme="dark"] .pm-v2 h2:not(.widget-title):not(.widget_custom_html *),
html[data-theme="dark"] .pm-v2 h3:not(.widget-title):not(.widget_custom_html *),
html[data-theme="dark"] .pm-v2 h4:not(.widget-title):not(.widget_custom_html *),
html[data-theme="dark"] .pm-v2 h5:not(.widget-title):not(.widget_custom_html *),
html[data-theme="dark"] .pm-v2 h6:not(.widget-title):not(.widget_custom_html *) { color: var(--text); }

@media (prefers-color-scheme: dark) {
html:not([data-theme]) .pm-v2 .widget:not(.widget_custom_html) .widget-title { color: var(--text-strong); }
html:not([data-theme]) body.pm-v2 { background-color: var(--bg); color: var(--text); }
html:not([data-theme]) .pm-v2 .site-header,
html:not([data-theme]) .pm-v2 .main-navigation,
html:not([data-theme]) .pm-v2 .main-navigation .inside-navigation,
html:not([data-theme]) .pm-v2 .main-navigation .main-nav ul li a,
html:not([data-theme]) .pm-v2 .main-navigation .menu-toggle,
html:not([data-theme]) .pm-v2 .site-info,
html:not([data-theme]) .pm-v2 .footer-widgets,
html:not([data-theme]) .pm-v2 .sidebar .widget:not(.widget_custom_html),
html:not([data-theme]) .pm-v2 .inside-article,
html:not([data-theme]) .pm-v2 .search-modal-form { background-color: var(--surface); color: var(--text); }
html:not([data-theme]) .pm-v2 .main-navigation .main-nav ul ul { background-color: var(--surface-raised); }
html:not([data-theme]) .pm-v2 .main-navigation .menu-bar-items,
html:not([data-theme]) .pm-v2 .main-navigation .menu-bar-items a,
html:not([data-theme]) .pm-v2 button.slideout-exit { color: var(--text); }
html:not([data-theme]) .pm-v2 .main-navigation .menu-bar-items a:hover,
html:not([data-theme]) .pm-v2 .main-navigation .menu-bar-items a:focus,
html:not([data-theme]) .pm-v2 button.slideout-exit:hover,
html:not([data-theme]) .pm-v2 button.slideout-exit:focus { background-color: var(--surface-muted); color: var(--primary); }
html:not([data-theme]) .pm-v2 .main-navigation .main-nav ul li:hover > a,
html:not([data-theme]) .pm-v2 .main-navigation .main-nav ul li.sfHover > a,
html:not([data-theme]) .pm-v2 .main-navigation .main-nav ul li[class*="current-menu-"] > a { background-color: var(--surface-muted); color: var(--primary); }
html:not([data-theme]) .pm-v2 .site-header a,
html:not([data-theme]) .pm-v2 .site-footer a:not(.widget_custom_html *),
html:not([data-theme]) .pm-v2 .sidebar .widget:not(.widget_custom_html) a,
html:not([data-theme]) .pm-v2 .entry-title a,
html:not([data-theme]) .pm-v2 .entry-content a { color: var(--primary); }
html:not([data-theme]) .pm-v2 .site-header .main-title a,
html:not([data-theme]) .pm-v2 .site-description,
html:not([data-theme]) .pm-v2 h1:not(.widget-title):not(.widget_custom_html *),
html:not([data-theme]) .pm-v2 h2:not(.widget-title):not(.widget_custom_html *),
html:not([data-theme]) .pm-v2 h3:not(.widget-title):not(.widget_custom_html *),
html:not([data-theme]) .pm-v2 h4:not(.widget-title):not(.widget_custom_html *),
html:not([data-theme]) .pm-v2 h5:not(.widget-title):not(.widget_custom_html *),
html:not([data-theme]) .pm-v2 h6:not(.widget-title):not(.widget_custom_html *) { color: var(--text); }

}