/*
Theme Name: AI Page Builder Theme
Theme URI: https://aipagebuilder.com
Author: AI Page Builder Pro
Author URI: https://aipagebuilder.com
Description: A stunning, modern WordPress theme designed to work seamlessly with AI Page Builder Pro plugin. Features glass morphism, gradient effects, smooth animations, and responsive design patterns perfect for SaaS, startups, and modern businesses.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ai-page-builder-theme
Tags: block-patterns, block-styles, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, one-column, template-editing, threaded-comments, translation-ready, wide-blocks
*/

/* ============================================================================
   CSS VARIABLES & DESIGN TOKENS
   ============================================================================ */

:root {
    /* Fluid Typography Scale */
    --text-xs: clamp(0.75rem, 2vw, 0.875rem);
    --text-sm: clamp(0.875rem, 2.5vw, 1rem);
    --text-base: clamp(1rem, 3vw, 1.125rem);
    --text-lg: clamp(1.125rem, 3.5vw, 1.25rem);
    --text-xl: clamp(1.25rem, 4vw, 1.5rem);
    --text-2xl: clamp(1.5rem, 5vw, 1.875rem);
    --text-3xl: clamp(1.875rem, 6vw, 2.25rem);
    --text-4xl: clamp(2.25rem, 7vw, 3rem);
    --text-5xl: clamp(3rem, 8vw, 3.75rem);
    --text-6xl: clamp(3.75rem, 10vw, 4.5rem);

    /* Modern Color System */
    --primary: #0066FF;
    --primary-dark: #0052CC;
    --secondary: #667eea;
    --accent: #764ba2;

    /* Gradient Collections */
    --gradient-aurora: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --gradient-sunset: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    --gradient-ocean: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    --gradient-forest: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    --gradient-royal: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    --gradient-cyber: linear-gradient(135deg, #f54ea2 0%, #ff7676 100%);
    --gradient-dark: linear-gradient(180deg, #0f0f0f 0%, #1a1a2e 100%);
    --gradient-mesh: radial-gradient(at 40% 20%, hsla(28,100%,74%,1) 0, transparent 50%),
                     radial-gradient(at 80% 0%, hsla(189,100%,56%,1) 0, transparent 50%),
                     radial-gradient(at 0% 50%, hsla(355,100%,93%,1) 0, transparent 50%);

    /* Glass Morphism */
    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-bg-light: rgba(255, 255, 255, 0.1);
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-border-strong: rgba(255, 255, 255, 0.2);
    --blur-glass: blur(10px);
    --blur-heavy: blur(20px);

    /* Spacing System (Fluid) */
    --space-1: clamp(0.25rem, 1vw, 0.5rem);
    --space-2: clamp(0.5rem, 2vw, 1rem);
    --space-3: clamp(1rem, 3vw, 1.5rem);
    --space-4: clamp(1.5rem, 4vw, 2rem);
    --space-5: clamp(2rem, 5vw, 3rem);
    --space-6: clamp(3rem, 6vw, 4rem);
    --space-7: clamp(4rem, 7vw, 6rem);
    --space-8: clamp(6rem, 8vw, 8rem);

    /* Modern Shadow System */
    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --shadow-soft: 0 4px 30px rgba(0, 0, 0, 0.1);
    --shadow-glow: 0 0 50px rgba(102, 126, 234, 0.2);
    --shadow-glow-strong: 0 0 60px rgba(102, 126, 234, 0.4);

    /* Animation Timing */
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --ease-elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6);

    /* Border Radius */
    --radius-sm: 0.5rem;
    --radius-md: 1rem;
    --radius-lg: 1.5rem;
    --radius-xl: 2rem;
    --radius-full: 9999px;

    /* Container Sizes */
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1280px;
    --container-2xl: 1536px;
}

/* Dark Mode Variables */
[data-theme="dark"] {
    --bg-primary: #0f0f0f;
    --bg-secondary: #1a1a2e;
    --text-primary: #ffffff;
    --text-secondary: #a0a0a0;
    --glass-bg: rgba(255, 255, 255, 0.03);
    --glass-border: rgba(255, 255, 255, 0.08);
}

/* ============================================================================
   BASE STYLES & RESET
   ============================================================================ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
                 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
                 sans-serif;
    font-size: var(--text-base);
    line-height: 1.6;
    color: #333;
    background: #ffffff;
    overflow-x: hidden;
}

/* ============================================================================
   TYPOGRAPHY
   ============================================================================ */

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: var(--space-3);
}

h1 { font-size: var(--text-6xl); }
h2 { font-size: var(--text-5xl); }
h3 { font-size: var(--text-4xl); }
h4 { font-size: var(--text-3xl); }
h5 { font-size: var(--text-2xl); }
h6 { font-size: var(--text-xl); }

p {
    margin-bottom: var(--space-3);
}

a {
    color: var(--primary);
    text-decoration: none;
    transition: color 0.3s var(--ease-smooth);
}

a:hover {
    color: var(--primary-dark);
}

/* ============================================================================
   LAYOUT UTILITIES
   ============================================================================ */

.wp-block-group {
    margin-bottom: var(--space-5);
}

.alignwide {
    max-width: var(--container-xl);
    margin-left: auto;
    margin-right: auto;
}

.alignfull {
    width: 100%;
    max-width: 100%;
}

/* Container */
.container {
    width: 100%;
    max-width: var(--container-xl);
    margin: 0 auto;
    padding: 0 var(--space-4);
}

/* ============================================================================
   BLOCK EDITOR SUPPORT
   ============================================================================ */

.wp-block-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.wp-block-button__link {
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-full);
    font-weight: 600;
    transition: all 0.3s var(--ease-smooth);
}

.wp-block-button__link:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

/* ============================================================================
   RESPONSIVE UTILITIES
   ============================================================================ */

@media (max-width: 768px) {
    :root {
        --space-5: 2rem;
        --space-6: 3rem;
        --space-7: 4rem;
        --space-8: 5rem;
    }
}

/* ============================================================================
   ACCESSIBILITY
   ============================================================================ */

.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
}

.screen-reader-text:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    color: #21759b;
    display: block;
    font-size: 0.875rem;
    font-weight: 700;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

/* Skip to content link */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 2.5rem;
    z-index: 999999999;
    text-decoration: underline;
}

.skip-link:focus {
    display: block;
    left: 6px;
    top: 7px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    line-height: normal;
    padding: 15px 23px 14px;
    z-index: 100000;
    right: auto;
}