/*
  Design tokens — SOURCE OF TRUTH for the redesigned pages.

  These are literal values, not aliases. The theme copy at
  ../../themes/brave/assets/css/tokens.css re-exports WordPress's theme.json
  presets instead, which only exist when the block theme is active. This plugin
  has to work under the client's current Cura theme, so it carries real values.

  If you change a value here, change it in themes/brave/theme.json too — see
  README-DEPLOY.md, "Keeping the two token copies in sync".

  Contrast ratios are recorded where they matter; every pairing used for text
  meets WCAG 2.2 AA.
*/
:root {
	/* Core — black & white (client requirement) */
	--ink: #0A0A0A; /* on white: 19.8:1 AAA */
	--white: #FFFFFF;

	/* Neutral gray ramp */
	--gray-50: #F7F7F7;
	--gray-100: #EFEFEF;
	--gray-200: #E2E2E2;
	--gray-300: #C9C9C9;
	--gray-400: #A3A3A3;
	--gray-500: #6E6E6E; /* on white: 5.1:1 AA body */
	--gray-600: #545454; /* on white: 7.6:1 AAA */
	--gray-700: #3D3D3D;
	--gray-800: #262626;
	--gray-900: #141414;

  /* Brave Blue — donation CTAs and the Books program accent */
	--blue-300: #9CC9FF;
	--blue-400: #1E82F7;
	--blue-600: #1766C4; /* CTA fill w/ white text: 5.6:1 AA */
	--blue-700: #10498F; /* text on white: 8.9:1 AAA */

	/* Program accents — drawn from the colorful legacy homepage and program
	   artwork. Dark values are contrast-safe text/borders; tints are decorative
	   surfaces and are never relied on alone to convey meaning. */
	--orange-100: #FFF1E5;
	--orange-300: #FFB866;
	--orange-700: #9A3F00;
	--green-100: #EAF5EF;
	--green-300: #7BC69E;
	--green-700: #285F43;

	/* Semantic aliases */
	--text-body: var(--ink);
	--text-muted: var(--gray-600);
	--text-caption: var(--gray-500);
	--text-on-dark: var(--white);
	--text-on-accent: var(--white);
	--surface-page: var(--white);
	--surface-card: var(--white);
	--surface-subtle: var(--gray-50);
	--surface-dark: var(--ink);
	--border-default: var(--gray-200);
	--border-strong: var(--ink);
	--border-input: var(--gray-500);
	--cta-donate-bg: var(--blue-600);
	--cta-donate-text: var(--white);
	--cta-donate-hover: var(--blue-700);
	--cta-donate-press: #0D3A73;
	--link: var(--ink);
	--link-accent: var(--blue-700);
	--program-books: var(--blue-700);
	--program-books-tint: #E8F2FF;
	--program-health: var(--orange-700);
	--program-health-tint: var(--orange-100);
	--program-bucks: var(--green-700);
	--program-bucks-tint: var(--green-100);
	--overlay-hero: rgba(10, 10, 10, 0.62);
	--focus-ring: var(--ink);
	--focus-ring-on-dark: var(--blue-300);

	/* Typography — Jost, matching production's actual font (see fonts.css for
	   why: it's what Cura already loads via RadiantThemes/Elementor/ACF). One
	   family for both display and body, since production has no serif at all
	   — this intentionally drops the original serif/sans pairing design. */
	--font-display: 'Jost', 'Segoe UI', system-ui, sans-serif;
	--font-body: 'Jost', 'Segoe UI', system-ui, sans-serif;
	--text-display: 56px;
	--lh-display: 1.1;
	--text-h1: 40px;
	--lh-h1: 1.15;
	--text-h2: 32px;
	--lh-h2: 1.2;
	--text-h3: 24px;
	--lh-h3: 1.3;
	--text-h4: 20px;
	--lh-h4: 1.4;
	--text-body-lg: 18px;
	--text-body-md: 16px;
	--lh-body: 1.6;
	/* Deliberately --text-caption-size, not --text-caption: the source design
	   system collided a 14px size and the gray-500 colour under one name. */
	--text-caption-size: 14px;
	--lh-caption: 1.5;
	--text-button: 16px;
	--weight-regular: 400;
	--weight-medium: 500;
	--weight-semibold: 600;
	--weight-bold: 700;
	--tracking-caps: 0.08em;

	/* Spacing (8px base) */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 16px;
	--space-4: 24px;
	--space-5: 32px;
	--space-6: 48px;
	--space-7: 64px;
	--space-8: 96px;
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 12px;
	--radius-pill: 999px;
	--shadow-card: 0 1px 3px rgba(10, 10, 10, 0.08), 0 4px 16px rgba(10, 10, 10, 0.06);
	--shadow-raised: 0 4px 12px rgba(10, 10, 10, 0.14);
	--touch-target: 44px;
	--container-max: 1160px;

	/* Motion */
	--ease-standard: cubic-bezier(0.2, 0, 0, 1);
	--dur-fast: 150ms;
	--dur-med: 220ms;
	--dur-slow: 300ms;
	--reveal-shift: 12px;
}