/*
 * Design tokens — atfal.ca homepage redesign v2
 *
 * Typography: Inter (UI/body) + Fraunces (editorial/quote display) via Google
 * Fonts, loaded with font-display:swap and only the weights actually used.
 * Explicitly authorized to replace the theme's default Open Sans stack.
 *
 * Color: red is still wp_options.codevz_secondary_color (#c92127) as the
 * organizational anchor — everything else in the palette is derived from it
 * (deeper red, near-black, charcoal) or is a standard neutral scale, per an
 * explicit request for a more sophisticated system than flat red/white/black.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Fraunces:ital,opsz,wght@0,9..144,500;1,9..144,500&display=swap');

:root {
	/* Color — core */
	--color-red: #c92127;
	--color-red-deep: #9d1a1e;    /* hover/pressed, deeper accent moments */
	--color-red-tint: #fbe9ea;    /* faint red wash for subtle backgrounds */
	--color-ink: #17181a;         /* near-black — headings, hero surfaces */
	--color-charcoal: #2a2b2e;    /* secondary dark surface, gradients */
	--color-black: #000000;       /* reserved, rare full-black accents */

	/* Color — neutrals */
	--color-warm-white: #fdfbfa;  /* main background, slightly warm off-white */
	--color-white: #ffffff;
	--color-grey-100: #f0eeec;    /* section alternation, subtle fills */
	--color-cool-grey: #f8fafc;   /* alternate section fill, cooler than the warm neutrals */
	--color-grey-200: #e4e1de;    /* borders */
	--color-grey-300: #adadad;    /* disabled / placeholder */
	--color-grey-600: #6b6b6b;    /* muted / secondary text */
	--color-grey-700: #47484a;    /* body text on light surfaces */

	/* Type */
	--font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	--font-display: "Fraunces", Georgia, "Times New Roman", serif;

	--text-xs:   0.8125rem; /* 13px — meta, fine print */
	--text-sm:   0.9375rem; /* 15px — secondary copy */
	--text-base: 1rem;      /* 16px — body */
	--text-lg:   1.125rem;  /* 18px — lead paragraph */
	--text-h3:   1.375rem;  /* 22px — card titles */
	--text-h2:   clamp(1.5rem, 1.3rem + 0.9vw, 2rem);      /* 24px → 32px */
	--text-h1:   clamp(2rem, 1.5rem + 2.2vw, 2.875rem);    /* 32px → 46px */
	--text-display: clamp(2.375rem, 1.75rem + 2.8vw, 3.5rem); /* 38px → 56px, hero-only */
	--text-button: 0.9375rem; /* 15px */

	--leading-tight:  1.1;
	--leading-snug:   1.25;
	--leading-normal: 1.5;
	--leading-relaxed: 1.65;

	--weight-regular: 400;
	--weight-medium: 500;
	--weight-semibold: 600;
	--weight-bold: 700;
	--weight-heavy: 800;

	/* Spacing (4px base) */
	--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: 4.5rem;  /* 72px — major section padding */
	--space-9: 6.5rem;  /* 104px — hero-scale padding */

	/* Misc */
	--radius-sm: 6px;
	--radius-md: 10px;
	--radius-lg: 16px;
	--container-max: 1200px;
	--shadow-sm: 0 1px 2px rgba(23,24,26,0.06), 0 1px 3px rgba(23,24,26,0.04);
	--shadow-md: 0 4px 12px rgba(23,24,26,0.08), 0 2px 4px rgba(23,24,26,0.05);
	--shadow-lg: 0 12px 32px rgba(23,24,26,0.14);
	--focus-ring: 0 0 0 3px rgba(201, 33, 39, 0.45);

	/* Backwards-compat aliases (still referenced by earlier component CSS) */
	--color-red-dark: var(--color-red-deep);
}