/* ==========================================================================
   PTO Mode — Design Tokens
   Locked brand system. Do not deviate from these values without design sign-off.
   Aesthetic: "Warm Rest" — premium, calm, slightly wry adult brand.
   ========================================================================== */

/* --- Self-hosted variable fonts (latin subset, font-display: swap) --------- */
@font-face {
	font-family: 'Space Grotesk';
	font-style: normal;
	font-weight: 300 700; /* variable weight axis */
	font-display: swap;
	src: url('../fonts/space-grotesk.woff2') format('woff2');
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100 900; /* variable weight axis */
	font-display: swap;
	src: url('../fonts/inter.woff2') format('woff2');
}

:root {
	/* --- Palette (LOCKED) -------------------------------------------------- */
	--color-paper: #F4EFE6;      /* page background */
	--color-ink: #17150F;        /* headings / max-contrast text */
	--color-body: #5C574C;       /* body copy */
	--color-pine: #0E4C41;       /* primary brand */
	--color-terracotta: #D97A45; /* wry accent + primary CTA */
	--color-hairline: #E4DCCB;   /* borders / dividers */

	/* Functional aliases + tints/shades derived from the locked palette. */
	--color-bg: var(--color-paper);
	--color-surface: #FBF8F2;               /* slightly lifted card surface */
	--color-pine-ink: #0A362E;              /* pine, pressed/hover */
	--color-pine-deep: #0A3B32;             /* pine gradient shadow end */
	--color-pine-lift: #14584B;             /* pine gradient highlight end */
	--color-terracotta-ink: #C1652F;        /* terracotta, pressed/hover (accent) */
	--color-terracotta-cta: #A85422;        /* CTA fill — AA (4.63:1) with paper label */
	--color-terracotta-cta-ink: #9E4E22;    /* CTA fill, hover/pressed */
	--color-error: #A8441C;                 /* error text — AA (5.23:1) on paper */
	--color-on-dark: #F4EFE6;               /* text on pine/ink fills */
	--color-focus: var(--color-pine);       /* focus ring — pine, 8.6:1 on paper */

	/* --- Type families ----------------------------------------------------- */
	--font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
	--font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

	/* --- Type scale — modular scale ratio 1.25 from a 16px base -------------
	   13 / 16 / 20 / 25 / 31 / 39 / 49 / 61 px  (expressed in rem @ 16px root) */
	--fs-100: 0.8125rem; /* 13px — fine print / microcopy */
	--fs-200: 1rem;      /* 16px — body base */
	--fs-300: 1.25rem;   /* 20px — lede / large body */
	--fs-400: 1.5625rem; /* 25px — h3 / small display */
	--fs-500: 1.9375rem; /* 31px — h2 */
	--fs-600: 2.4375rem; /* 39px — h1 (interior) */
	--fs-700: clamp(2.25rem, 6.5vw, 3.0625rem);   /* 36→49px — display (fluid) */
	--fs-800: clamp(2.625rem, 8vw, 3.8125rem);    /* 42→61px — hero display (fluid) */

	/* --- Line heights ------------------------------------------------------ */
	--lh-tight: 1.05;  /* large display */
	--lh-snug: 1.15;   /* headings */
	--lh-body: 1.6;    /* body copy (spec) */

	/* --- Letter-spacing — display runs tight ------------------------------- */
	--tracking-display: -0.02em;
	--tracking-display-tight: -0.03em; /* largest sizes */
	--tracking-body: 0;
	--tracking-eyebrow: 0.08em; /* uppercase eyebrows */

	/* --- Font weights ------------------------------------------------------ */
	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-display: 500;      /* Space Grotesk medium reads premium at scale */
	--fw-display-bold: 700;

	/* --- Spacing scale — 4px base on an 8-pt grid -------------------------- */
	--space-1: 0.25rem; /* 4px  */
	--space-2: 0.5rem;  /* 8px  */
	--space-3: 0.75rem; /* 12px */
	--space-4: 1rem;    /* 16px */
	--space-5: 1.5rem;  /* 24px */
	--space-6: 2rem;    /* 32px */
	--space-7: 3rem;    /* 48px */
	--space-8: 4rem;    /* 64px */
	--space-9: 6rem;    /* 96px  — section rhythm min */
	--space-10: 8rem;   /* 128px — section rhythm max */

	/* --- Layout measures --------------------------------------------------- */
	--container-max: 1120px; /* max content width */
	--prose-max: 680px;      /* max readable prose width */
	--section-pad-y: clamp(var(--space-8), 8vw, var(--space-10)); /* 64 -> 128px */
	--gutter: var(--space-5); /* 24px page gutter (mobile) */
	--gutter-lg: var(--space-8);

	/* --- Radii / borders / shadow ------------------------------------------ */
	--radius-sm: 8px;
	--radius-md: 12px;
	--radius-lg: 20px;
	--radius-pill: 999px;
	--border-hairline: 1px solid var(--color-hairline);
	--shadow-soft: 0 1px 2px rgba(23, 21, 15, 0.04), 0 8px 24px rgba(23, 21, 15, 0.06);

	/* --- Motion ------------------------------------------------------------ */
	--ease: cubic-bezier(0.22, 1, 0.36, 1);
	--ease-reveal: cubic-bezier(0.16, 1, 0.3, 1); /* expo-out reveal */
	--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* overshoot */
	--dur: 180ms;
	--dur-2: 320ms;
	--dur-reveal: 640ms;
	--reveal-y: 16px;
	--stagger: 80ms;

	/* --- Shadow ramp (ink-tinted / warm, not pure black) ------------------- */
	--shadow-1: 0 1px 2px rgba(23, 21, 15, 0.04), 0 2px 8px rgba(23, 21, 15, 0.05);
	--shadow-2: 0 2px 4px rgba(23, 21, 15, 0.05), 0 12px 28px -8px rgba(23, 21, 15, 0.12);
	--shadow-3: 0 4px 8px rgba(23, 21, 15, 0.06), 0 24px 48px -12px rgba(23, 21, 15, 0.18);
}