/*
 * Personal Artworks — Design System Tokens
 * Single source of truth. Values match the current live design exactly.
 * Do not change token values unless the brand intentionally updates.
 */

:root {
	/* ── Brand colours ── */
	--color-bg: #FFFFFF;
	--color-bg-alt: #E4EBD8;
	--color-bg-warm: #E4EBD8;
	--color-bar: #E4EBD8;
	--color-header-bg: #FAFAF8;
	--color-section-seven: #E0E3E6;
	--color-illustration-bg: #E8E8E8;
	--color-callback-panel: rgba(45, 106, 106, 0.08);
	--color-accent: #2D6A6A;
	--color-accent-light: #3D8585;
	--color-accent-hover: #245656;
	--color-accent-dark: #245656;
	--color-logo-turquoise: #6ECACA;
	--color-logo-turquoise-active: #5DBABA;
	--color-dark: #1A1A1A;
	--color-dark-elevated: #2A2A2A;
	--color-text: #5A5A5A;
	--color-text-heading: #1A1A1A;
	--color-text-callback: #434345;
	--color-text-muted: #999999;
	--color-text-footer: #888888;
	--color-text-footer-link: #CCCCCC;
	--color-text-footer-muted: #666666;
	--color-border: #E8E6E2;
	--color-border-footer-social: #444444;
	--color-keyline: #A3A3A3;
	--color-heading-60: rgba(0, 0, 0, 0.6);
	--color-white: #FFFFFF;
	--color-black: #000000;

	/* Legacy palette — preserved where modules still reference pre-redesign colours */
	--color-legacy-purple: #22155f;
	--color-legacy-navy: #274684;
	--color-legacy-blue: #0083cb;
	--color-legacy-green: #3fb34f;
	--color-legacy-red: #ed1c24;
	--color-legacy-gold: #c29e29;
	--color-legacy-grey: #8a8d8f;
	--color-legacy-navy-dark: #082c3e;
	--color-legacy-slick-dot: red;

	/* Module-specific neutrals (exact current values) */
	--color-grey-mid: #686868;
	--color-grey-light: #919191;
	--color-grey-panel: #c1c6c9;
	--color-grey-border-light: #e3e3e3;
	--color-grey-placeholder: #757575;
	--color-cream-panel: #efe4c4;
	--color-cream-soft: #F3F1ED;
	--color-grey-bg: #f1f1f1;
	--color-grey-bg-alt: #f3f4f4;
	--color-grey-bg-panel: #f4f4f4;
	--color-overlay-light: #ffffffb8;

	/* ── Typography ── */
	--font-heading: 'Playfair Display', Georgia, serif;
	--font-heading-modern: 'Playfair Display', Georgia, serif;
	--font-heading-quote: 'Cormorant Garamond', Georgia, serif;
	--font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
	--font-size-header: 1.9375rem;
	--font-size-h2: 26px;
	--line-height-h2: 1.27;
	--font-size-h3: 23px;
	--line-height-h3: 1.35;
	--font-size-subheader: 1.3125rem;
	--font-size-title: var(--font-size-header);
	--font-size-subtitle: var(--font-size-h2);
	--font-size-home-subtitle: var(--font-size-h2);
	--font-size-body: 1rem;
	--font-size-promo: 1.125rem;
	--font-size-caption: 0.875rem;
	--font-size-button: 13px;
	--font-size-form: 14px;
	--font-size-footer-label: 11px;
	--font-size-footer-link: 13px;
	--font-size-footer-quote: 22px;
	--font-size-promo-bar: 27px;
	--line-height-header: 1.27;
	--line-height-subheader: 1.35;
	--line-height-title: var(--line-height-header);
	--line-height-subtitle: var(--line-height-h2);
	--line-height-body: 1.5;
	--line-height-body-theme: 1.75;
	--line-height-footer-quote: 1.6;
	--line-height-footer-copy: 1.7;

	/* ── Layout ── */
	--container-max: 1280px;
	--container-wide: 1400px;
	--container-footer-max: 1440px;
	--container-form-input-max: 493px;
	--container-width: 92%;
	--container-padding: 24px;
	--block-gap: 0.5in;
	--home-section-padding: 0.75in;
	--section-padding: 0;
	--transition: 0.3s ease;

	/* ── Spacing (exact values used across modules) ── */
	--spacing-xs: 8px;
	--spacing-sm: 16px;
	--spacing-md: 24px;
	--spacing-lg: 32px;
	--spacing-xl: 48px;
	--spacing-2xl: 64px;
	--spacing-footer-topbar-y: 48px;
	--spacing-footer-main-top: 64px;
	--spacing-footer-main-bottom: 48px;
	--spacing-form-field-gap: 16px;
	--spacing-form-heading-bottom: 32px;
	--spacing-btn-padding-y: 16px;
	--spacing-btn-padding-x: 36px;
	--spacing-grid-col: 25px;

	/* ── Buttons ── */
	--btn-font-size: var(--font-size-button);
	--btn-font-weight: 500;
	--btn-letter-spacing: 0.12em;
	--btn-padding: var(--spacing-btn-padding-y) var(--spacing-btn-padding-x);
	--btn-radius: 0;
	--btn-bg: var(--color-accent);
	--btn-bg-hover: var(--color-accent-hover);
	--btn-color: var(--color-white);

	/* ── Forms ── */
	--form-input-border: 1px solid var(--color-border);
	--form-input-padding: 14px 16px;
	--form-input-font-size: var(--font-size-form);
	--form-input-radius: 0;
	--form-input-bg: var(--color-white);
	--form-placeholder-color: var(--color-text-muted);

	/* ── Borders & radius ── */
	--border-radius-none: 0;
	--border-radius-sm: 3px;
	--border-radius-md: 4px;

	/* ── Header ── */
	--header-logo-width: 162px;
}

@media (max-width: 550px) {
	:root {
		--font-size-title: 3rem;
		--font-size-subtitle: 2.0625rem;
		--font-size-footer-quote: 18px;
	}
}

/* Preserved inline colour replacements */
.piranha-callback-heading {
	color: var(--color-text-callback);
}