/*
Theme Name: Pencil Woo 1
Theme URI: http://localhost/pencilint/
Author: Pencilint Team
Author URI: http://localhost/pencilint/
Description: Alibaba.com inspired B2B Marketplace theme for WooCommerce. Features signature marketplace header, search bar with category filter, RFQ submission, wholesale tiered pricing ladders, MOQ indicators, Verified Supplier badges, pre-order capabilities, and responsive e-commerce pages.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.7
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: pencil-woo-1
Tags: e-commerce, woocommerce, alibaba, b2b, wholesale, marketplace, responsive-layout, pre-order
*/

/* Core variables & Reset - Branded with Pensil International Logo (#C31F26 & #646267) */
:root {
  /* Brand Primary (Crimson Red extracted from main-logo.jpg) */
  --pencil-primary: #C31F26;
  --pencil-primary-hover: #A7181E;
  --pencil-primary-light: #FDF2F2;
  --pencil-primary-dark: #8C1318;
  --pencil-primary-border: #FECACA;
  --pencil-primary-shadow: rgba(195, 31, 38, 0.25);

  /* Brand Accent (Graphite Slate extracted from main-logo.jpg) */
  --pencil-accent: #646267;
  --pencil-accent-hover: #48464B;
  --pencil-accent-dark: #2F2D32;
  --pencil-accent-light: #F4F4F6;
  --pencil-accent-border: #D2D1D6;
  --pencil-accent-muted: #8E8C92;
  --pencil-accent-shadow: rgba(100, 98, 103, 0.2);

  /* Backwards-compatible aliases for theme classes */
  --pencil-orange: var(--pencil-primary);
  --pencil-orange-hover: var(--pencil-primary-hover);
  --pencil-orange-light: var(--pencil-primary-light);
  --pencil-orange-dark: var(--pencil-primary-dark);
  --pencil-orange-border: var(--pencil-primary-border);

  /* Semantic & Complementary Palette */
  --pencil-blue: #0070E0;
  --pencil-blue-light: #EBF5FF;
  --pencil-gold: #D97706;
  --pencil-gold-light: #FFFBEB;
  --pencil-green: #059669;
  --pencil-green-light: #ECFDF5;
  --pencil-purple: #7C3AED;
  --pencil-purple-light: #F5F3FF;

  /* Neutral Slate Palette Harmonized with Logo */
  --pencil-dark: #201E22;
  --pencil-gray-900: #2D2B30;
  --pencil-gray-700: #4B4950;
  --pencil-gray-500: #646267;
  --pencil-gray-400: #9CA3AF;
  --pencil-gray-200: #E5E5EB;
  --pencil-gray-100: #F4F4F6;
  --pencil-bg: #F8F8FA;
  --pencil-card-bg: #FFFFFF;
  --pencil-border: #E5E5EB;
  --pencil-radius-sm: 4px;
  --pencil-radius-md: 8px;
  --pencil-radius-lg: 12px;
  --pencil-radius-full: 9999px;
  --pencil-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --pencil-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
  --pencil-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --pencil-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --container-max: 1360px;
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--pencil-font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--pencil-gray-900);
  background-color: var(--pencil-bg);
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

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

img {
  max-width: 100%;
  height: auto;
  display: block;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
}