/**
 * Barndoor v12 design tokens.
 * Fonts are self-hosted here (travel with git). Colors, type sizes and --radius live in ACSS settings
 * (--primary forest, --secondary mint, --accent/--tertiary clay, --base ink, --body-bg-color cream);
 * this file adds the v12 names ACSS has no slot for, so v12 CSS can be ported as written.
 */

@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/poppins-400.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("../assets/fonts/poppins-500.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("../assets/fonts/poppins-600.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("../assets/fonts/poppins-700.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/jetbrains-mono-400.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../assets/fonts/jetbrains-mono-500.woff2") format("woff2"); }

:root {
	/* Families */
	--font-display: "Poppins", system-ui, sans-serif;
	--font-body: "Poppins", system-ui, sans-serif;
	--font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

	/* Palette (ACSS-backed names first, v12-only extras after) */
	--color-forest: var(--primary);
	--color-forest-2: var(--primary-hover);
	--color-forest-3: var(--primary-dark);
	--color-mint: var(--secondary);
	--color-mint-2: var(--secondary-ultra-light);
	--color-clay-orange: var(--accent);
	--color-ink: var(--base);
	--color-cream: var(--body-bg-color);
	/* Status colors: hex on purpose, ACSS status palettes are switched off (their vars don't exist). */
	--color-success: #3D8B5F;
	--color-warning: #E8B22A;
	--color-gold: #E8B22A;
	--color-danger: #C5462F;
	--color-info: #2E5BC4;
	--color-royal: #2E5BC4;
	--color-ink-2: #5C6B62;
	--color-ink-3: #8A968F;
	--color-paper: #FFFFFF;
	--color-sage: #8FB69C;
	--color-sage-2: #7AA689;
	--color-peach: #F6B8A4;
	--color-hairline: #E6E3DC;
	--color-hairline-2: #EFEDE7;
	--color-success-bg: #E3F1E8;
	--color-warning-bg: #FCF1D3;
	--color-danger-bg: #FBE4DD;
	--color-info-bg: #DEE7FA;
	--v12-green: #2C6B47;          /* homepage card eyebrows (--hv-green) */
	--v12-text-2: #44534C;         /* homepage secondary text: mode cards, modes intro (was a hex in 7338 customCss) */
	--v12-on-dark-muted: #A9C0B2;  /* homepage "Trusted by" eyebrow on the dark band */
	--v12-sage-light: #9CC0A8;     /* homepage sage eyebrow on the dark band (hv-eyebrow--sage, 12px: 4.31:1 with sage, AA with this) */
	--v12-rule: #EBEBEB;           /* divider lines on the blog index (723) and post template (759): v11 grey, no ACSS slot */

	/* Type scale (px, v12) */
	--fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-15: 15px; --fs-16: 16px; --fs-17: 17px; --fs-18: 18px;
	--fs-20: 20px; --fs-24: 24px; --fs-28: 28px; --fs-32: 32px; --fs-40: 40px; --fs-48: 48px; --fs-56: 56px;
	--fs-72: 72px; --fs-96: 96px;
	--lh-tight: 1.05; --lh-snug: 1.15; --lh-normal: 1.4; --lh-body: 1.55; --lh-loose: 1.7;
	--tr-tightest: -0.03em; --tr-tight: -0.02em; --tr-normal: 0; --tr-eyebrow: 0.08em;

	/* Radii */
	--radius-xs: 6px; --radius-sm: 10px; --radius-md: 16px; --radius-lg: 20px; --radius-xl: 28px; --radius-pill: 999px;

	/* Shadows */
	--shadow-sm: 0 1px 2px rgba(15, 26, 21, 0.06);
	--shadow-md: 0 8px 24px -8px rgba(15, 26, 21, 0.12);
	--shadow-lg: 0 24px 48px -16px rgba(15, 26, 21, 0.18);

	/* Motion */
	--dur-hover: 120ms; --dur-menu: 200ms; --dur-reveal: 320ms;
	--ease-quiet: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
	:root { --dur-hover: 0ms; --dur-menu: 0ms; --dur-reveal: 0ms; }
}

code, kbd, samp, pre { font-family: var(--font-mono); }

/* Header/footer template patches moved to Bricks element styles in templates 1968 / 5050 / 85 (native phase 6, native/phase6.md). */

/* ---- brand review Batch 1 (2026-10-16), what is left after the native Bricks migration (native/phase7.md) ---- */
/* Eyebrows: sub-pages use an ACSS pill (text--uppercase text--xs rounded--xl + bg/border/padding utilities). v12 eyebrow =
   12px, ink-2, no pill; Poppins with .08em tracking (Marker.io BW1-109). On dark: sage (v12-bands.css, band classes).
   Kept here: the selector is a compound of three ACSS-owned utility classes, so no Bricks class can own it. */
.text--uppercase.text--xs.rounded--xl {
	font-family: var(--font-mono); font-size: var(--fs-12); font-weight: 500; letter-spacing: .16em; line-height: 1.4;
	color: var(--color-ink-2); background: none; border: 0; border-radius: 0; padding: 0; box-shadow: none;
}
body :is(.text--uppercase.text--xs.rounded--xl, .tas-card-category) { font-family: var(--font-body); letter-spacing: .08em; }
/* Blog slider cards (component nfpbmd, slider fvoqxy, blog index 723): the card markup is HTML typed into the slider item,
   so no element owns it, and the component's v11 custom CSS sets Playfair and #B4FFE4 with !important.
   Titles: Poppins 600, upright, tight tracking. Category tag: v12 pill (mint fill, sage hairline, 12px uppercase forest). */
:is(.tas-card-title, .tas-card-title a) {
	font-family: var(--font-display) !important; font-style: normal !important; font-weight: 600 !important; letter-spacing: -0.03em !important;
}
.tas-card-title a { color: var(--color-ink) !important; }
body .tas-card-category {
	background: var(--color-mint) !important; border: 1px solid color-mix(in srgb, var(--color-sage) 35%, transparent) !important;
	border-radius: var(--radius-pill) !important; padding: 6px 14px !important;
	font-size: var(--fs-12); font-weight: 500; line-height: 1.4; text-transform: uppercase; color: var(--color-forest);
}