/*
 * Design tokens for popcornimages_standard.
 * Color values are re-declared inline in index.php/component.php from the
 * template's backend params (Template Manager > Options > Colors), so the
 * values below are only the fallback/defaults used if that block is missing.
 *
 * Breakpoints (not expressible as custom properties, used consistently
 * across layout.css/components.css/portfolio.css):
 *   576px  - phones -> small tablets (mobile nav breakpoint)
 *   768px  - small tablets -> tablets
 *   992px  - tablets -> desktop
 *   1200px - desktop -> wide desktop
 */

:root {
	--pi-color-primary: #293553;
	--pi-color-secondary: #0056b3;
	--pi-color-accent: #7abaff;
	/* Blue, not the site's original gold - matches --pi-color-link / --pi-color-primary. */
	--pi-color-highlight: #124c9b;
	--pi-color-highlight-hover: #293553;
	--pi-color-link: #124c9b;
	--pi-color-text: #191919;
	--pi-color-background: #ffffff;
	--pi-color-muted: #6d757e;
	--pi-color-border: #e0e0e0;
	--pi-color-header-border: #0087cc;

	--pi-font-family: 'Poppins', sans-serif;
	--pi-font-family-nav: 'Poppins', sans-serif;
	--pi-font-size-base: 16px;
	--pi-line-height-base: 1.5rem;

	--pi-space-1: 4px;
	--pi-space-2: 8px;
	--pi-space-3: 12px;
	--pi-space-4: 16px;
	--pi-space-5: 24px;
	--pi-space-6: 32px;
	--pi-space-7: 48px;
	--pi-space-8: 64px;
	--pi-space-9: 80px;

	--pi-radius-sm: 3px;
	--pi-radius-md: 5px;
	--pi-radius-lg: 8px;

	--pi-shadow-header: 0 0 8px rgba(111, 111, 111, .66);
	--pi-shadow-card: 0 2px 10px rgba(0, 0, 0, .08);
	--pi-shadow-card-hover: 0 10px 24px rgba(0, 0, 0, .14);

	--pi-transition-fast: .15s ease-in-out;
	--pi-transition-base: .25s ease;

	--pi-container-max-width: none;
	--pi-container-gutter: 10%;
}