/* ============================================================
	BASE.CSS
	Global reset, design tokens, typography, and body styles.
	All other stylesheets depend on the tokens defined here.
	============================================================ */


/* ── DESIGN TOKENS ── */
:root {

	/* Brand colors */
	--color-ink:              #0e0f0c;
	--color-paper:            #f5f2eb;
	--color-paper-mid:        #ede9df;
	--color-paper-dark:       #e8e3d8;
	--color-surface-warm:     #faf8f3;
	--color-muted-text:       #7a7870;

	/* Signal green (primary action / brand accent) */
	--color-signal:           rgba(1, 85, 1, 0.65);
	--color-signal-solid:     #015501;
	--color-signal-dark:      rgba(1, 60, 1, 0.75);
	--color-signal-subtle:    rgba(1, 85, 1, 0.08);
	--color-signal-dim:       rgba(1, 85, 1, 0.55);
	--color-signal-border:    rgba(1, 85, 1, 0.2);

	/* Borders */
	--color-border:           rgba(14, 15, 12, 0.09);
	--color-border-strong:    rgba(14, 15, 12, 0.16);

	/* Typography */
	--font-serif:             'DM Serif Display', Georgia, serif;
	--font-sans:              'Instrument Sans', system-ui, sans-serif;
	--font-mono:              'DM Mono', 'Courier New', monospace;

	/* Spacing scale */
	--space-xs:   4px;
	--space-sm:   8px;
	--space-md:   16px;
	--space-lg:   24px;
	--space-xl:   40px;
	--space-2xl:  64px;
	--space-3xl:  100px;

	/* Layout */
	--max-content-width: 1280px;

	/* Transitions */
	--transition-fast:   0.15s ease;
	--transition-base:   0.25s ease;
	--transition-slow:   0.5s ease;

}


/* ── RESET ── */
*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

img, svg {
	display: block;
	max-width: 100%;
}

input, button, textarea, select {
	font: inherit;
}


/* ── BODY ── */
body {
	background-color: var(--color-paper);
	color:            var(--color-ink);
	font-family:      var(--font-sans);
	font-size:        16px;
	line-height:      1.6;
	overflow-x:       hidden;
}


/* ── TYPOGRAPHY SCALE ── */
h1, h2, h3, h4 {
	font-family:    var(--font-serif);
	line-height:    1.1;
	letter-spacing: -0.02em;
}

h1 { font-size: clamp(42px, 6vw, 72px); }
h2 { font-size: clamp(30px, 4vw, 48px); }
h3 { font-size: clamp(20px, 2.5vw, 28px); }

p {
	line-height: 1.75;
}

a {
	color: inherit;
}


/* ── NOTEBOOK BACKGROUND TEXTURE ── */
/* Fixed decorative grid — applied to body layer, not a real element */
.page-texture {
	position:         fixed;
	inset:            0;
	z-index:          -1;
	pointer-events:   none;
	background-color: var(--color-paper);
	background-image:
		linear-gradient(rgba(1, 85, 1, 0.03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(1, 85, 1, 0.03) 1px, transparent 1px),
		linear-gradient(rgba(14, 15, 12, 0.02) 1px, transparent 1px),
		linear-gradient(90deg, rgba(14, 15, 12, 0.02) 1px, transparent 1px);
	background-size: 80px 80px, 80px 80px, 20px 20px, 20px 20px;
}


/* ── UTILITY ── */
.visually-hidden {
	position:    absolute;
	width:       1px; height: 1px;
	overflow:    hidden;
	clip:        rect(0 0 0 0);
	white-space: nowrap;
}