/*
 * pSEO Blocks - Cloud Canvas Theme
 * Soft blue gradient, pastel accents, airy iOS-like elegance
 * Dreamy sky canvas with floating white cards
 * 
 * COMPLETE TONE SYSTEM - all required variables defined
 * 
 * Tone visual hierarchy (4 tones):
 *   base   → #E8F4FD  (soft sky blue - primary content)
 *   alt    → #FFFFFF  (white cards - elevated surfaces)
 *   dark   → #1E3A5F  (deep navy - hero, footer)
 *   accent → coral-peach gradient (CTAs, highlights)
 */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  /* ========================================
     CORE COLORS - Soft sky blue base
     ======================================== */
  --color-bg: #E8F4FD;
  --color-surface: #F0F7FC;
  --color-text: #1A2B3C;
  --color-muted: #5A6B7C;
  --color-border: #D0E3F0;
  
  /* Primary - deep blue for key elements */
  --color-primary: #2563EB;
  --color-primary-contrast: #FFFFFF;
  
  /* Accent - coral/peach for warmth */
  --color-accent: #F97066;
  --color-accent-light: #FCA5A1;
  --color-accent-dark: #DC4A3D;
  --color-accent-contrast: #FFFFFF;
  
  /* ========================================
     TONE: ALT - Pure white cards
     ======================================== */
  --color-alt-bg: #FFFFFF;
  --color-alt-text: #1A2B3C;
  --color-alt-muted: #5A6B7C;
  --color-alt-border: #E5EEF5;
  --color-alt-card: #FFFFFF;
  --color-alt-link: #2563EB;
  
  /* ========================================
     TONE: DARK - Deep navy
     ======================================== */
  --color-dark-bg: #1E3A5F;
  --color-dark-text: #FFFFFF;
  --color-dark-muted: #94A3B8;
  --color-dark-border: #2D4A6F;
  --color-dark-card: #263F5F;
  --color-dark-link: #7DD3FC;
  
  /* ========================================
     TONE: ACCENT - Coral to peach gradient
     ======================================== */
  --color-accent-surface: linear-gradient(135deg, #F97066 0%, #FBBF24 100%);
  --color-accent-text: #FFFFFF;
  --color-accent-muted: rgba(255, 255, 255, 0.85);
  --color-accent-border: rgba(255, 255, 255, 0.3);
  --color-accent-card: rgba(255, 255, 255, 0.2);
  --color-accent-link: #FFFFFF;
  --color-accent-eyebrow: rgba(255, 255, 255, 0.9);
  
  /* ========================================
     BACKGROUND & OVERLAY TOKENS
     ======================================== */
  --color-overlay: linear-gradient(180deg, rgba(30, 58, 95, 0.7) 0%, rgba(30, 58, 95, 0.95) 100%);
  --color-overlay-solid: rgba(30, 58, 95, 0.9);
  --color-gradient-start: #F97066;
  --color-gradient-end: #FBBF24;
  --color-shadow: rgba(30, 58, 95, 0.08);
  
  /* ========================================
     TYPOGRAPHY
     ======================================== */
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-heading: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'Fira Mono', monospace;
  
  /* Heading style - bold, no gradient */
  --heading-weight: 700;
  --heading-gradient: none;
  --heading-text-fill: currentColor;
  --heading-letter-spacing: -0.02em;
  
  /* ========================================
     SPACING & LAYOUT
     ======================================== */
  --radius: 1rem;
  --radius-btn: 0.75rem;
  --radius-input: 0.75rem;
  --radius-tag: 0.5rem;
  --shadow: 0 4px 20px rgba(30, 58, 95, 0.08);
  --shadow-lg: 0 8px 40px rgba(30, 58, 95, 0.12);
  --container-max: 1200px;
  --space-section-y: 5rem;
  --space-card: 1.5rem;
  --nav-height: 4.5rem;
  
  /* ========================================
     COMPONENT TOKENS - BUTTONS
     ======================================== */
  --btn-primary-bg: #2563EB;
  --btn-primary-text: #FFFFFF;
  --btn-primary-border: #2563EB;
  --btn-primary-hover-bg: #1D4ED8;
  --btn-primary-shadow: 0 4px 14px rgba(37, 99, 235, 0.3);
  
  --btn-secondary-bg: transparent;
  --btn-secondary-text: #2563EB;
  --btn-secondary-border: #2563EB;
  --btn-secondary-hover-bg: rgba(37, 99, 235, 0.08);
  --btn-secondary-hover-text: #1D4ED8;
  
  /* Dark tone buttons */
  --dark-btn-primary-bg: #FFFFFF;
  --dark-btn-primary-text: #1E3A5F;
  --dark-btn-secondary-border: rgba(255, 255, 255, 0.5);
  --dark-btn-secondary-text: #FFFFFF;
  
  /* Accent tone buttons */
  --accent-btn-primary-bg: #FFFFFF;
  --accent-btn-primary-text: #DC4A3D;
  --accent-btn-secondary-border: rgba(255, 255, 255, 0.5);
  --accent-btn-secondary-text: #FFFFFF;
  
  /* ========================================
     COMPONENT TOKENS - NAVIGATION
     ======================================== */
  --nav-bg: rgba(255, 255, 255, 0.9);
  --nav-border: rgba(30, 58, 95, 0.08);
  
  /* ========================================
     COMPONENT TOKENS - SEARCH & INPUTS
     ======================================== */
  --search-input-bg: #FFFFFF;
  --search-input-border: #D0E3F0;
  --search-input-focus-border: #2563EB;
  --search-input-focus-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
  --search-btn-bg: #2563EB;
  --search-btn-text: #FFFFFF;
  --search-btn-hover-bg: #1D4ED8;
  
  --popular-link-bg: rgba(37, 99, 235, 0.08);
  --popular-link-hover-bg: rgba(37, 99, 235, 0.15);
  
  /* ========================================
     COMPONENT TOKENS - CARDS & IMAGES
     ======================================== */
  --card-border: 1px solid var(--color-border);
  --card-gradient: none;
  --image-tag-bg: rgba(255, 255, 255, 0.9);
  --image-tag-text: #1A2B3C;
  --image-title-text: #FFFFFF;
  --image-overlay-gradient: linear-gradient(180deg, transparent 40%, rgba(30, 58, 95, 0.9) 100%);
  
  /* ========================================
     COMPONENT TOKENS - STATS & TRUST BAR
     ======================================== */
  --stat-font: 'Plus Jakarta Sans', sans-serif;
  --stat-gradient: none;
  --stat-text-fill: #1A2B3C;
  --dark-stat-text-fill: #FFFFFF;
  
  /* ========================================
     COMPONENT TOKENS - VIDEO
     ======================================== */
  --video-border-color: #D0E3F0;
  --video-hover-border-color: #2563EB;
  --video-glow: 0 0 30px rgba(37, 99, 235, 0.15);
  --video-hover-shadow: 0 8px 40px rgba(37, 99, 235, 0.2);
  
  /* ========================================
     COMPONENT TOKENS - TIMELINE
     ======================================== */
  --timeline-line-gradient: linear-gradient(180deg, #D0E3F0 0%, #2563EB 50%, #D0E3F0 100%);
  --timeline-number-bg: #2563EB;
  --timeline-number-text: #FFFFFF;
  
  /* ========================================
     COMPONENT TOKENS - CODE BLOCKS
     ======================================== */
  --color-code-bg: #1E3A5F;
  --color-code-text: #E2E8F0;
  --color-code-border: #2D4A6F;
  
  /* ========================================
     COMPONENT TOKENS - CALLOUTS
     ======================================== */
  --callout-tip: #10B981;
  --callout-tip-bg: rgba(16, 185, 129, 0.1);
  --callout-warning: #F59E0B;
  --callout-warning-bg: rgba(245, 158, 11, 0.1);
  --callout-note: #3B82F6;
  --callout-note-bg: rgba(59, 130, 246, 0.1);
  
  /* ========================================
     COMPONENT TOKENS - TAGS
     ======================================== */
  --tag-font: var(--font-body);
  --tag-transform: none;
  --tag-letter-spacing: 0;
  --tag-bg: rgba(37, 99, 235, 0.1);
  --tag-border: none;
  
  /* ========================================
     THEME EXTRAS
     ======================================== */
  --scrollbar-track: #E8F4FD;
  --scrollbar-thumb: #D0E3F0;
  --scrollbar-thumb-hover: #B8D4E8;
  --selection-bg: rgba(37, 99, 235, 0.2);
  --selection-text: #1A2B3C;
  
  /* Promo strip */
  --promo-btn-bg: #2563EB;
  --promo-btn-text: #FFFFFF;
  --promo-text-color: #1A2B3C;
  
  /* Linkbar */
  --linkbar-text: #1A2B3C;
  --linkbar-hover: #2563EB;
}

/* ========================================
   TONE-SPECIFIC BUTTON OVERRIDES
   ======================================== */

/* BASE/ALT tone - blue buttons on light bg */
.block[data-tone="base"] .btn--primary,
.block[data-tone="alt"] .btn--primary,
.block:not([data-tone]) .btn--primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text) !important;
  border-color: var(--btn-primary-border);
}

