/**
 * Global CSS Variables & Layout Helpers
 * Toolstation B2B Modular UI - Industrial Hardware Design System
 */

/* ==========================================================================
   HIGH-PRIORITY THEME RESET: FULL-WIDTH 100% & LIGHT INDUSTRIAL BACKGROUND
   Destroys restrictive theme containers (#main-container, #page, .ct-container, etc.)
   ========================================================================== */
html, body, #main-container, #page, #content, .site-content, .ct-container, .ct-container-fluid, main, #primary, .site-main, .site, .entry-content, .woocommerce, .woocommerce-page, .b2b-site-wrapper {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    float: none !important;
    grid-template-columns: none !important;
    background-color: #F8FAFC !important;
    background: #F8FAFC !important;
    color: #1E293B !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

:root {
  /* Container Constraints */
  --ts-container-max: 1200px;
  --ts-container-width: 1200px;

  /* Primary Brand - Forest Green */
  --ts-primary: #1B4332;
  --ts-primary-dark: #14532D;
  --ts-primary-light: #2D6A4F;
  --ts-primary-ultra-light: #E8F5E9;
  --ts-primary-border: #A3CFBB;

  /* Accent - Amber Gold */
  --ts-accent: #D97706;
  --ts-accent-hover: #EA580C;
  --ts-accent-light: #FEF3C7;

  /* Highlight & Price - Industrial Red */
  --ts-price-red: #DC2626;
  --ts-price-red-dark: #B91C1C;
  --ts-price-red-bg: #FEF2F2;

  /* Support & Utility Colors */
  --ts-link-blue: #0284C7;
  --ts-link-blue-hover: #0369A1;

  --ts-warning-bg: #FEFCE8;
  --ts-warning-border: #FEF08A;
  --ts-warning-text: #854D0E;

  --ts-stock-bg: #ECFDF5;
  --ts-stock-border: #A7F3D0;
  --ts-stock-text: #059669;

  /* Backgrounds & Neutrals */
  --ts-bg-white: #FFFFFF;
  --ts-bg-light: #F8FAFC;
  --ts-bg-subtle: #F1F5F9;
  --ts-border: #E2E8F0;
  --ts-border-dark: #CBD5E1;
  --ts-text-main: #0F172A;
  --ts-text-secondary: #334155;
  --ts-text-muted: #64748B;

  /* Radii & Shadows */
  --ts-radius-sm: 4px;
  --ts-radius-md: 6px;
  --ts-radius-lg: 8px;
  --ts-radius-full: 9999px;
  --ts-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --ts-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --ts-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
}

/* Strict Centering Container */
.ts-main-container,
.ts-container {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 15px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  display: block !important;
  clear: both !important;
}

/* Margin and Padding Utilities */
.mx-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}

.px-4 {
  padding-left: 16px !important;
  padding-right: 16px !important;
}

.w-full {
  width: 100% !important;
}