/**
 * Grady Property Restoration — Design Tokens
 * Sprint 2B · Single source of truth for the platform design system
 *
 * Import before component styles. Do not hardcode values in components.
 */

:root {
	/* —— Colors — Primitive —— */
	--black: #090909;
	--charcoal: #151515;
	--graphite: #222222;
	--graphite-card: rgba(34, 34, 34, 0.85);
	--graphite-elevated: #2a2a2a;
	--graphite-map: #121212;
	--graphite-map-mid: #1a1a1a;
	--ivory: #f3efe7;
	--limestone: #d8d0c3;
	--bronze: #b99b68;
	--bronze-dark: #8f744d;
	--bronze-wordmark: #b89a64;
	--white: #ffffff;
	--placeholder: #1a1a1a;
	--placeholder-deep: #141414;

	/* —— Colors — Semantic —— */
	--color-bg-page: var(--black);
	--color-bg-charcoal: var(--charcoal);
	--color-bg-graphite: var(--graphite);
	--color-bg-ivory: var(--ivory);
	--color-bg-limestone: var(--limestone);
	--color-bg-placeholder: var(--placeholder);
	--color-bg-placeholder-deep: var(--placeholder-deep);

	/* —— Semantic text tokens (Sprint 4.2 — WCAG AA) —— */
	--text-primary-dark: rgba(243, 239, 231, 0.92);
	--text-secondary-dark: rgba(243, 239, 231, 0.78);
	--text-primary-light: rgba(9, 9, 9, 0.88);
	--text-secondary-light: rgba(9, 9, 9, 0.72);
	--heading-dark: var(--white);
	--heading-light: var(--black);
	--link-dark: var(--bronze);
	--link-light: var(--bronze-dark);
	--muted-dark: rgba(243, 239, 231, 0.62);
	--muted-light: rgba(9, 9, 9, 0.62);
	--text-decorative-dark: rgba(243, 239, 231, 0.48);
	--text-decorative-light: rgba(9, 9, 9, 0.48);

	/* —— Theme context (Sprint 4.6C) — set once per surface; children inherit —— */
	--text-primary: var(--text-primary-dark);
	--text-secondary: var(--text-secondary-dark);
	--text-muted: var(--muted-dark);
	--heading: var(--heading-dark);
	--eyebrow: var(--link-dark);
	--caption: var(--muted-dark);
	--link: var(--link-dark);
	--link-hover: var(--ivory);
	--link-decoration: rgba(185, 155, 104, 0.45);
	--list-marker: var(--link-dark);
	--list-separator: rgba(185, 155, 104, 0.14);
	--utility-text: var(--text-secondary-dark);
	--placeholder-text: var(--muted-dark);
	--accent: var(--bronze);
	--accent-strong: var(--bronze-dark);
	--accent-hover: var(--ivory);

	/* Map InfoWindow renders on white — fixed light context */
	--infowindow-text: var(--text-primary-light);
	--infowindow-muted: var(--text-secondary-light);
	--infowindow-link: var(--bronze-dark);

	--color-text-primary: var(--ivory);
	--color-text-inverse: var(--black);
	--color-text-white: var(--white);
	--color-text-bronze: var(--bronze);
	--color-text-bronze-dark: var(--bronze-dark);
	--color-text-bronze-wordmark: var(--bronze-wordmark);

	--color-text-on-dark: var(--text-primary-dark);
	--color-text-on-dark-body: var(--text-primary-dark);
	--color-text-on-dark-muted: var(--text-secondary-dark);
	--color-text-on-dark-subtle: var(--muted-dark);
	--color-text-on-dark-faint: var(--muted-dark);
	--color-text-on-dark-whisper: rgba(243, 239, 231, 0.55);
	--color-text-on-dark-tag: rgba(243, 239, 231, 0.65);
	--color-text-on-dark-list: rgba(243, 239, 231, 0.72);

	--color-text-on-light: var(--text-primary-light);
	--color-text-on-light-muted: var(--text-secondary-light);
	--color-text-on-light-icon: var(--muted-light);
	--color-text-on-light-inverse-muted: var(--text-secondary-light);

	--color-text-placeholder: var(--text-decorative-dark);
	--color-text-placeholder-faint: rgba(243, 239, 231, 0.42);

	--color-surface-review: rgba(243, 239, 231, 0.65);
	--color-surface-pin: rgba(9, 9, 9, 0.75);
	--color-surface-phone-hover: rgba(185, 155, 104, 0.06);
	--color-surface-nav-mobile: rgba(9, 9, 9, 0.96);

	/* —— Dividers & borders —— */
	--divider-bronze: rgba(185, 155, 104, 0.35);
	--divider-bronze-soft: rgba(185, 155, 104, 0.25);
	--divider-bronze-faint: rgba(185, 155, 104, 0.2);
	--divider-bronze-whisper: rgba(185, 155, 104, 0.18);
	--divider-bronze-muted: rgba(185, 155, 104, 0.15);
	--divider-bronze-dashed: rgba(185, 155, 104, 0.15);
	--divider-bronze-icon: rgba(185, 155, 104, 0.4);
	--divider-bronze-process: rgba(185, 155, 104, 0.3);
	--divider-ivory: rgba(243, 239, 231, 0.12);
	--divider-ivory-faint: rgba(243, 239, 231, 0.08);
	--divider-outline: rgba(185, 155, 104, 0.55);

	--border-width: 1px;
	--border-bronze: var(--border-width) solid var(--divider-bronze);
	--border-light: var(--border-width) solid var(--divider-ivory);
	--border-review: var(--border-width) solid var(--divider-bronze-whisper);
	--border-placeholder: var(--border-width) solid var(--divider-bronze-muted);
	--border-pin: var(--border-width) solid var(--divider-bronze);

	/* Legacy aliases (migrate components to semantic names over time) */
	--color-black: var(--black);
	--color-charcoal: var(--charcoal);
	--color-graphite: var(--graphite);
	--color-ivory: var(--ivory);
	--color-limestone: var(--limestone);
	--color-bronze: var(--bronze);
	--color-bronze-dark: var(--bronze-dark);
	--color-white: var(--white);
	--divider: var(--divider-bronze);
	--border: var(--border-bronze);
	--placeholder-bg: var(--placeholder);
	--placeholder-bg-deep: var(--placeholder-deep);

	/* —— Spacing (8px grid) —— */
	--spacing-1: 0.5rem;
	--spacing-2: 1rem;
	--spacing-3: 1.5rem;
	--spacing-4: 2rem;
	--spacing-5: 2.5rem;
	--spacing-6: 3rem;
	--spacing-8: 4rem;
	--spacing-10: 5rem;
	--spacing-12: 6rem;
	--spacing-15: 7.5rem;

	--spacing-micro-sm: 0.125rem;
	--spacing-micro-md: 0.375rem;
	--spacing-micro-lg: 0.625rem;
	--spacing-gap-logo: 0.1875rem;
	--spacing-gap-phone: 0.25rem;
	--spacing-gap-specialty: 0.625rem;

	--size-icon-sm: 1.125rem;
	--size-icon-md: 1.75rem;
	--size-nav-toggle-bar-gap: 5px;
	--size-hairline: 1px;
	--size-pin-dot: 6px;
	--size-check-bullet: 0.5rem;
	--process-hex-width: 3.5rem;
	--process-hex-height: 4rem;
	--process-hex-inset: 1px;
	--trust-icon-size: 1rem;
	--trust-item-font-size: var(--font-size-4xs);
	--trust-item-padding-x: var(--spacing-3);
	--trust-item-padding-y: var(--spacing-2);
	--trust-item-gap: var(--spacing-1);
	--process-step-gap: var(--spacing-6);
	--process-step-gap-mobile: var(--spacing-5);
	--process-timeline-max: 22rem;
	--process-copy-max: 16rem;
	--map-frame-inset: 10%;

	--opacity-brand-hover: 0.92;
	--opacity-btn-sub: 0.85;
	--opacity-visible: 1;
	--opacity-hidden: 0;

	--font-size-brand-tag-mobile: 0.5rem;
	--font-size-nav-mobile: 1rem;

	--letter-spacing-trust: 0.04em;
	--letter-spacing-heading-upper: 0.04em;
	--letter-spacing-cta-number: 0.04em;

	--border-transparent: 1px solid transparent;
	--motion-nav-bar: 6px;
	--line-height-brand: 1.1;
	--line-height-quote-sm: 1.55;
	--line-height-checklist: 1.55;

	--section-hero-y: clamp(var(--spacing-8), 8vw, var(--spacing-12));
	--section-cta-y: clamp(var(--spacing-8), 7vw, var(--spacing-12));

	/* —— Hero refinement (Sprint 7D) —— */
	--hero-min-height: clamp(40rem, 90vh, 56rem);
	--hero-content-y: clamp(var(--spacing-10), 10vw, var(--spacing-15));
	--hero-line-gap: 0.085em;
	--hero-title-margin: var(--spacing-5);
	--hero-sub-margin: var(--spacing-6);
	--hero-sub-max: 26rem;
	--hero-actions-gap: var(--spacing-3);
	--hero-header-y: var(--spacing-4);
	--hero-header-column-gap: var(--spacing-12);
	--hero-nav-gap-row: var(--spacing-2);
	--hero-nav-gap-col: var(--spacing-5);
	--hero-nav-link-y: var(--spacing-1);
	--hero-phone-padding-y: var(--spacing-2);
	--hero-phone-padding-x: var(--spacing-4);
	--hero-phone-min-width: 12.25rem;
	--hero-phone-number-size: 1.1875rem;
	--hero-phone-label-tracking: var(--letter-spacing-phone-label);
	--hero-btn-height: 3.875rem;
	--hero-btn-min: 11.5rem;
	--hero-btn-primary-min: 12.75rem;
	--hero-btn-padding-x: var(--spacing-5);
	--font-size-hero-display: clamp(2.625rem, 6.75vw, 4.375rem);

	/* —— Hero photo (Sprint 8B) —— */
	--hero-photo-position: 76% 38%;
	--hero-photo-position-tablet: 72% 40%;
	--hero-photo-position-mobile: 68% 42%;
	--hero-photo-filter: brightness(0.84) contrast(1.16) saturate(0.58) sepia(0.1);
	--hero-photo-grade: linear-gradient(
		180deg,
		rgba(8, 10, 14, 0.52) 0%,
		rgba(12, 11, 10, 0.18) 38%,
		rgba(16, 14, 11, 0.22) 100%
	);

	--space-1: var(--spacing-1);
	--space-2: var(--spacing-2);
	--space-3: var(--spacing-3);
	--space-4: var(--spacing-4);
	--space-5: var(--spacing-5);
	--space-6: var(--spacing-6);
	--space-8: var(--spacing-8);
	--space-10: var(--spacing-10);
	--space-12: var(--spacing-12);
	--space-15: var(--spacing-15);

	--section-y: clamp(var(--spacing-10), 9vw, var(--spacing-15));
	--section-y-tight: clamp(var(--spacing-6), 5vw, var(--spacing-8));

	/* —— Typography —— */
	--font-display: "Oswald", "Arial Narrow", sans-serif;
	--font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

	--font-size-root: 100%;
	--font-size-body: 1rem;
	--font-size-body-lg: 1.0625rem;
	--font-size-sm: 0.9375rem;
	--font-size-xs: 0.875rem;
	--font-size-2xs: 0.8125rem;
	--font-size-3xs: 0.75rem;
	--font-size-4xs: 0.6875rem;
	--font-size-5xs: 0.625rem;
	--font-size-6xs: 0.5625rem;

	--font-size-heading: clamp(1.75rem, 3.5vw, 2.625rem);
	--font-size-hero: clamp(2.5rem, 6.5vw, 4.25rem);
	--font-size-brand: clamp(1.875rem, 2.8vw, 2.625rem);
	--font-size-brand-mobile: 1.625rem;
	--font-size-rule-heading: clamp(1rem, 2vw, 1.25rem);
	--font-size-cta-phone: clamp(1.75rem, 4vw, 2.75rem);
	--font-size-phone-box: 1.125rem;
	--font-size-logo-footer: 1.25rem;
	--font-size-logo-header: 1.375rem;

	--font-weight-regular: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;

	--line-height-tight: 1.02;
	--line-height-heading: 1.15;
	--line-height-snug: 1.25;
	--line-height-body: 1.65;
	--line-height-body-lg: 1.7;
	--line-height-relaxed: 1.75;
	--line-height-ui: 1.4;
	--line-height-ui-sm: 1.35;
	--line-height-ui-xs: 1.3;
	--line-height-quote: 1.6;
	--line-height-process: 1.45;
	--line-height-list: 1.5;
	--line-height-phone: 1.05;
	--line-height-phone-box: 1.2;

	--letter-spacing-tight: -0.04em;
	--letter-spacing-heading: -0.03em;
	--letter-spacing-display: -0.02em;
	--letter-spacing-brand: 0.32em;
	--letter-spacing-brand-mobile: 0.26em;
	--letter-spacing-brand-tag: 0.34em;
	--letter-spacing-brand-tag-mobile: 0.28em;
	--letter-spacing-logo: 0.12em;
	--letter-spacing-logo-tag: 0.22em;
	--letter-spacing-wide: 0.14em;
	--letter-spacing-wider: 0.16em;
	--letter-spacing-widest: 0.18em;
	--letter-spacing-ultra: 0.2em;
	--letter-spacing-mega: 0.22em;
	--letter-spacing-nav: 0.16em;
	--letter-spacing-eyebrow: 0.18em;
	--letter-spacing-rule: 0.18em;
	--letter-spacing-specialty: 0.2em;
	--letter-spacing-service: 0.08em;
	--letter-spacing-process: 0.1em;
	--letter-spacing-pin: 0.1em;
	--letter-spacing-placeholder: 0.14em;
	--letter-spacing-phone: 0.06em;
	--letter-spacing-phone-label: 0.16em;
	--letter-spacing-footer-col: 0.16em;
	--letter-spacing-btn: 0.14em;
	--letter-spacing-btn-small: 0.12em;

	/* —— Radii —— */
	--radius-xs: 1px;
	--radius-sm: 2px;
	--radius-md: 4px;
	--radius-lg: 8px;
	--radius-pill: 999px;
	--radius-full: 50%;

	/* —— Animation —— */
	--duration-base: 220ms;
	--ease-base: ease;
	--transition: var(--duration-base) var(--ease-base);
	--motion-duration: var(--duration-base);
	--motion-ease: var(--ease-base);

	--motion-arrow-sm: 6px;
	--motion-arrow-md: 8px;
	--motion-lift-sm: -3px;
	--motion-scale-photo: 1.03;
	--motion-scale-base: 1;
	--motion-pin-pulse-scale: 1.1;
	--motion-pin-pulse-opacity: 0.55;
	--motion-pin-pulse-duration: 5s;

	--nav-opacity-default: 0.88;
	--nav-opacity-hover: 1;

	/* —— Shadows —— */
	--shadow-none: none;
	--shadow-sm: 0 1px 2px rgba(9, 9, 9, 0.06);
	--shadow-review: 0 1px 3px rgba(9, 9, 9, 0.04);
	--shadow-md: 0 4px 12px rgba(9, 9, 9, 0.08);
	--shadow-review-hover: 0 6px 18px rgba(9, 9, 9, 0.08);
	--shadow-lg: 0 12px 32px rgba(9, 9, 9, 0.12);
	--shadow-bronze-glow: 0 0 20px rgba(185, 155, 104, 0.22);
	--shadow-bronze-subtle: 0 0 12px rgba(185, 155, 104, 0.15);
	--shadow-card-hover: var(--shadow-review-hover);

	/* —— Container widths —— */
	--container-max: 90rem;
	--container-gutter: clamp(var(--spacing-3), 4vw, var(--spacing-6));
	--container-gutter-header: calc(var(--container-gutter) + var(--spacing-4));
	--container-align-gutter: max(var(--container-gutter), calc((100vw - min(100vw, var(--container-max))) / 2 + var(--container-gutter)));
	--container-hero-copy: 40.625rem;
	--container-text: 32rem;
	--container-text-narrow: 28rem;
	--container-footer-brand: 16rem;
	--container-brand-min: 11.5rem;
	--container-brand-min-mobile: 9rem;
	--container-btn-min: 10.75rem;
	--container-btn-height: 3.5rem;
	--container-nav-toggle: 2.75rem;
	--container-map-min: 24rem;
	--container-split-min: 22rem;
	--container-split-mobile: 20rem;
	--container-service-min: 30rem;
	--container-service-min-mobile: 24rem;
	--container-hero-min: 38rem;
	--container-hero-max: 54rem;

	/* Legacy container aliases */
	--wrap: var(--container-max);
	--gutter: var(--container-gutter);
	--align-gutter: var(--container-align-gutter);
	--col-gap: clamp(var(--spacing-6), 5vw, var(--spacing-10));
	--hero-copy-max: var(--container-hero-copy);
	--text-measure: var(--container-text);
	--text-measure-narrow: var(--container-text-narrow);

	/* —— Grid —— */
	--grid-columns: 12;
	--grid-col-gap: var(--col-gap);
	--grid-header-gap: var(--spacing-10);
	--grid-header-gap-mobile: var(--spacing-3);
	--grid-footer-gap-row: var(--spacing-4);
	--grid-footer-gap-col: var(--spacing-6);
	--grid-reviews-gap: var(--spacing-3);
	--grid-map-copy-ratio: 1.15;

	--grid-split-text: 42%;
	--grid-split-media: 58%;
	--grid-process: 1fr 1fr;
	--grid-services: repeat(4, 1fr);
	--grid-services-tablet: repeat(2, 1fr);
	--grid-reviews: repeat(3, 1fr);
	--grid-reviews-tablet: repeat(2, 1fr);
	--grid-trust: repeat(5, minmax(0, 1fr));
	--grid-trust-tablet: repeat(3, minmax(0, 1fr));
	--grid-trust-mobile: repeat(2, minmax(0, 1fr));
	--grid-map: 1fr var(--grid-map-copy-ratio);
	--grid-footer: 1.4fr repeat(3, 1fr) auto;
	--grid-footer-tablet: 1fr 1fr;
	--grid-type-scale: repeat(4, 1fr);
	--grid-header: auto 1fr auto;
	--grid-header-mobile: 1fr auto;
	--grid-single: 1fr;

	/* Breakpoints (reference only — @media cannot use var()) */
	--breakpoint-xl: 75rem;
	--breakpoint-lg: 64rem;
	--breakpoint-md: 48rem;

	--grid-service-panel-min-height: var(--container-service-min);
	--grid-split-min-height: 36rem;

	/* —— Aspect ratios —— */
	--ratio-split-photo: 900 / 1100;
	--ratio-insurance-photo: 600 / 400;

	/* —— Overlays & gradients —— */
	--overlay-hero:
		radial-gradient(ellipse 88% 92% at 50% 48%, transparent 22%, rgba(0, 0, 0, 0.5) 100%),
		linear-gradient(
			to right,
			rgba(9, 9, 9, 0.7) 0%,
			rgba(9, 9, 9, 0.55) 28%,
			rgba(9, 9, 9, 0.42) 52%,
			rgba(9, 9, 9, 0.35) 100%
		),
		linear-gradient(
			to bottom,
			rgba(9, 9, 9, 0.45) 0%,
			rgba(9, 9, 9, 0.12) 32%,
			rgba(9, 9, 9, 0.08) 58%,
			rgba(9, 9, 9, 0.32) 100%
		);
	--overlay-service-panel: linear-gradient(to top, rgba(9, 9, 9, 0.92) 0%, rgba(9, 9, 9, 0.55) 55%, rgba(9, 9, 9, 0.72) 100%);
	--overlay-service-panel-hover: linear-gradient(to top, rgba(9, 9, 9, 0.96) 0%, rgba(9, 9, 9, 0.68) 55%, rgba(9, 9, 9, 0.82) 100%);
	--overlay-final-cta: rgba(9, 9, 9, 0.78);
	--overlay-map: radial-gradient(circle at 50% 45%, rgba(185, 155, 104, 0.08) 0%, transparent 55%),
		linear-gradient(180deg, var(--graphite-map-mid) 0%, var(--graphite-map) 100%);

	--z-base: 0;
	--z-placeholder-label: 1;
	--z-overlay: 1;
	--z-content: 2;
	--z-header: 2;
	--z-nav-mobile: 100;
	--z-map-pins: 1;

	/* —— Global Sprint 1 — Foundation —— */
	--gray: #8a8a8a;
	--gray-muted: rgba(243, 239, 231, 0.5);
	--color-gray: var(--gray);

	--space-xs: var(--spacing-1);
	--space-s: var(--spacing-2);
	--space-m: var(--spacing-4);
	--space-l: var(--spacing-6);
	--space-xl: var(--spacing-10);

	--header-height: 5rem;
	--header-height-mobile: 4.375rem;
	--header-scroll-threshold: 75px;

	--type-hero: clamp(2.5rem, 6.5vw, 4.25rem);
	--type-section-heading: clamp(1.75rem, 3.5vw, 2.625rem);
	--type-editorial-heading: clamp(1.125rem, 2.2vw, 1.5rem);
	--type-body: 1.0625rem;
	--type-caption: 0.6875rem;

	--card-radius: var(--radius-sm);
	--card-border: var(--border-light);
	--card-shadow: var(--shadow-review);
	--card-shadow-hover: var(--shadow-review-hover);

	--duration-fast: 180ms;
	--duration-normal: 280ms;
	--duration-slow: 450ms;
	--duration-slower: 600ms;
	--ease-premium: cubic-bezier(0.22, 0.61, 0.36, 1);
	--ease-out: cubic-bezier(0.33, 1, 0.68, 1);
	--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

	--anim-fade-distance: 1rem;
	--anim-fade-distance-sm: 0.75rem;
	--anim-stagger-step: 80ms;
	--anim-stagger-max: 400ms;

	/* —— Callout & semantic surfaces (Sprint 2B) —— */
	--color-callout-warning-bg: rgba(185, 155, 104, 0.08);
	--color-callout-warning-border: var(--bronze);
	--color-callout-info-bg: rgba(243, 239, 231, 0.04);
	--color-callout-info-border: var(--divider-bronze-soft);
	--color-surface-card: var(--graphite-card);
	--color-surface-card-light: rgba(243, 239, 231, 0.03);
	--color-surface-elevated: var(--graphite-elevated);

	/* —— Accessibility (Sprint 2B) —— */
	--focus-ring-color: var(--bronze);
	--focus-ring-color-light: var(--bronze-dark);
	--focus-ring-width: 2px;
	--focus-ring-offset: 2px;
	--focus-ring: var(--focus-ring-width) solid var(--focus-ring-color);
	--focus-ring-light: var(--focus-ring-width) solid var(--focus-ring-color-light);
	--min-touch-target: 2.75rem;

	/* —— Weather alert accents (Sprint 4.2) —— */
	--color-alert-flood: #4a8fb8;
	--color-alert-freeze: #7eb8d8;
	--color-alert-rain: #5a9fc8;
	--color-alert-wind: #9a8b6e;
	--color-alert-hurricane: #c47a4a;
	--color-alert-tornado: #b85a4a;

	/* —— Content max (spec alias) —— */
	--content-max: var(--container-max);

	--grid-footer-global: minmax(14rem, 1.4fr) repeat(5, minmax(0, 1fr));
}