/*
Theme Name: WebCraft Pro - Lexx.inovation Edition
Theme URI: https://gitlab.com/caneup-group/wptheme
Author: CaneUp | Lexx.inovation
Description: Premium, conversion-focused WordPress theme with 3D elements, modern animations, and Lexx.inovation design system. Built for website development agencies with cutting-edge UI/UX.
Version: 3.1.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: webcraft-pro
Tags: business, portfolio, 3d-design, animations, modern-ui, custom-colors, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, block-styles, wide-blocks, accessibility-ready, e-commerce
*/

:root {
  /* Lexx.inovation - Color Tokens */
  --color-text-primary: #f2f2f2;
  --color-text-secondary: #ffffff;
  --color-text-tertiary: #3d4adf;
  --color-text-inverse: #51505a;
  --color-surface-base: #000000;
  --color-surface-strong: #f9fafb;
  --color-border-default: #dddedf;
  
  /* Legacy colors for backward compatibility */
  --wc-bg-primary: #000000;
  --wc-bg-secondary: #0D1424;
  --wc-bg-card: #f9fafb;
  --wc-accent: #3d4adf;
  --wc-accent-hover: #2e39b5;
  --wc-accent-light: #e8ebff;
  --wc-text-on-dark: #f2f2f2;
  --wc-text-on-light: #51505a;
  --wc-text-secondary: #64748B;
  --wc-border: rgba(221, 222, 223, 0.2);
  
  /* 3D & Modern Gradients */
  --gradient-3d-primary: linear-gradient(135deg, #3d4adf 0%, #5865f2 50%, #7c88ff 100%);
  --gradient-3d-dark: linear-gradient(135deg, #000000 0%, #1a1a2e 40%, #16213e 100%);
  --gradient-mesh: 
    radial-gradient(at 40% 20%, rgba(61, 74, 223, 0.3) 0px, transparent 50%),
    radial-gradient(at 80% 0%, rgba(88, 101, 242, 0.2) 0px, transparent 50%),
    radial-gradient(at 0% 50%, rgba(124, 136, 255, 0.2) 0px, transparent 50%);

  /* Typography */
  --font-family-primary: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-family-stack: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-family-heading: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-size-base: 18px;
  --font-weight-base: 300;
  --font-lineHeight-base: 24.3px;
  
  /* Typography Scale */
  --font-size-xs: 14px;
  --font-size-sm: 16px;
  --font-size-md: 18px;
  --font-size-lg: 20px;
  --font-size-xl: 24px;
  --font-size-2xl: 28px;
  --font-size-3xl: 36px;
  --font-size-4xl: 37.67px;
  
  /* Legacy typography */
  --wc-font-heading: var(--font-family-primary);
  --wc-font-body: var(--font-family-stack);
  --wc-h1: clamp(37.67px, 6vw, 72px);
  --wc-h2: clamp(36px, 4vw, 48px);
  --wc-h3: clamp(28px, 3vw, 32px);
  --wc-body: var(--font-size-base);
  --wc-small: var(--font-size-xs);

  /* Spacing Scale - Lexx.inovation */
  --space-1: 2.5px;
  --space-2: 4px;
  --space-3: 6.75px;
  --space-4: 7px;
  --space-5: 8px;
  --space-6: 9px;
  --space-7: 9.42px;
  --space-8: 13.51px;
  --space-12: 16px;
  --space-16: 24px;
  --space-24: 32px;
  --space-32: 48px;
  --space-48: 64px;
  --space-64: 96px;
  --space-96: 120px;

  /* Radius Tokens */
  --radius-xs: 4px;
  --radius-sm: 40px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-card: 16px;
  --radius-btn: 40px;

  /* Motion Tokens */
  --motion-duration-instant: 100ms;
  --motion-duration-fast: 300ms;
  --motion-duration-normal: 400ms;
  --motion-duration-slow: 600ms;
  --motion-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --motion-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --motion-ease-elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6);

  /* 3D Shadows & Depth */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.2);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.25);
  --shadow-3d: 
    0 2px 4px rgba(0, 0, 0, 0.1),
    0 8px 16px rgba(0, 0, 0, 0.1),
    0 16px 32px rgba(0, 0, 0, 0.1);
  --shadow-3d-hover: 
    0 4px 8px rgba(61, 74, 223, 0.15),
    0 12px 24px rgba(61, 74, 223, 0.15),
    0 24px 48px rgba(61, 74, 223, 0.15);
  --shadow-glow: 0 0 32px rgba(61, 74, 223, 0.4);
  --shadow-glow-strong: 0 0 48px rgba(61, 74, 223, 0.6);

  /* Layout */
  --wc-section-pad: 120px;
  --wc-container: 1200px;
  
  /* 3D Transform Presets */
  --transform-3d-card: perspective(1000px) rotateX(0deg) rotateY(0deg);
  --transform-3d-lift: perspective(1000px) translateZ(20px);
  --transform-3d-press: perspective(1000px) translateZ(-5px);
}

@media (max-width: 768px) {
  :root {
    --wc-section-pad: 60px;
    --font-size-4xl: 32px;
    --font-size-3xl: 28px;
  }
}

/* style.css is the WordPress theme header file. Actual styles are loaded
   from assets/css/main.css, animations.css, and responsive.css for clean
   separation and per-file cache busting. */