/* 00-tokens.css — variables, fonts, type scale, spacing.
   This file is also inlined as critical CSS in <head>. Keep it lean. */

@font-face {
	font-family: 'Fraunces';
	src: url('../fonts/fraunces-variable.woff2') format('woff2-variations');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Instrument Sans';
	src: url('../fonts/instrument-sans-variable.woff2') format('woff2-variations');
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'JetBrains Mono';
	src: url('../fonts/jetbrains-mono-regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

:root {
	/* paper & ink */
	--paper:        #F3EEE4;
	--paper-2:      #E9E2D3;
	--ink:          #1C1A17;
	--ink-soft:     #4A453D;
	--ink-faint:    #8A8377;
	--rule:         #1C1A17;
	--rule-soft:    #CFC6B2;

	/* single accent + supporting tones */
	--accent:       #D2462B;
	--accent-ink:   #FFF8EE;
	--moss:         #5E6B4A;
	--mustard:      #C99A2E;

	/* feedback */
	--error:        #A12A1A;
	--success:      var(--moss);

	/* focus */
	--focus:        #1C1A17;

	/* type families */
	--font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
	--font-body:    'Instrument Sans', system-ui, -apple-system, sans-serif;
	--font-mono:    'JetBrains Mono', ui-monospace, Menlo, monospace;

	/* fluid type scale */
	--step--1: clamp(0.80rem, 0.78rem + 0.1vw, 0.875rem);
	--step-0:  clamp(1.06rem, 1.02rem + 0.2vw, 1.15rem);
	--step-1:  clamp(1.3rem, 1.2rem + 0.5vw, 1.6rem);
	--step-2:  clamp(1.7rem, 1.4rem + 1.4vw, 2.5rem);
	--step-3:  clamp(2.3rem, 1.7rem + 3vw, 4rem);
	--step-4:  clamp(3rem, 1.8rem + 6vw, 7rem);

	/* spacing scale — intentionally uneven */
	--s-1: .25rem;
	--s-2: .5rem;
	--s-3: .875rem;
	--s-4: 1.5rem;
	--s-5: 2.5rem;
	--s-6: 4rem;
	--s-7: 6.5rem;
	--s-8: 10rem;

	/* structure */
	--wrap: 1320px;
	--gutter: clamp(1rem, 4vw, 3rem);
	--radius: 2px;
	--border: 1px solid var(--rule);
	--border-soft: 1px solid var(--rule-soft);

	/* shadows — hard offset only, used on primary buttons */
	--shadow-hard: 3px 3px 0 var(--accent);
	--shadow-hard-sm: 1px 1px 0 var(--accent);
	--shadow-img: 4px 4px 0 var(--rule);
}

:root[data-theme="dark"] {
	--paper:        #171512;
	--paper-2:      #211E1A;
	--ink:          #EDE6D8;
	--ink-soft:     #B9B1A1;
	--ink-faint:    #7E776A;
	--rule:         #EDE6D8;
	--rule-soft:    #3A352E;
	--accent:       #F0674B;
	--accent-ink:   #1C1A17;
	--focus:        #EDE6D8;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--motion: 0s;
	}
}