/* DARK tone buttons (ONLY when not gradient) */
.block[data-tone="dark"]:not([data-bg="gradient"]) .btn--primary {
  background: var(--dark-btn-primary-bg);
  color: var(--dark-btn-primary-text) !important;
  border-color: var(--dark-btn-primary-bg);
}

.block[data-tone="dark"]:not([data-bg="gradient"]) .btn--primary:hover {
  background: #F0F0F0;
}

.block[data-tone="dark"]:not([data-bg="gradient"]) .btn--secondary {
  border-color: var(--dark-btn-secondary-border);
  color: var(--dark-btn-secondary-text) !important;
}

.block[data-tone="dark"]:not([data-bg="gradient"]) .search-input__btn {
  background: var(--dark-btn-primary-bg);
  color: var(--dark-btn-primary-text) !important;
}

/* ACCENT tone buttons (ONLY when not gradient) */
.block[data-tone="accent"]:not([data-bg="gradient"]) .btn--primary {
  background: var(--accent-btn-primary-bg);
  color: var(--accent-btn-primary-text) !important;
  border-color: var(--accent-btn-primary-bg);
}

.block[data-tone="accent"]:not([data-bg="gradient"]) .btn--secondary {
  border-color: var(--accent-btn-secondary-border);
  color: var(--accent-btn-secondary-text) !important;
}

