/*
 * Design tokens.
 *
 * Midnight (dark) is the base: it defines every token, including layout and
 * type. Harbor (light) overrides COLORS ONLY, when <html> has
 * data-theme="light". The block editor always uses Harbor's colors.
 *
 * Rule: never add a non-color token to the Harbor block, and never write a
 * [data-theme="light"] rule outside this file except to swap an icon.
 *
 * Source: the "Design tokens" table in the design spec. All text/accent
 * pairs pass WCAG AA; re-check contrast before adding a new pairing.
 */

:root,
[data-theme="dark"] {
	color-scheme: dark;

	--font: "Manrope Variable", "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	--weight-display: 800;      /* site name, page and post titles */
	--tracking-display: -.04em;
	--label-size: 11.5px;
	--label-tracking: .16em;

	--bg: #0F1318;              /* page background */
	--surface: rgba(255, 255, 255, .04); /* inputs, code */
	--text: #EDE8DD;            /* headings, UI text */
	--text-body: #D9D4C8;       /* article paragraphs */
	--text-muted: #A7A196;      /* excerpts, labels, footer */
	--accent: #C9A96E;          /* brass: links, active, buttons, focus */
	--on-accent: #0F1318;       /* text on filled accent */
	--hairline: rgba(237, 232, 221, .13);
	--control-border: rgba(237, 232, 221, .3);
	--popover-bg: #1D2530;
	--popover-border: rgba(201, 169, 110, .5);
	--popover-shadow: 0 24px 48px -16px rgba(0, 0, 0, .5);
	--featured-bg: #1D2530;
	--featured-border: rgba(201, 169, 110, .4);
	--hover-tint: rgba(201, 169, 110, .12);
	--scrim: rgba(6, 9, 13, .62);
	--date: var(--accent);
	--sidebar-title: var(--accent);
	--ring-glow: rgba(201, 169, 110, .35);

	--header-bg: var(--bg);
	--header-glow: radial-gradient(50% 160% at 85% 0%, rgba(201, 169, 110, .14), transparent 70%);

	--placeholder: linear-gradient(165deg, #2B313B, #171B22);
	--placeholder-alt: var(--placeholder);
	--placeholder-border: rgba(201, 169, 110, .3);
	--avatar-border: rgba(201, 169, 110, .55);

	--avatar-radius: 50%;
	--card-radius: 14px;
	--thumb-radius: 10px;
	--control-border-width: 1px;
}

[data-theme="light"],
.editor-styles-wrapper {
	/*
	 * Colors only. Layout, type, spacing, radii and borders come from the
	 * Midnight set above, so the two themes are identical except for color.
	 */
	color-scheme: light;

	--bg: #F3F5F8;
	--surface: #FFFFFF;
	--text: #172033;
	--text-body: #263045;
	--text-muted: #4B5668;
	--accent: #2F5D9E;
	--on-accent: #FFFFFF;
	--hairline: #DFE4EC;
	--control-border: #7F8DA3;
	--popover-bg: #FFFFFF;
	--popover-border: #C8D6EC;
	--popover-shadow: 0 24px 48px -18px rgba(23, 32, 51, .28);
	--featured-bg: #E1EAF6;
	--featured-border: #C8D6EC;
	--hover-tint: #E1EAF6;
	--scrim: rgba(23, 32, 51, .4);
	--date: #8A5A12;
	--ring-glow: rgba(47, 93, 158, .3);

	--header-glow: radial-gradient(50% 160% at 85% 0%, rgba(47, 93, 158, .10), transparent 70%);

	--placeholder: linear-gradient(160deg, #BCD2EE, #7FA3D4);
	--placeholder-alt: linear-gradient(160deg, #F1E3C4, #D9BE86);
	--placeholder-border: rgba(47, 93, 158, .25);
	--avatar-border: rgba(47, 93, 158, .4);
}

/* Shared, theme-independent tokens. */
:root {
	--container: 1200px;
	--gutter: 48px;
	--sidebar-width: 320px;
	--sidebar-gap: 80px;
	--footer-bar-height: 44px;
	--header-height: 156px; /* desktop default until core.js measures the real header */
	--footer-height: 81px;  /* likewise for the footer (the 44px bar on the home page) */
	--admin-bar: var(--wp-admin--admin-bar--height, 0px);
	--radius-pill: 999px;
	--ease: cubic-bezier(.2, .7, .2, 1);
	--speed: .18s;
}