/**
 * Theme foundations: web fonts and design tokens.
 *
 * @package Solaris
 */

@font-face {
	font-family: "Google Sans Flex Fallback";
	font-style: normal;
	font-weight: 400 700;
	font-stretch: 100%;
	src: local( "Arial" );
	size-adjust: 100%;
	ascent-override: 90%;
	descent-override: 22%;
	line-gap-override: 0%;
}

/* Google Sans Flex woff2 @font-face rules: inc/Theme/Assets.php (GOOGLE_SANS_FLEX_FACES). */

/**
 * Solaris design tokens.
 *
 * @package Solaris
 */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	font-size: 100%;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	color-scheme: light dark;
}

html,
body {
	transition:
		background-color 0.2s ease,
		color 0.2s ease,
		border-color 0.2s ease;
}

body {
	margin: 0;
	font-family: var(--font-family-sans);
	font-size: var(--base-size);
	line-height: var(--base-line-height);
	font-weight: var(--font-weight-regular);
	color: var(--theme-surface-on-surface);
	background: var(--theme-canvas-surface);
}

:root {
	--palette-grey-0: #ffffff;
	--palette-grey-10: #f8f9fa;
	--palette-grey-15: #f1f3f4;
	--palette-grey-20: #e8eaed;
	--palette-grey-50: #dadce0;
	--palette-grey-100: #bdc1c6;
	--palette-grey-200: #9aa0a6;
	--palette-grey-300: #80868b;
	--palette-grey-400: #5f6368;
	--palette-grey-800: #444746;
	--palette-grey-900: #303030;
	--palette-grey-1000: #1f1f1f;
	--palette-grey-1100: #18191d;
	--palette-grey-1200: #121317;
	--palette-blue-600: #1a73e8;
	--palette-blue-700: #1558b0;
	--palette-red-600: #c5221f;
	--brand-linkedin: #0a66c2;
	--brand-linkedin-hover: #004182;

	/* Third-party & marketing brand colors */
	--brand-google-blue: #4285f4;
	--brand-google-blue-rgb: 66, 133, 244;
	--brand-google-red: #ea4335;
	--brand-google-red-rgb: 234, 67, 53;
	--brand-google-yellow: #fbbc05;
	--brand-google-yellow-rgb: 251, 188, 5;
	--brand-google-green: #34a853;
	--brand-google-green-rgb: 52, 168, 83;
	--brand-ai-purple: #9b72cb;
	--brand-ai-purple-rgb: 155, 114, 203;
	--brand-ai-coral: #d96570;
	--brand-ai-coral-rgb: 217, 101, 112;
	--brand-ai-blue-light: #8ab4f8;
	--brand-ai-lavender: #c5a5eb;
	--brand-ai-lavender-rgb: 197, 165, 235;
	--brand-chatgpt-icon: #0d0d0d;
	--brand-perplexity: #168c99;
	--brand-claude: #c15f3c;
	--brand-grok-icon: #1f2937;
	--brand-instagram: #e4405f;
	--brand-instagram-hover: #e1306c;
	--brand-tiktok: #010101;
	--brand-tiktok-hover: #ff0050;
	--brand-youtube: #ff0000;
	--brand-facebook: #1877f2;
	--brand-reddit: #ff4500;
	--brand-pinterest: #bd081c;
	--brand-snapchat: #e6c200;
	--palette-like-pink: #ff2d55;
	--palette-like-pink-rgb: 255, 45, 85;
	--palette-like-pink-hover: #ff5476;

	/* AI summary & GEO surfaces */
	--theme-ai-summary-gradient: linear-gradient(120deg, rgba(var(--brand-google-blue-rgb), 0.06), rgba(var(--brand-ai-purple-rgb), 0.08), rgba(var(--brand-ai-coral-rgb), 0.06));
	--theme-ai-summary-gradient-dark: linear-gradient(135deg, rgba(var(--brand-google-blue-rgb), 0.12), rgba(var(--brand-ai-purple-rgb), 0.16) 50%, rgba(var(--brand-ai-coral-rgb), 0.12));
	--theme-ai-summary-title-gradient: linear-gradient(120deg, var(--brand-google-blue), var(--brand-ai-purple), var(--brand-ai-coral));
	--theme-ai-summary-title-gradient-dark: linear-gradient(120deg, var(--brand-ai-blue-light), var(--brand-ai-lavender), var(--theme-status-error-on-surface));
	--theme-ai-summary-button-bg: rgba(var(--palette-grey-0-rgb), 0.82);
	--theme-ai-summary-icon-glyph: #ffffff;
	--theme-ai-summary-shadow-dark: rgba(var(--palette-grey-1000-rgb), 0.35);
	--theme-ai-summary-glow-dark: rgba(var(--brand-ai-lavender-rgb), 0.08);

	--palette-grey-0-rgb: 255, 255, 255;
	--palette-grey-50-rgb: 218, 220, 224;
	--palette-grey-400-rgb: 95, 99, 104;
	--palette-grey-1000-rgb: 31, 31, 31;
	--palette-grey-1200-rgb: 18, 19, 23;
	--palette-blue-600-rgb: 26, 115, 232;
	--theme-interaction-accent-on-surface: var(--palette-blue-600);
	--theme-interaction-accent-on-surface-rgb: var(--palette-blue-600-rgb);

	--reading-progress-height: 4px;
	--reading-progress-track: rgba(var(--theme-interaction-accent-on-surface-rgb), 0.14);
	--reading-progress-fill: rgba(var(--theme-interaction-accent-on-surface-rgb), 0.92);
	--reading-progress-fill-solid: var(--theme-interaction-accent-on-surface);
	--reading-progress-glow: rgba(var(--theme-interaction-accent-on-surface-rgb), 0.32);

	--theme-card-shadow-color-rgb: var(--palette-grey-1200-rgb);
	--theme-card-shadow-opacity: 0.08;
	--theme-card-border-hover: rgba(var(--palette-grey-1000-rgb), 0.24);

	--theme-surface-surface: var(--palette-grey-0);
	--theme-surface-on-surface: var(--palette-grey-1000);
	--theme-surface-on-surface-variant: var(--palette-grey-800);
	--theme-on-surface-emphasis: var(--palette-grey-1000);
	--theme-on-surface-muted: var(--palette-grey-800);
	--theme-on-surface-subtle: var(--palette-grey-400);
	--theme-surface-surface-container-low: var(--palette-grey-10);
	--theme-surface-surface-container: var(--palette-grey-15);
	--theme-surface-surface-container-high: var(--palette-grey-20);
	--theme-surface-surface-container-higher: var(--palette-grey-20);
	--theme-surface-surface-container-highest: var(--palette-grey-50);

	/* Layered layout surfaces — page canvas, chrome, section bands, cards. */
	--theme-canvas-surface: var(--theme-surface-surface);
	--theme-chrome-surface: var(--palette-grey-10);
	--theme-section-surface: var(--theme-surface-surface-container);
	--theme-card-surface: var(--theme-surface-surface);
	--theme-card-elevated-surface: var(--theme-surface-surface);

	--theme-surface-inverse-surface: var(--palette-grey-1200);
	--theme-surface-inverse-on-surface: var(--palette-grey-10);
	--theme-surface-inverse-on-surface-variant: #bdc1c6;
	--theme-surface-overlay: rgba(var(--palette-grey-0-rgb), 0.95);
	--theme-surface-overlay-low: rgba(var(--palette-grey-0-rgb), 0.12);
	--theme-surface-overlay-high: rgba(var(--palette-grey-0-rgb), 0.24);
	--theme-surface-overlay-higher: rgba(var(--palette-grey-0-rgb), 0.72);
	--theme-backdrop-overlay: rgba(0, 0, 0, 0.36);

	--theme-inverse-surface-overlay-high: rgba(var(--palette-grey-1200-rgb), 0.24);
	--theme-outline: rgba(var(--palette-grey-1000-rgb), 0.12);
	--theme-outline-variant: rgba(var(--palette-grey-1000-rgb), 0.08);
	--theme-inverse-outline: rgba(var(--palette-grey-50-rgb), 0.12);
	--theme-inverse-outline-variant: rgba(var(--palette-grey-50-rgb), 0.08);

	--theme-primary-primary: var(--palette-grey-1200);
	--theme-primary-on-primary: var(--palette-grey-0);
	--theme-primary-container: var(--theme-surface-surface-container);
	--theme-primary-on-container: var(--theme-surface-on-surface-variant);
	--theme-tonal-tonal: var(--theme-surface-surface-container);
	--theme-tonal-on-tonal: var(--theme-surface-on-surface);
	--theme-outlined-outlined: transparent;
	--theme-outlined-on-outlined: var(--theme-surface-on-surface);
	--theme-secondary-button: rgba(var(--palette-grey-400-rgb), 0.08);
	--theme-button-secondary-hover: var(--palette-grey-15);
	--theme-button-inverse: #000000;
	--theme-button-inverse-hover: #202124;
	--theme-button-inverse-on: #ffffff;
	--theme-ghost-button-surface: var(--palette-grey-0);
	--theme-ghost-button-on: var(--theme-surface-on-surface);
	--theme-ghost-button-border: rgba(var(--palette-grey-1000-rgb), 0.24);
	--theme-ghost-button-shadow: rgba(var(--palette-grey-1000-rgb), 0.08);
	--theme-button-states-primary-enabled: var(--theme-primary-primary);
	--theme-button-states-primary-hovered: var(--palette-grey-900);
	--theme-button-states-tonal-enabled: var(--theme-tonal-tonal);
	--theme-button-states-hovered: rgba(var(--palette-grey-1000-rgb), 0.04);
	--theme-button-states-focused: rgba(var(--palette-grey-1000-rgb), 0.12);
	--theme-text-link-states-enabled: var(--theme-surface-on-surface-variant);
	--theme-text-link-states-hovered: var(--palette-grey-1000);
	--theme-nav-surface: var(--theme-chrome-surface);
	--theme-nav-on-surface: var(--theme-surface-on-surface);
	--theme-nav-outline: var(--theme-outline-variant);
	--theme-nav-button: rgba(var(--palette-grey-400-rgb), 0.08);
	--theme-nav-button-hover: rgba(var(--palette-grey-400-rgb), 0.14);
	--theme-footer-surface: var(--palette-grey-1200);
	--theme-footer-on-surface: var(--palette-grey-10);
	--theme-footer-on-surface-variant: #c7cdd6;
	--theme-footer-outline: rgba(var(--palette-grey-50-rgb), 0.14);
	--theme-footer-outline-variant: rgba(var(--palette-grey-50-rgb), 0.1);
	--theme-footer-overlay-low: rgba(var(--palette-grey-0-rgb), 0.1);
	--theme-footer-overlay-high: rgba(var(--palette-grey-0-rgb), 0.2);
	--theme-footer-social-hover: var(--palette-grey-0);
	--theme-footer-social-on-hover: var(--palette-grey-1200);
	--theme-status-success-surface: #e6f4ea;
	--theme-status-success-border: #ceead6;
	--theme-status-success-on-surface: #137333;
	--theme-status-error-surface: #fce8e6;
	--theme-status-error-border: #fad2cf;
	--theme-status-error-on-surface: #c5221f;
	--theme-status-error-focus: rgba(197, 34, 31, 0.08);
	--theme-status-warning-surface: #fef7e0;
	--theme-status-warning-border: #feefc3;
	--theme-status-warning-on-surface: #8a4b00;
	/* Beğeni — pembe vurgu; hover tonu ayrı token. */
	--theme-interaction-like-on-surface: var(--palette-like-pink);
	--theme-interaction-like-on-surface-rgb: var(--palette-like-pink-rgb);
	--theme-interaction-like-on-surface-hover: var(--palette-like-pink-hover);
	--divider: var(--theme-outline-variant);

	--font-family-sans: "Google Sans Flex", "Google Sans Flex Fallback", "Google Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--font-family-mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;

	--font-weight-regular: 400;
	--font-weight-normal: var(--font-weight-regular);
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;

	--breakpoint-max: 1600px;
	--breakpoint-lg: 1440px;
	--breakpoint-md: 1024px;
	--breakpoint-sm: 767px;
	--breakpoint-xs: 425px;
	/* Breakpoint map (use literal px in @media — var() is invalid there):
	 *   nav drawer: max 991px / min 992px
	 *   tablet:     max 767px / min 768px
	 *   aside:      max 1199px / min 1200px
	 *   content:    max 1024px / min 1025px
	 */
	--breakpoint-nav: 991px;
	--z-below: -1;
	--z-base: 0;
	--z-elevated: 5;
	--z-subheader: 49;
	--z-header: 50;
	--z-backdrop: 98;
	--z-drawer: 99;
	--z-drawer-active: 100;
	--z-progress: 100;
	--z-modal: 10000;
	--z-confetti: 10050;
	--z-skip-link: 100000;
	--page-margin: 72px;
	--list-indent: var(--space-xl);
	--nav-scroll-gutter: var(--space-2xl);
	--panel-padding-inline: var(--space-lg);
	--grid-columns: 12;

	--display-size: clamp(2.5rem, 4.2vw, 3.75rem);
	--display-line-height: 1.12;
	--display-letter-spacing: -0.025em;
	--hero-lead-size: clamp(1.0625rem, 0.95rem + 0.45vw, 1.3125rem);
	--hero-lead-line-height: 1.65;
	--hero-lead-measure: 38rem;
	--hero-title-to-lead: var(--space-2xl);
	--hero-lead-to-cta: var(--space-3xl);
	--section-space: clamp(var(--space-xl), 3vw, var(--space-2xl));
	--hero-space-top: clamp(var(--space-5xl), 12vh, var(--space-6xl));
	--hero-cta-to-bottom: clamp(var(--space-2xl), 5vw, var(--space-4xl));

	--5xl-size: 2.5rem;
	--5xl-line-height: 1.15;
	--5xl-letter-spacing: -0.02em;
	--4xl-size: 2rem;
	--4xl-line-height: 1.2;
	--4xl-letter-spacing: -0.02em;
	--3xl-size: 1.75rem;
	--3xl-line-height: 1.25;
	--3xl-letter-spacing: -0.015em;
	--2xl-size: 1.5rem;
	--2xl-line-height: 1.3;
	--2xl-letter-spacing: -0.012em;
	--xl-size: 1.375rem;
	--xl-line-height: 1.35;
	--xl-letter-spacing: -0.01em;
	--lg-size: 1.25rem;
	--lg-line-height: 1.4;
	--lg-letter-spacing: -0.008em;
	--h5-size: var(--lg-size);
	--base-size: 1rem;
	--base-line-height: 1.5;
	--content-size: 1.0625rem;
	--content-line-height: 1.75;
	--content-measure: min(48rem, 75ch);
	--article-hero-measure: min(51.25rem, 100%);
	--article-featured-measure: min(calc(var(--content-measure) + var(--single-aside-width)), 100%);
	--content-paragraph-gap: 1.5em;
	--content-heading-gap: 2em;
	--sm-size: 0.875rem;
	--sm-line-height: 1.4286;
	--xs-size: 0.75rem;
	--xs-line-height: 1.3333;
	--xxs-size: 0.6875rem;
	--xxs-line-height: 1.3;
	--xs-plus-size: 0.8125rem;
	--xs-plus-line-height: 1.35;
	--lg-plus-size: 1.125rem;
	--lg-plus-line-height: 1.4;
	--cta-sm-size: 0.875rem;
	--cta-sm-line-height: 1.4286;

	--icon-size-9xl: 112px;
	--shape-corner-xs: 4px;
	--shape-corner-sm: 8px;
	--shape-corner-md: 16px;
	--shape-corner-lg: 24px;
	--shape-corner-xl: 36px;
	--shape-corner-rounded: 9999px;

	--space-none: 0;
	--space-xs: 4px;
	--space-sm: 8px;
	--space-md: 16px;
	--space-lg: 24px;
	--space-xl: 36px;
	--space-2xl: 48px;
	--space-3xl: 60px;
	--space-4xl: 80px;
	--space-5xl: 88px;
	--space-6xl: 120px;
	--space-7xl: 180px;
	--space-1-25: 1.25rem;
	--space-1-75: 1.75rem;
	--space-1-4: 1.4rem;
	--space-faq-measure: 44rem;
	--touch-target-md: 44px;
	--header-shell-bottom-default: 68px;
	--header-shell-bottom: var(--header-shell-bottom-default);
	--popover-padding-y: 14px;
	--popover-padding-x: 18px;
	--button-padding-x-xl: 22px;
	--button-padding-compact-y: 0.52rem;
	--button-padding-compact-x: 0.82rem;
	--google-cta-title-size: clamp(1.125rem, 1rem + 0.7vw, 1.5rem);
	--google-cta-content-measure: 42rem;
	--google-cta-desc-measure: 38rem;
	--icon-size-md: 18px;
	--icon-size-compact: 1.7rem;
	--font-size-near-base: 0.95rem;
	--letter-spacing-ui-tight: 0.2px;
	--letter-spacing-ui-wide: 0.5px;

	/* Service hero rotating accent palettes (light mode) */
	--hero-accent-1-c1: #007aff;
	--hero-accent-1-c2: #005bea;
	--hero-accent-2-c1: #af52de;
	--hero-accent-2-c2: #5e5ce6;
	--hero-accent-3-c1: #ff3b30;
	--hero-accent-3-c2: #d70015;
	--hero-accent-4-c1: #34c759;
	--hero-accent-4-c2: #248a3d;
	--hero-accent-5-c1: #ff9500;
	--hero-accent-5-c2: #c93400;
	--hero-accent-6-c1: #ff2d55;
	--hero-accent-6-c2: #d30f45;
	--hero-accent-7-c1: #5ac8fa;
	--hero-accent-7-c2: #0082c9;

	/* Shared visual effects (deduplicated literals) */
	--effect-shine-gradient: linear-gradient(90deg, rgba(var(--palette-grey-0-rgb), 0) 0%, rgba(var(--palette-grey-0-rgb), 0.1) 30%, rgba(var(--palette-grey-0-rgb), 0.25) 50%, rgba(var(--palette-grey-0-rgb), 0.1) 70%, rgba(var(--palette-grey-0-rgb), 0) 100%);
	--effect-shadow-xs: 0 var(--space-xs) var(--space-md) rgba(var(--palette-grey-1000-rgb), 0.05);
	--effect-shadow-sm: 0 var(--space-sm) var(--space-lg) rgba(var(--palette-grey-1000-rgb), 0.1);
	--effect-shadow-md: 0 var(--space-md) var(--space-xl) rgba(var(--palette-grey-1000-rgb), 0.15);
	--effect-shadow-lg: 0 var(--space-md) var(--space-xl) rgba(var(--palette-grey-1000-rgb), 0.3);
	--effect-elevation-shadow-xs: var(--effect-shadow-xs);
	--effect-elevation-shadow-sm: var(--effect-shadow-sm);
	--effect-elevation-shadow-md: var(--effect-shadow-md);
	--effect-elevation-shadow-lg: var(--effect-shadow-lg);
	--effect-shadow-dark-sm: 0 var(--space-sm) var(--space-lg) rgba(var(--palette-grey-1000-rgb), 0.25);
	--effect-shadow-dark-md: 0 var(--space-sm) var(--space-lg) rgba(var(--palette-grey-1000-rgb), 0.32);
	--effect-shadow-dark-lg: 0 12px 36px -10px rgba(var(--palette-grey-1000-rgb), 0.45);
	--effect-shadow-elevated-dark: 0 8px 24px rgba(var(--palette-grey-1000-rgb), 0.28);
	--effect-shine-gradient-dark: linear-gradient(90deg, rgba(var(--palette-grey-0-rgb), 0) 0%, rgba(var(--palette-grey-0-rgb), 0.04) 30%, rgba(var(--palette-grey-0-rgb), 0.12) 50%, rgba(var(--palette-grey-0-rgb), 0.04) 70%, rgba(var(--palette-grey-0-rgb), 0) 100%);
	--effect-inset-highlight-subtle: inset 0 1px 0 rgba(var(--palette-grey-0-rgb), 0.05);
	--effect-inset-highlight: inset 0 1px 0 rgba(var(--palette-grey-0-rgb), 0.1);
	--effect-surface-glass: linear-gradient(135deg, rgba(var(--palette-grey-0-rgb), 0.05), rgba(var(--palette-grey-0-rgb), 0.01));
	--effect-border-glass: rgba(var(--palette-grey-0-rgb), 0.15);
	--effect-backdrop-soft: rgba(var(--palette-grey-1000-rgb), 0.5);
	--effect-backdrop-strong: rgba(var(--palette-grey-1000-rgb), 0.75);
	--effect-frost-blur: 12px;
	--theme-frost-backdrop-fill: rgba(var(--palette-grey-1000-rgb), 0.18);
	--effect-mask-opaque: #000;
	--effect-brand-tint: rgba(var(--palette-blue-600-rgb), 0.08);
	--effect-brand-tint-strong: rgba(var(--palette-blue-600-rgb), 0.12);
	--effect-brand-tint-border: rgba(var(--palette-blue-600-rgb), 0.2);
	--effect-brand-tint-hover: rgba(var(--palette-blue-600-rgb), 0.05);
	--effect-brand-tint-focus: rgba(var(--palette-blue-600-rgb), 0.12);
	--theme-interaction-accent-focus-ring: var(--effect-brand-tint-focus);
	--theme-interaction-accent-surface: var(--effect-brand-tint);
	--theme-interaction-accent-surface-strong: var(--effect-brand-tint-strong);
	--theme-interaction-accent-border: var(--effect-brand-tint-border);
	--theme-interaction-toc-on-surface: var(--theme-on-surface-subtle);
	--theme-interaction-toc-active-on-surface: var(--theme-interaction-accent-on-surface);
	--theme-code-block-bg: var(--palette-grey-1200);
	--theme-code-block-fg: var(--palette-grey-10);
	--theme-google-cta-glass: linear-gradient(135deg, rgba(var(--palette-grey-0-rgb), 0.92), rgba(var(--palette-grey-0-rgb), 0.72));
	--theme-google-cta-border: rgba(var(--palette-grey-1000-rgb), 0.1);
	--theme-google-cta-shadow: 0 18px 48px -28px rgba(var(--palette-grey-1000-rgb), 0.38);
	--theme-google-cta-shadow-hover: 0 22px 58px -30px rgba(var(--brand-google-blue-rgb), 0.42);
	--theme-google-cta-inset: rgba(var(--palette-grey-0-rgb), 0.86);
	--theme-google-cta-mockup-bg: rgba(var(--palette-grey-0-rgb), 0.54);
	--theme-google-cta-button-gradient: linear-gradient(135deg,
			rgba(var(--brand-google-blue-rgb), 0.14) 0%,
			rgba(var(--brand-google-red-rgb), 0.08) 28%,
			rgba(var(--brand-google-yellow-rgb), 0.1) 54%,
			rgba(var(--brand-google-green-rgb), 0.12) 100%);
	--brand-violet-600: #7c3aed;
	--brand-violet-600-rgb: 124, 58, 237;
	--brand-pink-600: #db2777;
	--brand-pink-600-rgb: 219, 39, 119;
	--print-on-surface: #000000;
	--print-font-serif: "Times New Roman", Times, Georgia, serif;

	--button-height-sm: 36px;
	--button-height-md: 42px;
	--button-height-lg: 48px;
	--button-padding-x-sm: 12px;
	--button-padding-x-md: 16px;
	--button-padding-x-lg: 24px;
	--control-height-md: var(--button-height-md);
	--control-padding-y: 14px;
	--control-padding-x: 18px;
	--control-radius: var(--shape-corner-rounded);
	--control-radius-multiline: var(--shape-corner-md);
	--nav-height: 52px;
	--mobile-nav-item-height: 48px;
	--mobile-nav-transition: 0.25s var(--ease-out-cubic);
	--mobile-nav-l1-size: var(--base-size);
	--mobile-nav-l2-size: var(--xs-size);
	--mobile-nav-l3-size: var(--sm-size);
	--mobile-nav-indent: var(--space-lg);
	--mobile-nav-section-bg: var(--theme-nav-surface);
	--mobile-nav-inline: var(--page-margin);
	--mobile-nav-content-max: 560px;
	--mobile-nav-drawer-width: 100%;
	--mobile-nav-row-height: 60px;
	--mobile-nav-scroll-fade: 24px;
	--service-toc-sticky-top-gap: 0px;
	--service-toc-bar-estimate: 68px;
	--service-toc-link-active-bg: var(--effect-brand-tint-focus);
	--mega-intro-width: 280px;
	--single-aside-width: 13rem;
	--single-layout-gap: clamp(2rem, 3vw, 3rem);
	--single-content-offset: 0px;

	--ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
	--ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
}

