/* ==========================================================================
   TOKENS: everything that changes per site lives in this file.

   Values come from /design/design.md (David Garcia Web Design, Blueprint).
   Class names never change; only the values below do. main.css reads these
   variables and is not edited per site except for component styling the
   comps call for.
   ========================================================================== */


/* ---------- Fonts (self-hosted woff2 in /assets/fonts) ----------
   design.md section 2. Clash Grotesk and General Sans are Fontshare files
   (ITF FFL): use them as shipped, never convert, subset or rename them.
   JetBrains Mono is SIL OFL. */

@font-face {
	font-family: "Clash Grotesk";
	src: url("../fonts/ClashGrotesk-Variable.woff2") format("woff2");
	font-weight: 200 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "General Sans";
	src: url("../fonts/GeneralSans-Variable.woff2") format("woff2");
	font-weight: 200 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "JetBrains Mono";
	src: url("../fonts/JetBrainsMono-Variable.woff2") format("woff2");
	font-weight: 100 800;
	font-style: normal;
	font-display: swap;
}


:root {

	/* ---------- Color roles ---------- */
	--primary: #1b1f36;
	--off-primary: #474c66;
	--secondary: #4f5b9c;
	--tertiary: #aeb6e4;
	--accent: #f0d84a;
	--off-accent: #f6e37a;
	--white: #f8f9fb;
	--off-white: #b4bad6;

	/* Roles added for this brand (approved) */
	--primary-deep: #171a2e;
	--primary-soft: #2a2f4d;
	--lilac: #bdc5e8;

	/* Status colors (form errors, success messages, alerts) */
	--success: #5bd49a;
	--danger: #ff8f8f;

	/* ---------- Lines and blueprint grid ----------
	   Translucent, so they are tokens, not roles. Dark values first; the
	   light and accent variants are used on .white-bg and .accent-bg. */
	--line: rgba(189, 197, 232, 0.2);
	--line-strong: rgba(189, 197, 232, 0.42);
	--line-ink: rgba(27, 31, 54, 0.16);
	--line-ink-strong: rgba(27, 31, 54, 0.38);

	--crop-mark: rgba(189, 197, 232, 0.55);
	--crop-mark-light: rgba(27, 31, 54, 0.5);
	--crop-mark-accent: rgba(27, 31, 54, 0.6);

	--grid-minor: rgba(189, 197, 232, 0.035);
	--grid-major: rgba(189, 197, 232, 0.07);
	--grid-minor-light: rgba(79, 91, 156, 0.05);
	--grid-major-light: rgba(79, 91, 156, 0.09);

	/* ---------- Isometric stack ----------
	   RGB triplets, so a plate can take any alpha. Dark sections, then light. */
	--plate-ink: 110, 119, 170;
	--plate-mid: 143, 151, 200;
	--plate-light: 189, 197, 232;
	--plate-lime: 240, 216, 74;
	--plate-ink-lt: 27, 31, 54;
	--plate-mid-lt: 79, 91, 156;
	--plate-lime-lt: 150, 128, 20;
	--dim-line: rgba(180, 186, 214, 0.7);

	/* ---------- Fonts ---------- */
	--font-heading: "Clash Grotesk", ui-sans-serif, system-ui, sans-serif;
	--font-body: "General Sans", ui-sans-serif, system-ui, sans-serif;
	--font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

	/* ---------- Typography ----------
	   Sizes use clamp(min, preferred, max): the min applies at mobile
	   (375px), the max at desktop (1400px), scaling smoothly in between.
	*/
	--heading-xl-size: clamp(2.9375rem, 2rem + 4vw, 5.5rem);
	--heading-xl-weight: 600;
	--heading-xl-lh: 0.98;
	--heading-xl-ls: -0.03em;

	--heading-lg-size: clamp(2.625rem, 1.756rem + 3.707vw, 5rem);
	--heading-lg-weight: 600;
	--heading-lg-lh: 1;
	--heading-lg-ls: -0.03em;

	--heading-md-size: clamp(2rem, 1.451rem + 2.341vw, 3.5rem);
	--heading-md-weight: 500;
	--heading-md-lh: 1.06;
	--heading-md-ls: -0.025em;

	--heading-sm-size: clamp(1.75rem, 1.384rem + 1.561vw, 2.75rem);
	--heading-sm-weight: 500;
	--heading-sm-lh: 1.05;
	--heading-sm-ls: -0.02em;

	--card-heading-size: clamp(1.375rem, 1.2375rem + 0.585vw, 1.75rem);
	--card-heading-weight: 500;
	--card-heading-lh: 1.15;
	--card-heading-ls: -0.01em;

	--subheading-size: clamp(1.125rem, 1.0793rem + 0.195vw, 1.25rem);
	--subheading-weight: 400;
	--subheading-lh: 1.5;
	--subheading-ls: 0;

	--body-size: clamp(1rem, 0.977rem + 0.0976vw, 1.0625rem);
	--body-weight: 400;
	--body-lh: 1.55;
	--body-ls: 0;

	--eyebrow-size: clamp(0.8125rem, 0.7896rem + 0.0976vw, 0.875rem);
	--eyebrow-weight: 400;
	--eyebrow-lh: 1.4;
	--eyebrow-ls: 0.06em;

	--small-size: 0.875rem;
	--small-weight: 400;
	--small-lh: 1.45;
	--small-ls: 0.02em;

	/* .caps modifier: uppercase comes from .caps, not from any text style */
	--caps-ls: 0.06em;

	--text-link-weight: 600;
	--text-link-decoration: underline;
	--text-link-offset: 4px;
	--text-link-thickness: 1.5px;

	/* ---------- Buttons ----------
	   Parallelograms: the slant is the shape, so there is no radius. */
	--btn-font-size: 1.125rem;
	--btn-font-weight: 600;
	--btn-padding-y: 18px;
	--btn-padding-x: 30px;
	--btn-min-height: 44px;
	--btn-radius: 0;
	--btn-border-width: 1.5px;
	--btn-slant: 14px;

	--btn-accent-bg: var(--accent);
	--btn-accent-text: var(--primary);
	--btn-accent-hover-bg: var(--off-accent);
	--btn-accent-hover-text: var(--primary);

	--btn-outline-color: var(--white);
	--btn-outline-hover-bg: var(--accent);
	--btn-outline-hover-text: var(--primary);

	/* ---------- Forms ---------- */
	--input-bg: var(--primary-deep);
	--input-text: var(--white);
	--input-border: #6e7495;
	--input-focus-border: var(--accent);
	--input-radius: 0;
	--input-padding-y: 14px;
	--input-padding-x: 16px;
	--input-height: 52px;
	--form-error: var(--danger);
	--form-success: var(--success);

	/* ---------- Motion ----------
	   design.md section 7: expressive in the hero, subtle everywhere else. */
	--motion-duration: 600ms;          /* entry animations */
	--motion-distance: 24px;           /* how far elements travel on entry */
	--motion-ease: cubic-bezier(0.22, 1, 0.36, 1);  /* ease-out: fast start, soft landing */
	--motion-stagger: 80;              /* ms between staggered items (number, read by motion.js) */
	--motion-hover: 200ms;             /* hover, focus and press feedback */
	--hover-lift: -4px;                /* how far cards rise on hover */

	/* Signature moment: the hero stack, once on load (design.md section 7) */
	--sig-explode-duration: 1.2s;
	--sig-explode-delay: 0.2s;
	--sig-explode-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--sig-label-delay: 1.1s;
	--sig-label-duration: 0.6s;
	--sig-dim-delay: 1.25s;
	--sig-recede-delay: 2.1s;
	--sig-recede-duration: 1.4s;
	--sig-mark-delay: 2.3s;
	--sig-mark-duration: 0.7s;
	--sig-mark-ease: cubic-bezier(0.6, 0, 0.2, 1);

	/* ---------- Layout ---------- */
	--section-pad-y: 136px;            /* above and below section content (88px on mobile) */
	--gutter-x: 12px;                  /* Bootstrap's container padding; 20px on mobile */

	/* ---------- UI ---------- */
	--radius: 0;
	--card-radius: 0;
	--shadow: none;
	--transition: 0.2s ease;
}

