/* South Creek Santa · design tokens (system v1). Theme Settings → Design may override later. */

@font-face { font-family: "Fredoka"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/fredoka-latin.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/atkinson-400.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/atkinson-700.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/atkinson-400i.woff2") format("woff2"); }

:root {
	/* Color */
	--scs-cream: #FFF5E5;        /* page ground */
	--scs-paper: #FFFBF3;        /* raised paper */
	--scs-paper-2: #FCE6B8;      /* yellow wishes band */
	--scs-ink: #203C3B;
	--scs-ink-soft: #33504F;
	--scs-ink-muted: #4A5E5D;
	--scs-red: #C93E3E;          /* fills, buttons */
	--scs-red-text: #A8323A;     /* red text on cream */
	--scs-red-deep: #7E2228;
	--scs-green: #216653;        /* bands, active nav */
	--scs-green-deep: #1B5646;
	--scs-green-mid: #2E7A5E;
	--scs-teal: #287D86;         /* fills, focus */
	--scs-teal-text: #1F6E77;    /* small teal text */
	--scs-sun: #F4BE56;          /* accents only */
	--scs-sun-soft: #F7CD78;
	--scs-ph-bg: #FBE3B0;        /* placeholder chip */
	--scs-ph-ink: #6E4210;
	--scs-rule: #CDBB9B;
	--scs-rule-soft: #E4D5BC;
	--scs-on-dark: #FFF8EE;
	--scs-on-dark-muted: #E6F0EA;
	--scs-coconut-1: #7B4B2A;
	--scs-coconut-2: #9A6238;
	--scs-coconut-3: #D9B98C;

	/* Type */
	--scs-font-display: "Fredoka", "Trebuchet MS", sans-serif;
	--scs-font-body: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
	--scs-h1: clamp(2.625rem, 1.6rem + 3.6vw, 4.25rem);   /* 42 → 68 */
	--scs-h2: clamp(2.125rem, 1.45rem + 2.4vw, 3.25rem);  /* 34 → 52 */
	--scs-h3: clamp(1.5rem, 1.25rem + 0.9vw, 2.125rem);   /* 24 → 34 */
	--scs-h4: 1.5rem;
	--scs-body: clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem); /* 17 → 19 */
	--scs-small: 0.9375rem;
	--scs-eyebrow: 0.875rem;

	/* Space (8, 16, 24, 40, 56, 88, 120) */
	--scs-s1: 8px;
	--scs-s2: 16px;
	--scs-s3: 24px;
	--scs-s4: 40px;
	--scs-s5: 56px;
	--scs-s6: 88px;
	--scs-s7: 120px;
	--scs-section: clamp(56px, 4vw + 40px, 120px);

	/* Layout */
	--scs-container: 1280px;
	--scs-gutter: 32px;
	--scs-reading: 760px;

	/* Shape */
	--scs-radius-sm: 8px;
	--scs-radius: 14px;
	--scs-radius-lg: 24px;
	--scs-pill: 999px;
	--scs-border: 2px solid var(--scs-ink);
	--scs-shadow-sm: 3px 4px 0 var(--scs-ink);
	--scs-shadow: 6px 8px 0 var(--scs-ink);

	/* Motion */
	--scs-ease: cubic-bezier(.3, .7, .3, 1);
	--scs-fast: .12s;

	/* Header / dock reserve (dock JS updates this) */
	--scs-dock-h: 0px;
}

@media (max-width: 640px) {
	:root { --scs-gutter: 16px; }
}