/* ========================================
   GRADIENT BACKGROUND OVERRIDES
   Gradient is coral→yellow (warm), needs white text
   ======================================== */

.block[data-bg="gradient"] {
  --surface-text: #FFFFFF;
  --surface-muted: rgba(255, 255, 255, 0.85);
}

.block[data-bg="gradient"] .block__eyebrow {
  color: rgba(255, 255, 255, 0.9) !important;
}

.block[data-bg="gradient"] .hero__subtitle {
  color: rgba(255, 255, 255, 0.85) !important;
}

.block[data-bg="gradient"] .footer-cta__eyebrow {
  color: rgba(255, 255, 255, 0.9) !important;
}

.block[data-bg="gradient"] .footer-cta__subtitle {
  color: rgba(255, 255, 255, 0.85) !important;
}

.block[data-bg="gradient"] .footer-cta__feature-desc {
  color: rgba(255, 255, 255, 0.8) !important;
}

/* Gradient buttons - white for contrast */
.block[data-bg="gradient"] .btn--primary {
  background: #FFFFFF !important;
  color: #DC4A3D !important;
  border-color: #FFFFFF !important;
}

.block[data-bg="gradient"] .btn--primary:hover {
  background: #F0F0F0 !important;
}

.block[data-bg="gradient"] .btn--secondary {
  border-color: rgba(255, 255, 255, 0.5) !important;
  color: #FFFFFF !important;
  background: transparent !important;
}

