/*
Theme Name: Zella Commerce
Theme URI: https://zellacollections.com
Author: Zella Collections Engineering Team
Author URI: https://zellacollections.com
Description: A bespoke, production-ready, mobile-first luxury fashion ecommerce theme for Zella Collections (Bags • Shoes • Accessories). Built with high-fashion editorial aesthetics, WooCommerce Store API integration, Paystack gateway, Lagos branch inventory, and server-side AI shopping concierge.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.1
License: Proprietary
Text Domain: zella-commerce
Tags: ecommerce, mobile-first, luxury, fashion, woocommerce
*/

:root {
  /* Color Tokens */
  --zc-obsidian: #151413;
  --zc-obsidian-subtle: #232220;
  --zc-warm-ivory: #F7F3EC;
  --zc-warm-ivory-alt: #F0ECE4;
  --zc-champagne: #C5A46D;
  --zc-champagne-light: #DFCA9E;
  --zc-champagne-dark: #A4834D;
  --zc-cocoa: #6B5144;
  --zc-deep-plum: #432C43;
  --zc-white: #FFFFFF;
  --zc-muted-sand: #EFECE6;
  --zc-stone: #9E988F;
  --zc-border: rgba(21, 20, 19, 0.08);
  --zc-border-strong: rgba(21, 20, 19, 0.16);
  --zc-success: #2E5C38;
  --zc-error: #9B2C2C;
  --zc-warning: #C05621;

  /* Typography */
  --zc-font-display: 'Cormorant Garamond', Garamond, 'Didot', 'Bodoni MT', Georgia, serif;
  --zc-font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Spacing Scale (8pt Grid) */
  --zc-space-1: 4px;
  --zc-space-2: 8px;
  --zc-space-3: 12px;
  --zc-space-4: 16px;
  --zc-space-5: 20px;
  --zc-space-6: 24px;
  --zc-space-8: 32px;
  --zc-space-10: 40px;
  --zc-space-12: 48px;
  --zc-space-16: 64px;

  /* Radii */
  --zc-radius-xs: 4px;
  --zc-radius-sm: 6px;
  --zc-radius-md: 8px;
  --zc-radius-lg: 12px;
  --zc-radius-xl: 16px;
  --zc-radius-full: 9999px;

  /* Shadows */
  --zc-shadow-sm: 0 2px 8px rgba(21, 20, 19, 0.04);
  --zc-shadow-md: 0 4px 20px rgba(21, 20, 19, 0.06);
  --zc-shadow-lg: 0 12px 36px rgba(21, 20, 19, 0.10);
  --zc-shadow-drawer: -4px 0 28px rgba(21, 20, 19, 0.14);

  /* Layout */
  --zc-container-max: 1320px;
  --zc-mobile-nav-height: 68px;
  --zc-header-height: 64px;
  --zc-announcement-height: 36px;
}

/* Base Styles */
html {
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

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

body {
  margin: 0;
  padding: 0;
  font-family: var(--zc-font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--zc-obsidian);
  background-color: var(--zc-warm-ivory);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-bottom: var(--zc-mobile-nav-height);
}

@media (min-width: 1024px) {
  body {
    padding-bottom: 0;
  }
}