/**
 * PureSourceCode — design tokens.
 *
 * Defaults live here so the stylesheet works on its own; the Customizer
 * overrides individual properties inline (see inc/psc/design/tokens.php).
 * Any value changed here must be changed in psc_color_tokens() too.
 */

:root {
	/* ---- Brand ------------------------------------------------------ *
	 * .NET purple leads. The four Microsoft logo colours form the accent
	 * set used for category badges, section rules and tab indicators.    */
	--psc-primary:        #512BD4;
	--psc-primary-dark:   #3D1FA8;
	--psc-primary-soft:   rgba(81, 43, 212, 0.08);
	/* Text placed ON the primary colour. White works against the dark purple
	   used in the light theme, but the dark theme lightens the primary, where
	   white would fall to a 3.8:1 ratio - so it flips to near-black. */
	--psc-on-primary:     #FFFFFF;

	--psc-accent-blue:    #00A4EF;
	--psc-accent-green:   #7FBA00;
	--psc-accent-orange:  #F25022;
	--psc-accent-yellow:  #FFB900;

	/* ---- Surfaces --------------------------------------------------- */
	--psc-surface:        #FFFFFF;
	--psc-surface-sunken: #F5F7FA;
	--psc-surface-raised: #FFFFFF;
	--psc-border:         #DFE3E8;
	--psc-border-strong:  #C4CBD4;

	/* ---- Text ------------------------------------------------------- */
	--psc-text:           #1B1F23;
	--psc-text-muted:     #5B6570;
	--psc-text-faint:     #8A94A0;
	--psc-text-inverse:   #FFFFFF;
	--psc-link:           #512BD4;
	--psc-link-hover:     #3D1FA8;

	/* ---- Chrome ----------------------------------------------------- */
	--psc-topbar-bg:      #1B1F23;
	--psc-topbar-text:    #C9D1D9;
	--psc-header-bg:      #FFFFFF;
	--psc-nav-bg:         #FFFFFF;
	--psc-nav-text:       #1B1F23;
	--psc-footer-bg:      #14161A;
	--psc-footer-text:    #A8B1BC;

	/* ---- Code ------------------------------------------------------- *
	 * Deliberately dark even in the light theme: a code block should read
	 * as an editor surface, and it is the one place the darkness the client
	 * disliked elsewhere is actually wanted.                             */
	--psc-code-bg:        #1E1E1E;
	--psc-code-text:      #D4D4D4;
	--psc-code-border:    #2D2D2D;
	--psc-code-inline-bg: rgba(81, 43, 212, 0.08);
	--psc-code-inline-fg: #3D1FA8;

	/* ---- Typography ------------------------------------------------- *
	 * System-first: Segoe UI is already present on the Windows machines
	 * that make up most of a .NET audience, so there is no webfont cost.  */
	--psc-font-sans: "Segoe UI", Inter, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
	--psc-font-mono: "Cascadia Code", "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
	--psc-font-display: var(--psc-font-sans);

	--psc-text-xs:   0.75rem;
	--psc-text-sm:   0.875rem;
	--psc-text-base: 1rem;
	--psc-text-lg:   1.125rem;
	--psc-text-xl:   1.375rem;
	--psc-text-2xl:  1.75rem;
	--psc-text-3xl:  2.25rem;
	--psc-text-4xl:  2.75rem;

	--psc-leading-tight: 1.2;
	--psc-leading-snug:  1.4;
	--psc-leading-base:  1.7;

	/* ---- Spacing ---------------------------------------------------- */
	--psc-space-1:  0.25rem;
	--psc-space-2:  0.5rem;
	--psc-space-3:  0.75rem;
	--psc-space-4:  1rem;
	--psc-space-5:  1.25rem;
	--psc-space-6:  1.5rem;
	--psc-space-8:  2rem;
	--psc-space-10: 2.5rem;
	--psc-space-12: 3rem;
	--psc-space-16: 4rem;

	/* ---- Shape and depth -------------------------------------------- */
	--psc-radius-sm: 4px;
	--psc-radius-md: 6px;
	--psc-radius-lg: 10px;
	--psc-radius-pill: 999px;

	--psc-shadow-sm: 0 1px 2px rgba(16, 22, 26, 0.06);
	--psc-shadow-md: 0 2px 8px rgba(16, 22, 26, 0.08);
	--psc-shadow-lg: 0 8px 24px rgba(16, 22, 26, 0.10);

	/* ---- Layout ----------------------------------------------------- */
	--psc-container: 1240px;
	--psc-gutter: var(--psc-space-6);
	--psc-header-sticky-height: 64px;
	--psc-logo-height: 48px;

	/* ---- Motion ----------------------------------------------------- */
	--psc-transition: 160ms ease;

	/* ---- Layers ----------------------------------------------------- */
	--psc-z-nav: 100;
	--psc-z-offcanvas: 200;
	--psc-z-modal: 300;

	color-scheme: light;
}

/* ---------------------------------------------------------------------- *
 * Dark theme
 *
 * Set on <html data-theme="dark"> before first paint by psc_dark_mode_boot(),
 * so there is no flash of the light palette.
 * ---------------------------------------------------------------------- */
:root[data-theme="dark"] {
	--psc-primary:        #8B6CF0;
	--psc-primary-dark:   #A48BF4;
	--psc-primary-soft:   rgba(139, 108, 240, 0.14);
	--psc-on-primary:     #140E2E;

	--psc-accent-blue:    #38BDF8;
	--psc-accent-green:   #9BD62B;
	--psc-accent-orange:  #FF6E40;
	--psc-accent-yellow:  #FFC933;

	--psc-surface:        #0F1216;
	--psc-surface-sunken: #161A1F;
	--psc-surface-raised: #1B2027;
	--psc-border:         #2A313A;
	--psc-border-strong:  #3A434E;

	--psc-text:           #E6EDF3;
	--psc-text-muted:     #9DA7B3;
	--psc-text-faint:     #6E7A88;
	--psc-text-inverse:   #0F1216;
	--psc-link:           #A48BF4;
	--psc-link-hover:     #C4B3F8;

	--psc-topbar-bg:      #0A0D10;
	--psc-topbar-text:    #9DA7B3;
	--psc-header-bg:      #0F1216;
	--psc-nav-bg:         #0F1216;
	--psc-nav-text:       #E6EDF3;
	--psc-footer-bg:      #0A0D10;
	--psc-footer-text:    #9DA7B3;

	--psc-code-bg:        #12161B;
	--psc-code-border:    #232A32;
	--psc-code-inline-bg: rgba(139, 108, 240, 0.16);
	--psc-code-inline-fg: #C4B3F8;

	--psc-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
	--psc-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.45);
	--psc-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);

	color-scheme: dark;
}

/* ---------------------------------------------------------------------- *
 * Category accents
 *
 * Each category can carry its own colour (Posts > Categories > Category
 * Color). These are the fallbacks used before one is chosen, cycled so a
 * fresh site still looks deliberate rather than monochrome.
 * ---------------------------------------------------------------------- */
:root {
	--psc-cat-1: var(--psc-primary);
	--psc-cat-2: var(--psc-accent-blue);
	--psc-cat-3: var(--psc-accent-green);
	--psc-cat-4: var(--psc-accent-orange);
	--psc-cat-5: var(--psc-accent-yellow);
}

/* ---------------------------------------------------------------------- *
 * Respect reduced-motion preferences.
 * ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	:root { --psc-transition: 0ms; }

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}