@media (prefers-color-scheme: dark) {
	:root {
		/* Surface ladder: canvas (#111) → chrome → section → card → elevated */
		--palette-grey-0: #111111;
		--palette-grey-10: #151618;
		--palette-grey-15: #1a1b1e;
		--palette-grey-20: #1e2024;
		--palette-grey-50: #2b2e37;
		--palette-grey-100: #444444;
		--palette-grey-200: #666666;
		--palette-grey-300: #888888;
		--palette-grey-400: #aaaaaa;
		--palette-grey-800: rgba(255, 255, 255, 0.60);
		--palette-grey-900: rgba(255, 255, 255, 0.72);
		--palette-grey-1000: rgba(255, 255, 255, 0.87);
		--palette-grey-1100: rgba(255, 255, 255, 0.92);
		--palette-grey-1200: #ffffff;
		--palette-blue-600: #86a8d6;
		--palette-blue-700: #a4c4e8;
		--palette-red-600: #f28b82;
		--palette-like-pink-hover: #ff6b85;

		--palette-grey-0-rgb: 17, 17, 17;
		--palette-grey-10-rgb: 21, 22, 24;
		--palette-chrome-rgb: 21, 22, 24;
		--palette-grey-15-rgb: 26, 27, 30;
		--palette-grey-20-rgb: 30, 32, 36;
		--palette-grey-50-rgb: 43, 46, 55;
		--palette-grey-400-rgb: 170, 170, 170;

		/* Shadow channel stays dark — do not invert with text palette. */
		--palette-grey-1000-rgb: 0, 0, 0;
		--palette-grey-1200-rgb: 0, 0, 0;
		--palette-blue-600-rgb: 134, 168, 214;

		--theme-on-surface-emphasis: rgba(255, 255, 255, 0.87);
		--theme-on-surface-muted: rgba(255, 255, 255, 0.60);

		--reading-progress-track: rgba(var(--theme-interaction-accent-on-surface-rgb), 0.22);
		--reading-progress-fill: rgba(var(--theme-interaction-accent-on-surface-rgb), 0.95);
		--reading-progress-glow: rgba(var(--theme-interaction-accent-on-surface-rgb), 0.42);

		--theme-card-shadow-color-rgb: 0, 0, 0;
		--theme-card-shadow-opacity: 0.42;
		--theme-card-border-hover: rgba(255, 255, 255, 0.22);

		--theme-surface-surface: var(--palette-grey-20);
		--theme-surface-on-surface: var(--theme-on-surface-emphasis);
		--theme-surface-on-surface-variant: var(--theme-on-surface-muted);
		--theme-surface-surface-container-low: var(--palette-grey-15);
		--theme-surface-surface-container: var(--palette-grey-20);
		--theme-surface-surface-container-high: var(--palette-grey-50);
		--theme-surface-surface-container-higher: var(--palette-grey-50);
		--theme-surface-surface-container-highest: var(--palette-grey-50);

		--theme-canvas-surface: var(--palette-grey-0);
		--theme-chrome-surface: var(--palette-grey-10);
		--theme-section-surface: var(--palette-grey-15);
		--theme-card-surface: var(--palette-grey-20);
		--theme-card-elevated-surface: var(--palette-grey-50);

		--theme-surface-inverse-surface: #eeeeee;
		--theme-surface-inverse-on-surface: #121212;
		--theme-surface-inverse-on-surface-variant: #333333;

		--theme-surface-overlay: rgba(18, 18, 18, 0.85);
		--theme-surface-overlay-low: rgba(255, 255, 255, 0.04);
		--theme-surface-overlay-high: rgba(255, 255, 255, 0.08);
		--theme-surface-overlay-higher: rgba(255, 255, 255, 0.12);
		--theme-backdrop-overlay: rgba(0, 0, 0, 0.72);

		--theme-inverse-surface-overlay-high: rgba(0, 0, 0, 0.24);

		--theme-outline: rgba(255, 255, 255, 0.14);
		--theme-outline-variant: rgba(255, 255, 255, 0.08);
		--theme-inverse-outline: rgba(0, 0, 0, 0.16);
		--theme-inverse-outline-variant: rgba(0, 0, 0, 0.08);

		--theme-primary-primary: #d9dde4;
		--theme-primary-on-primary: #121212;
		--theme-primary-container: var(--theme-surface-surface-container);
		--theme-primary-on-container: var(--theme-surface-on-surface-variant);
		--theme-tonal-tonal: var(--theme-surface-surface-container);
		--theme-tonal-on-tonal: var(--theme-surface-on-surface);
		--theme-secondary-button: rgba(255, 255, 255, 0.06);
		--theme-button-secondary-hover: rgba(255, 255, 255, 0.1);
		--theme-button-inverse: #e7e9ee;
		--theme-button-inverse-hover: #d6d9df;
		--theme-button-inverse-on: #121212;
		--theme-button-states-primary-enabled: var(--theme-primary-primary);
		--theme-button-states-primary-hovered: #c8cdd6;
		--theme-button-states-hovered: rgba(255, 255, 255, 0.06);
		--theme-button-states-focused: rgba(255, 255, 255, 0.12);
		--theme-text-link-states-enabled: var(--theme-surface-on-surface-variant);
		--theme-text-link-states-hovered: var(--theme-surface-on-surface);
		--theme-nav-surface: var(--theme-chrome-surface);
		--theme-nav-on-surface: var(--theme-surface-on-surface);
		--theme-nav-outline: rgba(255, 255, 255, 0.10);
		--theme-nav-button: rgba(255, 255, 255, 0.06);
		--theme-nav-button-hover: rgba(255, 255, 255, 0.12);
		--theme-footer-surface: #121315;
		--theme-footer-on-surface: rgba(255, 255, 255, 0.87);
		--theme-footer-on-surface-variant: rgba(255, 255, 255, 0.60);
		--theme-footer-outline: rgba(255, 255, 255, 0.08);
		--theme-footer-outline-variant: rgba(255, 255, 255, 0.04);
		--theme-footer-overlay-low: rgba(255, 255, 255, 0.04);
		--theme-footer-overlay-high: rgba(255, 255, 255, 0.08);
		--theme-footer-social-hover: rgba(255, 255, 255, 0.87);
		--theme-footer-social-on-hover: #121212;

		--theme-status-success-surface: rgba(19, 115, 51, 0.16);
		--theme-status-success-border: rgba(19, 115, 51, 0.32);
		--theme-status-success-on-surface: #81c995;

		--effect-shine-gradient-dark: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.04) 30%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.04) 70%, rgba(255, 255, 255, 0) 100%);
		--effect-inset-highlight-subtle: inset 0 1px 0 rgba(255, 255, 255, 0.05);
		--effect-inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.08);
		--effect-surface-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01));
		--effect-border-glass: rgba(255, 255, 255, 0.12);
		--effect-elevation-shadow-xs: 0 var(--space-xs) var(--space-md) rgba(0, 0, 0, 0.28);
		--effect-elevation-shadow-sm: var(--effect-shadow-dark-sm);
		--effect-elevation-shadow-md: var(--effect-shadow-dark-md);
		--effect-elevation-shadow-lg: var(--effect-shadow-dark-lg);
		--effect-shadow-sm: var(--effect-shadow-dark-sm);
		--effect-shadow-md: var(--effect-shadow-dark-md);
		--effect-shadow-lg: var(--effect-shadow-dark-lg);
		--theme-status-error-surface: rgba(197, 34, 31, 0.16);
		--theme-status-error-border: rgba(197, 34, 31, 0.32);
		--theme-status-error-on-surface: #f28b82;
		--theme-status-error-focus: rgba(242, 139, 130, 0.16);
		--theme-status-warning-surface: rgba(138, 75, 0, 0.16);
		--theme-status-warning-border: rgba(138, 75, 0, 0.32);
		--theme-status-warning-on-surface: #fde293;
		--theme-interaction-like-on-surface: var(--palette-like-pink);
		--theme-interaction-like-on-surface-rgb: var(--palette-like-pink-rgb);
		--theme-ghost-button-surface: #121315;
		--theme-ghost-button-on: var(--theme-on-surface-emphasis);
		--theme-ghost-button-border: rgba(255, 255, 255, 0.32);
		--theme-ghost-button-shadow: rgba(255, 255, 255, 0.12);
		--theme-code-block-bg: var(--palette-grey-15);
		--theme-code-block-fg: var(--theme-on-surface-emphasis);
		--theme-ai-summary-button-bg: rgba(255, 255, 255, 0.08);
		--theme-ai-summary-icon-glyph: #ffffff;
		--brand-chatgpt-icon: #e8eaed;
		--brand-grok-icon: #d1d5db;
		--theme-google-cta-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
		--theme-google-cta-border: rgba(255, 255, 255, 0.10);
		--theme-google-cta-shadow: 0 18px 48px -28px rgba(0, 0, 0, 0.55);
		--theme-google-cta-shadow-hover: 0 22px 58px -30px rgba(var(--brand-google-blue-rgb), 0.28);
		--theme-google-cta-inset: rgba(255, 255, 255, 0.06);
		--theme-google-cta-mockup-bg: rgba(255, 255, 255, 0.04);
		--theme-google-cta-button-gradient: linear-gradient(135deg,
				rgba(var(--brand-google-blue-rgb), 0.24) 0%,
				rgba(var(--brand-google-red-rgb), 0.14) 28%,
				rgba(var(--brand-google-yellow-rgb), 0.16) 54%,
				rgba(var(--brand-google-green-rgb), 0.2) 100%);
		--hero-accent-dark-1: #38bdf8;
		--hero-accent-dark-2: #c084fc;
		--hero-accent-dark-3: #f87171;
		--hero-accent-dark-4: #4ade80;
		--hero-accent-dark-5: #fb923c;
		--hero-accent-dark-6: #f472b6;
		--hero-accent-dark-7: #22d3ee;
		--effect-brand-tint: rgba(var(--palette-blue-600-rgb), 0.12);
		--effect-brand-tint-strong: rgba(var(--palette-blue-600-rgb), 0.12);
		--effect-backdrop-soft: rgba(0, 0, 0, 0.65);
		--effect-backdrop-strong: rgba(0, 0, 0, 0.82);
		--theme-frost-backdrop-fill: rgba(0, 0, 0, 0.42);
	}
}