@media (max-width: 767.98px) {
	:root {
		--section-pad-y: 88px;
		--gutter-x: 20px;
	}
}


/* ==========================================================================
   COLOR ROLE CLASSES
   One text, one -bg and one border- class per role. primary-deep,
   primary-soft and lilac are this brand's added roles (approved).
   ========================================================================== */

/* Text */
.primary { color: var(--primary); }
.off-primary { color: var(--off-primary); }
.secondary { color: var(--secondary); }
.tertiary { color: var(--tertiary); }
.accent { color: var(--accent); }
.off-accent { color: var(--off-accent); }
.white { color: var(--white); }
.off-white { color: var(--off-white); }
.primary-deep { color: var(--primary-deep); }
.primary-soft { color: var(--primary-soft); }
.lilac { color: var(--lilac); }
.success { color: var(--success); }
.danger { color: var(--danger); }

/* Backgrounds */
.primary-bg { background-color: var(--primary); }
.off-primary-bg { background-color: var(--off-primary); }
.secondary-bg { background-color: var(--secondary); }
.tertiary-bg { background-color: var(--tertiary); }
.accent-bg { background-color: var(--accent); }
.off-accent-bg { background-color: var(--off-accent); }
.white-bg { background-color: var(--white); }
.off-white-bg { background-color: var(--off-white); }
.primary-deep-bg { background-color: var(--primary-deep); }
.primary-soft-bg { background-color: var(--primary-soft); }
.lilac-bg { background-color: var(--lilac); }
.success-bg { background-color: var(--success); }
.danger-bg { background-color: var(--danger); }

/* Borders (!important to win over Bootstrap's .border utilities) */
.border-primary { border-color: var(--primary) !important; }
.border-off-primary { border-color: var(--off-primary) !important; }
.border-secondary { border-color: var(--secondary) !important; }
.border-tertiary { border-color: var(--tertiary) !important; }
.border-accent { border-color: var(--accent) !important; }
.border-off-accent { border-color: var(--off-accent) !important; }
.border-white { border-color: var(--white) !important; }
.border-off-white { border-color: var(--off-white) !important; }
.border-primary-deep { border-color: var(--primary-deep) !important; }
.border-primary-soft { border-color: var(--primary-soft) !important; }
.border-lilac { border-color: var(--lilac) !important; }
.border-success { border-color: var(--success) !important; }
.border-danger { border-color: var(--danger) !important; }