/**
 * Sphere design tokens — SPHERE: White Theme
 * Full spec: DESIGN-SYSTEM.md (typography, colors, spacing, usage rules)
 */

:root {
	/* Brand colors */
	--sphere-white: #ffffff;
	--sphere-orange: #e54225;
	--sphere-dark: #333333;
	--sphere-black: #1a1a1a;
	--sphere-gray-bg: #f2f2f2;
	--sphere-gray-100: #f5f5f5;
	--sphere-gray-50-bg: #f7f7f7;

	/* Text colors */
	--sphere-text-primary: #333333;
	--sphere-text-secondary: #999999;
	--sphere-text-accent: #e54225;
	--sphere-text-inverse: #ffffff;
	--sphere-text-heading: #1a1a1a;
	--sphere-text-body: #4a4a4a;
	--sphere-text-body-alt: #444444;
	--sphere-text-muted: #666666;
	--sphere-text-subtle: #777777;
	--sphere-text-footer: #797a7a;
	--sphere-text-footer-muted: #a0a0a0;

	/* Surfaces */
	--sphere-footer-bg: #222222;
	--sphere-footer-surface: #1a1a1a;
	--sphere-footer-panel: #262626;
	--sphere-partners-bg: #FFFFFF;
	--sphere-partners-pad-y: 2rem 0 2rem;
	--sphere-partners-logo-height: 3.75rem;
	--sphere-partners-logo-muted: 0.7;
	--sphere-callout-accent-bg: rgba(229, 66, 37, 0.1);
	--sphere-callout-bar-width: 0.1875rem;
	--sphere-callout-gap: 1.25rem;
	--sphere-line-height-callout: 1.5;
	--sphere-font-weight-callout-accent: 600;

	/* Typography */
	--sphere-font-family: 'Inter', 'Segoe UI', 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
	--sphere-card-title-size: 24px;
	--sphere-card-desc-size: 19px;
	--sphere-card-num-size: 50px;
	--sphere-card-readmore-size: 19px;
	--sphere-footer-cta-title-size: 50px;
	--sphere-footer-cta-btn-size: 19px;
	--sphere-banner-title-size: 80px;
	--sphere-banner-desc-size: 24px;
	--sphere-banner-min-height: 100vh;
	--sphere-gallery-min-height: 100vh;
	--sphere-lets-talk-title-size: 80px;
	--sphere-lets-talk-desc-size: 24px;
	--sphere-lets-talk-btn-size: 19px;
	--sphere-faq-title-size: 50px;
	--sphere-faq-text-size: 19px;
	--sphere-mid-cta-title-size: 50px;
	--sphere-mid-cta-btn-size: 19px;
	--sphere-font-size-body: 1.1875rem;
	--sphere-line-height-body: 1.75rem;
	--sphere-line-height-relaxed: 1.6;
	--sphere-font-size-main-title: 5rem;
	--sphere-font-size-title-caption: 1.5rem;
	--sphere-font-size-title2: 3.125rem;
	--sphere-font-size-title2-caption: 1.5rem;
	--sphere-font-size-block-title: 1.5rem;
	--sphere-font-size-block-caption: 1.1875rem;
	--sphere-font-size-subtitle: 1.5rem;
	--sphere-font-weight-subtitle: 600;
	--sphere-line-height-subtitle: 1.4;
	--sphere-letter-spacing-subtitle: -0.01em;

	/* Layout */
	--sphere-section-spacing: 7.8125rem;
	--sphere-container-max: 82.5rem;
	--sphere-section-content-max: 66rem;
	--sphere-container-padding: 9rem;
	--sphere-product-top-gap: 4rem;
	--sphere-product-top-margin: 2.25rem;

	/* UI */
	--sphere-radius-sm: 0.25rem;
	--sphere-radius-md: 0.5rem;
	--sphere-radius-btn: 0.375rem;
	--sphere-radius-footer-cta: 0.3125rem;
	--sphere-radius-card: 0.9375rem;
	--sphere-radius-pill: 2.1875rem;
	--sphere-shadow-card: 0 0.25rem 1.5rem rgba(0, 0, 0, 0.08);
	--sphere-shadow-card-sm: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.05);
	--sphere-shadow-card-hover: 0 0.5rem 1.75rem rgba(0, 0, 0, 0.08);
	--sphere-card-accent-height: 0.125rem;
	--sphere-shadow-media: drop-shadow(0rem 0rem .5rem rgba(0, 0, 0, .25));
	--sphere-border-light: rgba(0, 0, 0, 0.08);
	--sphere-border-accent: rgba(229, 66, 37, 0.12);

	/* Product feature cards (PRISM / HawkYrd / ELEVATE) — edit these to fine-tune */
	--sphere-pfc-bg: #ffffff;
	--sphere-pfc-border: #000000;
	--sphere-pfc-border-width: 1px;
	--sphere-pfc-border-hover: #000000;
	--sphere-pfc-radius: 0.75rem; /* 12px */
	--sphere-pfc-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.06);
	--sphere-pfc-accent-height: 0.25rem; /* 4px orange bottom bar on hover */
	--sphere-pfc-shadow-hover: 0 0.625rem 1.25rem rgba(0, 0, 0, 0.1);
	--sphere-pfc-icon-size: 2.75rem;
	--sphere-pfc-icon-radius: 0.5rem; /* 8px */
	--sphere-pfc-icon-bg: #f0f0f0;
	--sphere-pfc-icon-border: #e8e8e8;
	--sphere-pfc-icon-bg-hover: #fff2ef;
	--sphere-pfc-icon-border-hover: rgba(229, 66, 37, 0.35);
	--sphere-transition: 0.25s ease;
	--sphere-transition-smooth: 0.35s ease;
	--sphere-ease-lift: cubic-bezier(0.25, 0.8, 0.25, 1);
	--sphere-icon-black-filter: brightness(0) saturate(100%);
	--sphere-icon-orange-filter: brightness(0) saturate(100%) invert(36%) sepia(78%) saturate(2476%) hue-rotate(347deg) brightness(95%) contrast(91%);
}