/*
 * Digital Dreamers — design tokens.
 * Values lifted directly from the design handoff (Design Tokens section).
 */

:root {
	/* Colors */
	--dd-paper: #f3ede2;
	--dd-paper-card: #fbf8f2;
	--dd-ink: #12324c;
	--dd-ink-hover: #234b6b;
	--dd-terracotta: #b5674a;
	--dd-terracotta-dark: #8f4d34;
	--dd-terracotta-light: #e0a084;
	--dd-body: #4a5866;
	--dd-body-dark: #2c3e4d;
	--dd-muted: #8a8071;

	--dd-line: rgba(18, 50, 76, 0.12);
	--dd-line-14: rgba(18, 50, 76, 0.14);
	--dd-line-strong: rgba(18, 50, 76, 0.2);

	/* On dark (navy) surfaces */
	--dd-on-dark: #f3ede2;
	--dd-on-dark-70: rgba(243, 237, 226, 0.7);
	--dd-on-dark-65: rgba(243, 237, 226, 0.65);
	--dd-on-dark-60: rgba(243, 237, 226, 0.6);
	--dd-on-dark-border: rgba(243, 237, 226, 0.25);

	/* Typography */
	--dd-serif: "Newsreader", Georgia, "Times New Roman", serif;
	--dd-sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
	--dd-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

	/* Layout */
	--dd-maxw: 1280px;
	--dd-pad: 56px;
	--dd-reading: 680px;

	/* Radius */
	--dd-radius-card: 14px;
	--dd-radius-panel: 20px;
	--dd-radius-pill: 100px;

	/* Shadow */
	--dd-shadow-card: 0 18px 44px rgba(18, 50, 76, 0.1);
	--dd-shadow-float: 0 14px 34px rgba(18, 50, 76, 0.14);

	/* Motion */
	--dd-ease: 0.25s ease;
}

@media (max-width: 900px) {
	:root {
		--dd-pad: 28px;
	}
}

@media (max-width: 560px) {
	:root {
		--dd-pad: 20px;
	}
}