@media (max-width: 1024px) {
	:root {
		--grid-columns: 8;
		--page-margin: 40px;
		--display-size: clamp(2.125rem, 6vw, 2.75rem);
		--display-line-height: 1.16;
		--hero-lead-size: 1.0625rem;
		--hero-lead-line-height: 1.62;
		--hero-lead-measure: 100%;
		--hero-title-to-lead: var(--space-xl);
		--hero-lead-to-cta: var(--space-2xl);
		--hero-space-top: clamp(var(--space-4xl), 10vh, var(--space-5xl));
		--hero-cta-to-bottom: clamp(var(--space-xl), 4vw, var(--space-2xl));
		--5xl-size: 2rem;
		--5xl-line-height: 1.18;
		--4xl-size: 1.75rem;
		--4xl-line-height: 1.22;
		--3xl-size: 1.5rem;
		--3xl-line-height: 1.28;
		--2xl-size: 1.375rem;
		--2xl-line-height: 1.32;
		--lg-size: 1.125rem;
		--lg-line-height: 1.42;
		--base-size: 1rem;
		--base-line-height: 1.5;
		--content-size: 1rem;
		--content-line-height: 1.72;
		--content-measure: min(100%, 48rem);
		--article-hero-measure: 100%;
		--article-featured-measure: 100%;
		--content-paragraph-gap: 1.4em;
		--content-heading-gap: 1.75em;
		--sm-size: 0.875rem;
		--sm-line-height: 1.4286;
		--lg-plus-size: 1rem;
		--lg-plus-line-height: 1.45;
		--cta-sm-size: 0.875rem;
		--cta-sm-line-height: 1.4286;
	}
}

@media (max-width: 767px) {
	:root {
		--grid-columns: 4;
		--page-margin: 16px;
	}
}

@media (max-width: 425px) {
	:root {
		--shape-corner-xl: 24px;
	}
}