/*
 * PhilMaps design tokens. Single source of truth — site.css and argmap.css
 * consume these; no raw colors elsewhere. Light is the default scheme;
 * dark applies via :root[data-theme="dark"], with the OS preference used
 * to set the initial data-theme before first paint.
 */
:root {
	/* site */
	--paper: #faf9f6;
	--paper-raised: #ffffff;
	--ink: #212528;
	--ink-strong: #14171a;
	--muted: #5d6570;
	--hairline: #e7e4dd;
	--hairline-strong: #d6d2c8;
	--brand: #257a52;
	--brand-ink: #1c5e3f;
	--brand-wash: rgba(51, 153, 102, 0.07);
	--focus: #1f7fb0;

	/* map grammar (authentic MindMup argument theme, light) */
	--am-paper: #ffffff;
	--am-canvas: var(--paper-raised);
	--am-grid-dot: rgba(0, 0, 0, 0.045);
	--am-ink: #4f4f4f;
	--am-border: #707070;
	--am-green: #339966;
	--am-red: #ff0000;
	--am-select: #22aae0;
	--am-badge: rgba(34, 170, 224, 0.8);
	--am-shadow: 2px 2px 2px rgba(7, 7, 7, 0.3);

	/* type — sizes are rem so the fluid root scale (below) grows the whole
	 * interface on wide viewports; heading clamps only manage the
	 * mobile→desktop range, then the root takes over */
	--font-body: 'Literata', 'Iowan Old Style', Georgia, serif;
	--font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--font-map: 'Noto Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	--text-body: clamp(1.03rem, 0.99rem + 0.16vw, 1.09375rem);
	--text-small: 0.90625rem;
	--text-caption: 0.84375rem;
	--text-h1: clamp(2.125rem, 1.55rem + 1.9vw, 2.875rem);
	--text-h2: clamp(1.5rem, 1.32rem + 0.6vw, 1.75rem);
	--text-h3: clamp(1.1875rem, 1.13rem + 0.2vw, 1.3125rem);
	--leading-body: 1.68;
	--tracking-heading: -0.012em;

	/* layout — rem so columns widen with the fluid scale and the extra
	 * space on big screens is actually used */
	--shell: 71.25rem;
	--measure: 43.75rem;
	--measure-wide: 55rem;
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 1rem;
	--space-4: 1.5rem;
	--space-5: 2.5rem;
	--space-6: 4rem;
	--space-7: 6.5rem;
	--radius-card: 0.875rem;
	--radius-ui: 0.5625rem;
	--shadow-card: 0 1px 2px rgba(20, 23, 26, 0.05), 0 8px 28px -12px rgba(20, 23, 26, 0.12);
}

/*
 * Fluid scale: 16px root up to 1440px viewports, growing linearly to 21px
 * (+31%) at 1920px and holding there. Percentages keep the user's own
 * browser font-size preference meaningful. Everything sized in rem/em/ch
 * — type, spacing, cards, and the argument maps — rides this together.
 */
html {
	font-size: clamp(100%, 6.25% + 1.0417vw, 131.25%);
}

:root[data-theme='dark'] {
	--paper: #17191c;
	--paper-raised: #1f2226;
	--ink: #d7dbe0;
	--ink-strong: #f1f3f5;
	--muted: #9aa1a8;
	--hairline: #2f343a;
	--hairline-strong: #3d4248;
	--brand: #58be8b;
	--brand-ink: #7ccfa4;
	--brand-wash: rgba(63, 179, 119, 0.1);
	--focus: #5cc8f2;

	/* map grammar, dark (the editor's own view transform) */
	--am-paper: #26292d;
	--am-canvas: var(--paper-raised);
	--am-grid-dot: rgba(255, 255, 255, 0.05);
	--am-ink: #e2e5e7;
	--am-border: #9aa0a6;
	--am-green: #3fb377;
	--am-red: #ff5d5d;
	--am-shadow: 2px 2px 3px rgba(0, 0, 0, 0.45);

	--shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 30px -14px rgba(0, 0, 0, 0.55);
}