/* QDE 2026 design tokens — Brand System v3.0
 * Sourced directly from the QDE Brand Design System handoff.
 * All tokens are scoped under .qde-2026 so they port cleanly into Squarespace
 * code injection without colliding with template variables.
 */

.qde-2026 {
	/* Brand primitives, FIXED */
	--qde-red:  #E13219;
	--qde-ink:  #000000;

	/* Background neutrals (v3.0 spec) */
	--paper:    #FFFFFF;       /* default page surface */
	--bone:     #F6F6F6;       /* secondary surface, soft tile */

	/* Accent — for highlight callouts only (v3.0 names) */
	--accent-blue:   #1B2A4E;
	--accent-yellow: #E5A823;

	/* Secondary — for programs and supporting graphic elements */
	--sec-cyan:   #05AED5;
	--sec-purple: #C35AE8;
	--sec-green:  #97C804;
	--sec-teal:   #07D0BD;
	--sec-orange: #F79C0D;
	--sec-indigo: #5A52B5;
	--sec-lime:   #D1CF01;
	--sec-red2:   #E95D0E;

	/* Rule and muted */
	--rule:  rgba(0, 0, 0, 0.12);
	--muted: #6B6B66;

	/* Legacy aliases — keep so existing component CSS continues to render
	 * while we migrate. New CSS should reference the v3.0 names above. */
	--qde-bg:        var(--paper);
	--qde-bg-card:   var(--paper);
	--qde-bg-deep:   var(--qde-ink);
	--qde-ink-soft:  var(--muted);

	/* State (single-state colour rules) */
	--qde-state-success: #2C7A4B;
	--qde-state-warning: #B8761A;
	--qde-state-error:   #C0392B;

	/* Typography — Roboto, all weights via Google Fonts */
	--qde-font-headline: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
	--qde-font-body:     "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font:              "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;

	--qde-weight-light:    300;
	--qde-weight-regular:  400;
	--qde-weight-medium:   500;
	--qde-weight-bold:     700;
	--qde-weight-black:    900;

	/* Type scale — chapter 03 typography spec is the source of truth.
	 * eyebrow 13 / caption 15 / body 17 / lede 20 / h3 22 / section 36 / page-title 56 / display 128. */
	--qde-text-xs:   13px;          /* eyebrow, tag-mono */
	--qde-text-sm:   15px;          /* caption, metadata */
	--qde-text-base: 17px;          /* body */
	--qde-text-md:   20px;          /* lede */
	--qde-text-lg:   22px;          /* h3 block heading */
	--qde-text-xl:   clamp(28px, 3.4vw, 36px);   /* h2 / section */
	--qde-text-2xl:  clamp(40px, 4.6vw, 56px);   /* h1 / page title */
	--qde-text-3xl:  clamp(48px, 5.6vw, 80px);   /* d2 display */
	--qde-text-4xl:  clamp(64px, 8vw, 128px);    /* d1 display */

	--qde-leading-tight:    0.92;
	--qde-leading-snug:     1.05;
	--qde-leading-normal:   1.55;
	--qde-leading-relaxed:  1.6;

	--qde-tracking-tight:   -0.04em;     /* display */
	--qde-tracking-snug:    -0.02em;     /* h1 / h2 */
	--qde-tracking-normal:  0;
	--qde-tracking-wide:    0.04em;
	--qde-tracking-eyebrow: 0.1em;       /* uppercase eyebrow */
	--qde-tracking-mono:    0.08em;      /* tag-mono uppercase */
	--qde-tracking-wider:   0.14em;      /* eb-row, num tag, lowercase meta */

	/* Editorial display ramp — used by the page-opener .ed-hero__title.
	 * David called the prior 128px ceiling too large; tightened to 80px max so
	 * the hero reads as a heading, not a billboard. Scales down to 48px mobile.
	 */
	--qde-text-display: clamp(48px, 5vw, 80px);

	/* Soft and mute ink ramp — used by editorial small text (lede aside, num tags). */
	--ink-soft: #555555;
	--ink-mute: #888888;

	/* Spacing — tightened past v3.0's 96/56. David asked for less. */
	--qde-space-1:  8px;
	--qde-space-2:  12px;
	--qde-space-3:  16px;
	--qde-space-4:  24px;
	--qde-space-5:  28px;
	--qde-space-6:  32px;
	--qde-space-8:  40px;
	--qde-space-10: 48px;
	--qde-space-12: clamp(40px, 5vw, 56px);    /* between sections */
	--qde-space-16: clamp(48px, 6vw, 64px);    /* hero blocks */
	--qde-space-24: clamp(56px, 7vw, 80px);    /* book chapters */

	/* Layout — full-width responsive with v3.0's 1400px container cap */
	--qde-content-narrow:  720px;
	--qde-content-default: 1120px;
	--qde-content-wide:    1280px;
	--qde-content-bleed:   1400px;
	--qde-page-gutter:     clamp(20px, 2.4vw, 40px);   /* v3.0 says 56px; we run tighter */

	/* Section horizontal padding. At viewports wider than --qde-content-bleed
	 * the centred 1400px-capped header + footer leave dead space on either
	 * side; this max() keeps section content visually aligned with the header
	 * logo + footer brand-tag at every viewport width. Below the bleed cap it
	 * collapses back to the standard gutter. */
	--qde-section-pad: max(var(--qde-page-gutter), calc((100vw - var(--qde-content-bleed)) / 2 + var(--qde-page-gutter)));

	/* Geometric line motif (kept from earlier work, lower contrast) */
	--qde-geo-line:        rgba(0, 0, 0, 0.10);
	--qde-geo-line-strong: rgba(0, 0, 0, 0.22);
	--qde-geo-stroke:      1px;

	/* Sub-brand mark heights — Compass / Conquer / Context source PNGs are
	 * 172px tall but different widths, so we ALWAYS lock height. */
	--mark-h-sm: 28px;
	--mark-h-md: 56px;
	--mark-h-lg: 96px;

	/* Motion vocabulary */
	--qde-ease-standard: cubic-bezier(0.2, 0.0, 0.2, 1);
	--qde-ease-soft:     cubic-bezier(0.4, 0.0, 0.2, 1);
	--qde-dur-quick:  120ms;
	--qde-dur-medium: 240ms;
	--qde-dur-slow:   480ms;

	/* Container max-width alias for v3.0 sites */
	--maxw: var(--qde-content-bleed);
}