.block[data-bg="gradient"] a:not(.btn) {
  color: #FFFFFF;
}

/* Override heading gradient on gradient backgrounds */
.block[data-bg="gradient"] h1,
.block[data-bg="gradient"] h2,
.block[data-bg="gradient"] h3,
.block[data-bg="gradient"] .hero__title,
.block[data-bg="gradient"] .search-section__title,
.block[data-bg="gradient"] .footer-cta__title {
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: #FFFFFF !important;
  color: #FFFFFF !important;
}

/* ========================================
   EYEBROW COLOR OVERRIDES
   ======================================== */

/* Base/Alt - blue eyebrow on light backgrounds */
.block[data-tone="base"] .block__eyebrow,
.block[data-tone="alt"] .block__eyebrow,
.block:not([data-tone]) .block__eyebrow {
  color: #2563EB;
}

/* Dark tone - light blue eyebrow */
.block[data-tone="dark"]:not([data-bg="gradient"]) .block__eyebrow {
  color: #7DD3FC;
}

.block[data-tone="dark"]:not([data-bg="gradient"]) .footer-cta__eyebrow {
  color: #7DD3FC;
}

/* Accent tone - white eyebrow (ONLY when not gradient) */
.block[data-tone="accent"]:not([data-bg="gradient"]) .block__eyebrow {
  color: rgba(255, 255, 255, 0.9);
}

.block[data-tone="accent"]:not([data-bg="gradient"]) .footer-cta__eyebrow {
  color: rgba(255, 255, 255, 0.9);
}

.block[data-tone="accent"]:not([data-bg="gradient"]) .footer-cta__feature-desc {
  color: rgba(255, 255, 255, 0.8);
}

/* ========================================
   SEARCH INPUT TEXT FIXES
   ======================================== */

.block[data-tone="dark"] .search-input__input {
  color: #1A2B3C;
}

.block[data-tone="dark"] .search-input__input::placeholder {
  color: #5A6B7C;
}

/* ========================================
   CARD STYLING
   ======================================== */

.block[data-tone="base"] .card,
.block[data-tone="alt"] .card,
.block:not([data-tone]) .card {
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow);
}

.block[data-tone="dark"]:not([data-bg="gradient"]) .card {
  background: var(--color-dark-card);
  border: 1px solid var(--color-dark-border);
}

.block[data-tone="accent"]:not([data-bg="gradient"]) .card {
  background: var(--color-accent-card);
  border: 1px solid var(--color-accent-border);
  backdrop-filter: blur(8px);
}

/* ========================================
   PROMO STRIP OVERRIDES
   ======================================== */

.promo-strip__text {
  color: #1A2B3C !important;
}

.promo-strip__btn {
  color: #FFFFFF !important;
}

.promo-strip__btn span {
  color: #FFFFFF !important;
}

.promo-strip__btn svg {
  stroke: #FFFFFF !important;
}

/* ========================================
   LINKBAR OVERRIDES
   ======================================== */

.linkbar .linkbar__text {
  color: #1A2B3C !important;
}

.linkbar:hover .linkbar__text {
  color: #2563EB !important;
}

/* ========================================
   PROSE LINK OVERRIDES
   ======================================== */

.prose a,
.prose a:visited {
  color: #2563EB;
  text-decoration-color: rgba(37, 99, 235, 0.3);
}

.prose a:hover {
  color: #1D4ED8;
}

/* ========================================
   BREAKOUT CTA STYLING
   ======================================== */

.breakout-cta .btn--primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text) !important;
  border-color: var(--btn-primary-border);
}

.block[data-tone="dark"]:not([data-bg="gradient"]) .breakout-cta .btn--primary {
  background: var(--dark-btn-primary-bg);
  color: var(--dark-btn-primary-text) !important;
  border-color: var(--dark-btn-primary-bg);
}

/* ========================================
   EXPLICIT BUTTON TEXT COLOR
   ======================================== */

.btn--primary {
  color: var(--btn-primary-text) !important;
}