/* Pointalize design tokens - SSOT for theme surfaces.
 * Brand colours sync from: pointalize/pointalize-app/lib/core/utils/app_colors.dart
 * (primary #0B6E62, teal scale, accent gold #F2B233, dark surfaces). */
:root {
	/* Teal scale (app teal50..teal900 + brand primary at 600) */
	--plz-teal-50: #ecfdf8;
	--plz-teal-100: #d1faf0;
	--plz-teal-200: #a7f0dd;
	--plz-teal-300: #6fdcc3;
	--plz-teal-400: #3da896;
	--plz-teal-500: #14b8a6;
	--plz-teal-600: #0b6e62;
	--plz-teal-700: #0f766e;
	--plz-teal-800: #085048;
	--plz-teal-900: #064e47;
	/* Mid stop of the logo P gradient (logo-mark.svg). */
	--plz-mark: #2fa79c;

	/* Accent on the teal hero: bright lemon, not the app amber #F2B233 */
	--plz-gold: #f3e84e;
	--plz-gold-light: #fff7a8;
	--plz-gold-dark: #e8d83a;
	/* CTA pills (primary + gold): A lemon, vertical */
	--plz-gradient-cta: linear-gradient(180deg, #fff7a8 0%, #f3e84e 50%, #e8d83a 100%);
	--plz-gradient-cta-hover: linear-gradient(180deg, #fff9bc 0%, #f5ec5a 50%, #ebe04a 100%);
	--plz-cta-inset: inset 0 1px 0 rgba(255, 255, 255, 0.45);
	--plz-cta-inset-hover: inset 0 1px 0 rgba(255, 255, 255, 0.5);

	/* Ink + text (AA on every light surface below) */
	--plz-ink: #111827;
	--plz-text: #1f2937;
	--plz-text-muted: #4b5563;
	--plz-text-on-dark: #f3f4f6;
	--plz-text-on-dark-muted: #c9d6d3;

	/* Surfaces — alt bands stay light/neutral (no mint wash) */
	--plz-bg: #f7f8f9;
	--plz-surface: #ffffff;
	--plz-surface-alt: #f3f4f6;
	--plz-surface-dark: #0a1210;
	--plz-surface-dark-alt: #121c19;
	--plz-border: #e5e7eb;
	--plz-border-strong: #d1d5db;

	/* Brand roles */
	--plz-accent: var(--plz-teal-600);
	--plz-accent-hover: var(--plz-teal-800);
	--plz-accent-subtle: var(--plz-teal-50);
	--plz-link: var(--plz-teal-600);
	--plz-on-accent: #ffffff;
	--plz-gradient-brand: linear-gradient(135deg, var(--plz-teal-800) 0%, var(--plz-teal-600) 55%, var(--plz-teal-400) 100%);
	--plz-gradient-hero: radial-gradient(ellipse 80% 70% at 85% 20%, rgba(61, 168, 150, 0.28) 0%, transparent 60%),
		radial-gradient(ellipse 60% 60% at 10% 90%, rgba(239, 224, 74, 0.12) 0%, transparent 55%),
		linear-gradient(160deg, #0a1210 0%, #0c2420 45%, #064e47 100%);
	--plz-gradient-hero-brand: radial-gradient(ellipse 55% 65% at 78% 45%, rgba(111, 220, 195, 0.32) 0%, transparent 65%),
		radial-gradient(ellipse 50% 50% at 5% 100%, rgba(239, 224, 74, 0.1) 0%, transparent 60%),
		linear-gradient(150deg, #074a43 0%, #0a5f55 45%, #0b6e62 100%);
	--plz-text-on-brand: #e6f4f1;

	/* Typography - system stack, same as the app (no web-font download) */
	--plz-font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--plz-text-xs: 0.75rem;
	--plz-text-sm: 0.875rem;
	--plz-text-base: 1rem;
	--plz-text-lg: 1.125rem;
	--plz-text-xl: 1.25rem;
	--plz-text-hero: clamp(2.1rem, 5.2vw, 3.5rem);
	--plz-text-section: clamp(1.65rem, 3.6vw, 2.4rem);
	--plz-text-h3: clamp(1.15rem, 2vw, 1.35rem);
	--plz-leading-tight: 1.12;
	--plz-leading-body: 1.6;

	/* Spacing (4px base) */
	--plz-space-1: 4px;
	--plz-space-2: 8px;
	--plz-space-3: 12px;
	--plz-space-4: 16px;
	--plz-space-5: 20px;
	--plz-space-6: 24px;
	--plz-space-7: 32px;
	--plz-space-8: 48px;
	--plz-space-9: 64px;
	--plz-section-y: clamp(3.5rem, 8vw, 6rem);

	/* Radii */
	--plz-radius-sm: 6px;
	--plz-radius: 12px;
	--plz-radius-lg: 20px;
	--plz-radius-shot: 22px;
	--plz-radius-pill: 999px;

	/* Shadows + motion */
	--plz-shadow-sm: 0 1px 2px rgba(10, 18, 16, 0.06);
	--plz-shadow: 0 4px 18px rgba(8, 80, 72, 0.08);
	--plz-shadow-lg: 0 18px 48px rgba(8, 80, 72, 0.16);
	--plz-shadow-shot: 0 30px 70px rgba(0, 0, 0, 0.35);
	--plz-transition: 0.2s ease;
	--plz-focus-ring: 0 0 0 3px rgba(20, 184, 166, 0.45);
	--plz-focus-outline: 2px solid var(--plz-teal-600);
	--plz-focus-outline-on-dark: 2px solid var(--plz-gold);

	/* Layout */
	--plz-content-max-width: 1160px;
	--plz-prose-max: 44rem;
	--plz-content-gutter: clamp(1rem, 4vw, 2rem);
	/* Wordmark stays large; mark sits a touch under PureMetrix full-lockup height */
	--plz-logo-h: clamp(2.125rem, 1.95rem + 0.7vw, 2.625rem);
	--plz-header-height: calc(var(--plz-logo-h) + 1.55rem);
	--plz-touch-min: 44px;

	/* Screenshots (store finals are 1080x1920 portrait, device frame baked in) */
	--plz-shot-aspect: 1080 / 1920;
}

@media (max-width: 1023px) {
	:root {
		--plz-logo-h: clamp(1.875rem, 1.8rem + 0.4vw, 2.25rem);
		--plz-header-height: calc(var(--plz-logo-h) + 1.25rem);
	}
}