/*
Theme Name: AgenticWP
Theme URI: https://agenticwp.org
Description: Minimal child theme for Twenty Twenty-Five.
Author: Brett Swindells
Author URI: https://agenticwp.org
Template: twentytwentyfive
Version: 1.0.0
Text Domain: agenticwp
*/

/*
========================================
AgenticWP Style Guide
Derived from assets/css/landing/*.css
----------------------------------------
Color Palette
- Primary Ink: var(--ink) #0b1220 for body text, icons, and dark surfaces.
- Background: var(--bg) #ffffff as the default surface; gradients introduce soft tints.
- Muted Text: var(--muted) #6b7280 for supporting copy and metadata.
- Dividers: var(--line) #e5e7eb for subtle borders; hover states deepen to #cbd5e1.
- Accent: var(--accent) #65a30d for calls to action, badges, and highlights; weak tone var(--accent-weak) #eaffc7.
- Supporting Hues: #111827 (dark hover), #365314 (navigation hover), #f7fee7 (CTA gradient), rgba(190, 242, 100, 0.25–0.35) (hero glow and overlays).

Gradient Tokens
- var(--gradient-pink): linear-gradient(135deg, #EC4899, #831843) for hero section.
- var(--gradient-orange): linear-gradient(135deg, #F97316, #7C2D12) for feature-create section.
- var(--gradient-green): linear-gradient(135deg, #84CC16, #14532D) for feature-optimize section.
- var(--gradient-violet): linear-gradient(135deg, #A78BFA, #4C1D95) for feature-ship section.

Breakpoint Tokens
- var(--bp-tiny): 640px (CTA card stacking, smallest mobile devices)
- var(--bp-small): 680px (footer layout changes)
- var(--bp-medium): 800px (navigation mobile toggle)
- var(--bp-large): 900px (grid columns, steps layout)
- var(--bp-xl): 940px (hero layout collapse)
- var(--bp-xxl): 1100px (container max-width)

Typography
- Base Stack: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Inter, 'Helvetica Neue', Arial, 'Noto Sans', emoji fallbacks.
- Body Copy: default size inherited from browser, color var(--ink); muted copy uses var(--muted).
- Headings: hero h1 uses clamp(28px, 4vw, 48px) at 1.08 line-height; section h2 set to 24px; card and step headings at 16px; metadata at 14px/12px.
- Letter-Spacing: subtle negative tracking (-0.02 to -0.01em) on hero titles and brand mark for tighter display.

Spacing & Layout
- Container: max-width 1100px with 16px horizontal padding for consistent gutters.
- Sections: standard vertical rhythm of 72px top/bottom via .section.
- Grid Systems: hero uses 1.1/0.9 two-column layout collapsing at 940px; .grid and .steps components default to three columns, adjust via media queries.
- Cards & Modules: border radii range 14px–22px; padding 16px–26px; consistent 16px–24px gaps between elements.
- Skip Link: accessible focus style with high-contrast black/white treatment.

Components
- Buttons (.btn): 12x18 padding, 14px radius, 1px border; variants include .btn-accent (accent background), .btn-ghost (transparent). All share smooth background/filter hover transitions.
- Header & Navigation: sticky header with glassmorphism backdrop-filter and semi-transparent white; mobile nav toggled at 800px with slide-in animation.
- Hero: gradient overlay, radial glow (.hero::before, .hero-glow), card stack (.card, .demo-item) with shadows and icon badges.
- Feature Grid: .feature cards emphasize hover border shift (#cbd5e1) and compact typography for scannable feature descriptions.
- Steps: numbered with .badge accent pills; single-column layout below 900px.
- CTA Card: 22px radius, gradient background (#fff → #f7fee7), paired button group (.cta-actions).
- Footer: 36px padding, translucent top border, responsive flex stack below 680px.

Utilities & Helpers
- .accent utility paints text with var(--accent).
- .skip-link provides keyboard-accessible jump-to-content affordance.
- Icon sizing classes (.logo, .logo.small, .logo.tiny) manage brand marks at 32/24/20px.

Breakpoints & Responsiveness
- 940px: hero layout collapses to single column.
- 900px: .grid drops to two columns; .steps becomes single column.
- 800px: navigation converts to fixed overlay with toggle control.
- 680px: footer links stack vertically.
- 640px: CTA card stacks content vertically for narrow viewports.

Interaction & Motion
- Links and buttons animate with 0.15–0.3s transitions for hover feedback.
- .nav a:hover shifts to #365314; .btn-accent has hover effects with transform and shadow; .feature hover refines border color.
- .site-header maintains layering with z-index 100; .demo-icon.pending introduces alternate neutral state (#cbd5e1) for upcoming items.

Effects & Ornamentation
- Cards use soft shadow (0 10px 30px rgba(2, 6, 23, 0.06)) for depth.
- Hero glow employs radial gradient blur to reinforce accent color.
- Badges and icon circles rely on accent background with white text for prominence.

CSS Architecture
----------------------------------------
The theme CSS is organized into shared utilities and section-specific styles:

Shared Utilities (loaded early in dependency chain):
- assets/css/shared/animations.css: Reusable @keyframes animations
  * blob-float-1 through blob-float-5: Generic blob float animations with varying transforms
  * fade-in-up: Fade and slide up animation for content reveals
  * icon-pop-in: Pop-in animation with scale and opacity
  * bounce-vertical: Subtle vertical bounce effect
  * flow-pulse-anim: Pulsing glow effect for flow lines
  * rotate: Simple 360° rotation animation

- assets/css/shared/blob-background.css: Reusable blob background component
  * .blob-container: Absolute positioned container for blob backgrounds
  * .blob: Base 300px circle with radial gradient and blend mode (200px on mobile)
  * .blob-1 through .blob-5: Standard positioning utilities for consistent blob placement
  * Includes responsive behavior (smaller blobs, hide blobs 4-5 on mobile)
  * Includes prefers-reduced-motion support

- assets/css/shared/responsive.css: Shared responsive utilities
  * .hide-mobile: Display none on mobile (max-width: 680px)
  * .show-mobile: Display block on mobile only
  * .stack-mobile: Flex direction column on mobile

Container Variants (defined in base.css):
- .container: Standard 1100px max-width container (most sections)
- .container-wide: 1200px max-width for features page
- .container-narrow: 800px max-width for legal pages (privacy, terms)

Section-Specific Styles:
Individual section CSS files (hero.css, steps.css, features-*.css, etc.) contain:
- Section-specific blob colors (override .blob background property)
- Section-specific layout and typography
- Section-specific responsive adjustments
- Only styles unique to that section

Loading Order (managed in inc/enqueue.php):
1. Base styles (base.css with CSS custom properties)
2. Shared utilities (animations.css, blob-background.css, responsive.css)
3. Component styles (buttons.css, header.css, footer.css)
4. Section-specific styles (hero.css, steps.css, features-*.css, etc.)
This dependency hierarchy ensures shared utilities are available before section-specific code.
*/