/*
Theme Name: Varied Cozy Shop
Theme URI: https://yoursite.com
Description: Modern minimalist WooCommerce child theme for Hello Commerce
Author: Your Name
Version: 1.0.0
Template: hello-elementor
Requires PHP: 8.0
Requires at least: 5.9
WC requires at least: 7.0
Text Domain: varied-cozy-shop
Domain Path: /languages
License: GPL v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* Import Parent Theme Styles */
@import url('../hello-elementor/style.css');

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');

/* Import Child Theme Styles */
@import url('./assets/css/components.css');
@import url('./assets/css/responsive.css');
@import url('./assets/css/utilities.css');

/* ===================================
   CSS CUSTOM PROPERTIES (VARIABLES)
   =================================== */

:root {
  /* Primary Colors */
  --color-primary: #f55b16; /* Burnt Orange - CTAs, hover states */
  --color-primary-hover: #d94f10; /* Darker orange for hover */
  --color-secondary: #9cc26b; /* Sage green - button hover states */
  --color-accent: #ffc7ad; /* Warm peach - highlights */

  /* Backgrounds */
  --color-bg-primary: #fff5e1; /* Cream - main background */
  --color-bg-secondary: #FAF6F1; /* Off-white - card backgrounds */
  --color-bg-footer: #f5f5f5; /* Light gray - footer background */
  --color-bg-dark: #1c402e; /* Deep green - dark sections */
  --color-bg-forest: #0f3522; /* Forest green - footer buttons */

  /* Text Colors */
  --color-text-primary: #000000; /* Black - main text */
  --color-text-secondary: #999999; /* Gray - secondary text */
  --color-text-light: #ffffff; /* White - text on dark */
  --color-text-muted: #cccccc; /* Light gray - disabled text */

  /* Status Colors */
  --color-success: #9cc26b; /* Green - in stock */
  --color-warning: #ffc7ad; /* Peach - warning */
  --color-error: #e74c3c; /* Red - error states */
  --color-info: #3498db; /* Blue - info messages */

  /* Borders & Shadows */
  --border-color: #e8e8e8; /* Light gray - borders */
  --border-radius: 0; /* Sharp corners (luxury aesthetic) */
  --border-radius-sm: 2px; /* Subtle rounding */
  --box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  --box-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);

  /* Typography */
  --font-family-serif: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  --font-family-sans: 'Inter', 'Open Sans', 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  
  --font-size-xs: 0.75rem; /* 12px */
  --font-size-sm: 0.875rem; /* 14px */
  --font-size-base: 1rem; /* 16px */
  --font-size-md: 1.125rem; /* 18px */
  --font-size-lg: 1.5rem; /* 24px */
  --font-size-xl: 2rem; /* 32px */
  --font-size-2xl: 2.5rem; /* 40px */
  --font-size-3xl: 3rem; /* 48px */

  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Spacing */
  --spacing-xs: 0.25rem; /* 4px */
  --spacing-sm: 0.5rem; /* 8px */
  --spacing-md: 1rem; /* 16px */
  --spacing-lg: 1.5rem; /* 24px */
  --spacing-xl: 2rem; /* 32px */
  --spacing-2xl: 3rem; /* 48px */
  --spacing-3xl: 4rem; /* 64px */

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow: 400ms ease;

  /* Z-index */
  --z-dropdown: 100;
  --z-modal-overlay: 1000;
  --z-modal: 1001;
  --z-tooltip: 1100;
  --z-header: 50;

  /* Breakpoints (in px) */
  --breakpoint-sm: 640px;
  --breakpoint-md: 1024px;
  --breakpoint-lg: 1440px;

  /* VCS Token Aliases (for PHP templates) */
  --vcs-primary: var(--color-primary);
  --vcs-accent: var(--color-secondary);
  
  --vcs-bg-dark: var(--color-bg-dark);
  --vcs-bg-forest: var(--color-bg-forest);
  --vcs-bg-primary: var(--color-bg-primary);
  --vcs-bg-secondary: var(--color-bg-secondary);
  
  --vcs-text: var(--color-text-primary);
  --vcs-text-secondary: var(--color-text-secondary);
  
  --vcs-border: var(--border-color);
  
  --vcs-spacing-xs: var(--spacing-xs);
  --vcs-spacing-sm: var(--spacing-sm);
  --vcs-spacing-md: var(--spacing-md);
  --vcs-spacing-lg: var(--spacing-lg);
  --vcs-spacing-xl: var(--spacing-xl);
  --vcs-spacing-2xl: var(--spacing-2xl);
  --vcs-spacing-3xl: var(--spacing-3xl);
  
  --vcs-radius-sm: var(--border-radius-sm);
  --vcs-radius-md: var(--border-radius-sm);
  --vcs-radius-lg: var(--border-radius-sm);
  
  --vcs-shadow-sm: var(--box-shadow);
  --vcs-shadow-md: var(--box-shadow-lg);
  --vcs-shadow-lg: var(--box-shadow-lg);
  
  --vcs-font-size-sm: var(--font-size-sm);
  --vcs-font-size-md: var(--font-size-md);
  --vcs-font-size-xl: var(--font-size-xl);
  --vcs-line-height-relaxed: 1.8;
  
  --vcs-transition-fast: var(--transition-fast);
  --vcs-transition-normal: var(--transition-normal);
}

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

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: 1.6;
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
  margin: 0;
  padding: 0;
}

/* Headings */
h1, h2, h3, h4, h5, h6,
.heading-1, .heading-2, .heading-3, .heading-4, .heading-5, .heading-6 {
  font-family: var(--font-family-serif);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  margin: 0;
  color: var(--color-text-primary);
}

h1, .heading-1 {
  font-size: var(--font-size-3xl); /* 48px */
  letter-spacing: -1px;
  margin-bottom: var(--spacing-lg);
}

h2, .heading-2 {
  font-size: var(--font-size-2xl); /* 40px */
  letter-spacing: -0.5px;
  margin-bottom: var(--spacing-lg);
}

h3, .heading-3 {
  font-size: var(--font-size-xl); /* 32px */
  margin-bottom: var(--spacing-md);
}

h4, .heading-4 {
  font-size: var(--font-size-lg); /* 24px */
  margin-bottom: var(--spacing-md);
}

h5, .heading-5 {
  font-size: var(--font-size-md); /* 18px */
  margin-bottom: var(--spacing-sm);
}

h6, .heading-6 {
  font-size: var(--font-size-base); /* 16px */
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: var(--spacing-sm);
}

/* Paragraphs */
p {
  margin: 0 0 var(--spacing-md) 0;
  line-height: 1.8;
}

/* Utility Text Sizes */
.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-md { font-size: var(--font-size-md); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }

.font-light { font-weight: var(--font-weight-light); }
.font-regular { font-weight: var(--font-weight-regular); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }

/* Links */
a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-primary-hover);
  text-decoration: underline;
}

/* Code */
code,
pre {
  font-family: 'Monaco', 'Courier New', monospace;
  font-size: var(--font-size-sm);
  background-color: var(--color-bg-secondary);
  border-radius: var(--border-radius-sm);
}

code {
  padding: var(--spacing-xs) var(--spacing-sm);
}

pre {
  padding: var(--spacing-md);
  overflow-x: auto;
  margin-bottom: var(--spacing-md);
}

/* ===================================
   GLOBAL LAYOUT
   =================================== */

.vcs-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
}

@media (max-width: 640px) {
  .vcs-container {
    padding: 0 var(--spacing-md);
  }
}