/**
 * POPIRON visual tokens (D-1 SSOT / 2.0 Phase 1).
 *
 * Keep this file lean. Page CSS must consume these —
 * do not introduce new hex palettes in page files.
 *
 * Narrative: docs/06-screen-design/design-system.md
 */

/* 「ポピ論」 wordmark only — Noto Serif JP SemiBold subset (OFL). */
@font-face {
	font-family: "POPIRON Brand";
	src: url("../fonts/brand/noto-serif-jp-semibold-brand.woff2") format("woff2");
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	unicode-range: U+30D4, U+30DD, U+8AD6;
}

:root {
	/* Color */
	--popiron-color-brand: #141414;
	--popiron-color-bg: #f4f4f2;
	--popiron-color-surface: #ffffff;
	--popiron-color-surface-alt: #efefea;
	--popiron-color-text: #1a1a1a;
	--popiron-color-muted: #5c5c5c;
	--popiron-color-border: #e2e2dc;
	--popiron-color-divider-soft: #d8dce0;
	--popiron-color-popiron: #c4a35a;
	--popiron-color-popiron-on-light: #8c6d2a;
	--popiron-color-user: #3d4a54;
	--popiron-color-danger: #8a1f11;
	--popiron-color-success: #1b5e20;

	/* Type */
	--popiron-font-sans: system-ui, -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", sans-serif;
	--popiron-font-brand: "POPIRON Brand", var(--popiron-font-sans);
	--popiron-fs-meta: 0.75rem;
	--popiron-fs-sm: 0.875rem;
	--popiron-fs-base: 1rem;
	--popiron-fs-lg: 1.125rem;
	--popiron-fs-xl: 1.5rem;
	--popiron-fs-score: 2.5rem;

	/* Space (4px ladder): 4 8 12 16 20 24 28 32 40 48 */
	--popiron-space-1: 0.25rem;
	--popiron-space-2: 0.5rem;
	--popiron-space-3: 0.75rem;
	--popiron-space-4: 1rem;
	--popiron-space-5: 1.25rem;
	--popiron-space-6: 1.5rem;
	--popiron-space-7: 1.75rem;
	--popiron-space-8: 2rem;
	--popiron-space-10: 2.5rem;
	--popiron-space-12: 3rem;

	/* Radius */
	--popiron-radius-sm: 4px;
	--popiron-radius-md: 8px;
	--popiron-radius-pill: 999px;

	/* Width: reading / content(standard) / wide */
	--popiron-width-reading: 36rem;
	--popiron-width-content: 42rem;
	--popiron-width-wide: 60rem;
}