/**
 * SERP Preview - CSS Variables
 *
 * Tool-specific custom properties for the SERP Preview Tool.
 * Includes Google SERP colors and typography specifications.
 *
 * @package AgenticWP
 */

/* ============================================
   SERP Tool Theme Variables
   ============================================ */

.serp-hero,
.serp-form-section,
.serp-display-section {
	/* Tool accent colors (blue gradient) */
	--serp-accent: #3b82f6;
	--serp-accent-dark: #1e40af;
	--serp-accent-bg: #dbeafe;
	--serp-gradient: linear-gradient(135deg, #3b82f6, #1e40af);

	/* Hero background blob tint */
	--feature-serp-bg: #dbeafe;
}

/* ============================================
   Google SERP Colors - Light Theme
   ============================================ */

.serp-preview--light {
	/* SERP result colors */
	--serp-title-color: #1a0dab;
	--serp-title-visited: #681da8;
	--serp-url-color: #006621;
	--serp-breadcrumb-color: #202124;
	--serp-description-color: #4d5156;
	--serp-date-color: #70757a;
	--serp-highlight-bg: #fef9c3;

	/* Search bar colors */
	--serp-search-bg: #ffffff;
	--serp-search-border: #dfe1e5;
	--serp-search-text: #202124;

	/* Viewport background */
	--serp-viewport-bg: #ffffff;

	/* Browser chrome */
	--serp-chrome-bg: #dee1e6;
	--serp-chrome-border: #c7c9cc;
	--serp-address-bar-bg: #ffffff;
}

/* ============================================
   Google SERP Colors - Dark Theme
   ============================================ */

.serp-preview--dark {
	/* SERP result colors */
	--serp-title-color: #8ab4f8;
	--serp-title-visited: #c58af9;
	--serp-url-color: #bdc1c6;
	--serp-breadcrumb-color: #bdc1c6;
	--serp-description-color: #bdc1c6;
	--serp-date-color: #9aa0a6;
	--serp-highlight-bg: rgba(254, 249, 195, 0.15);

	/* Search bar colors */
	--serp-search-bg: #303134;
	--serp-search-border: #5f6368;
	--serp-search-text: #e8eaed;

	/* Viewport background */
	--serp-viewport-bg: #202124;

	/* Browser chrome */
	--serp-chrome-bg: #35363a;
	--serp-chrome-border: #5f6368;
	--serp-address-bar-bg: #202124;
}

/* ============================================
   Google SERP Typography
   ============================================ */

:root {
	/* Desktop title font */
	--serp-title-font-desktop: 20px Arial, sans-serif;
	--serp-title-line-height: 1.3;

	/* Mobile title font (Roboto fallback) */
	--serp-title-font-mobile: 18px Roboto, HelveticaNeue, Arial, sans-serif;

	/* URL/breadcrumb font */
	--serp-url-font: 14px Arial, sans-serif;
	--serp-site-name-font: 14px Arial, sans-serif;

	/* Description font */
	--serp-description-font: 14px Arial, sans-serif;
	--serp-description-line-height: 1.58;

	/* Favicon size */
	--serp-favicon-size: 28px;
	--serp-favicon-icon-size: 16px;
}

/* ============================================
   Pixel Width Limits (for truncation)
   ============================================ */

:root {
	/* Desktop limits */
	--serp-title-max-width-desktop: 482px;
	--serp-description-max-width-desktop: 928px;

	/* Mobile limits */
	--serp-title-max-width-mobile: 550px;
	--serp-description-max-width-mobile: 757px;

	/* macOS adjustments */
	--serp-title-macos-offset: 5px;
	--serp-title-mobile-macos-offset: 2px;
}