/* ============================================================
   FILE 1: 01-design-tokens.css
   Complete Design System — CSS Custom Properties
   Project: Gentlwish.com — Taoist Talismans & Spiritual Wellness
   ============================================================ */

:root {
  /* ========================================
     GLOBAL COLOR SYSTEM
     ======================================== */
  
  /* Primary — CTAs, Add to Cart, Buy Now */
  --color-primary: #9E2A2B;
  --color-primary-hover: #7F1F20;
  --color-primary-light: rgba(158, 42, 43, 0.08);
  --color-primary-text: #FFFFFF;

  /* Secondary — Icons, Accents, Premium labels */
  --color-secondary: #C8A96B;
  --color-secondary-hover: #B8975A;
  --color-secondary-light: rgba(200, 169, 107, 0.12);

  /* Background */
  --color-bg: #F8F5F0;
  --color-bg-card: #FFFFFF;
  --color-bg-warm: #FAF8F4;

  /* Text */
  --color-text: #2C2C2C;
  --color-text-light: #5A5A5A;
  --color-text-muted: #888888;

  /* Accent — Healing, Health, Success */
  --color-accent: #6B8E7A;
  --color-accent-hover: #5A7D69;
  --color-accent-light: rgba(107, 142, 122, 0.12);

  /* Category-specific accents */
  --color-cat-peace: #9E2A2B;
  --color-cat-wealth: #C8A96B;
  --color-cat-health: #6B8E7A;
  --color-cat-academic: #3E5C76;
  --color-cat-taisui: #5A3E2B;

  /* Borders & Dividers */
  --color-border: #E6E0D6;
  --color-border-light: #F0EBE3;

  /* Shadows */
  --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.04);
  --shadow-card-hover: 0 12px 30px rgba(0, 0, 0, 0.08);
  --shadow-elevation: 0 4px 12px rgba(0, 0, 0, 0.06);

  /* Footer */
  --color-footer-bg: #2C2C2C;
  --color-footer-text: #D8D8D8;
  --color-footer-link: #FFFFFF;
  --color-footer-hover: #C8A96B;

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

  --font-heading: 'Cormorant Garamond', 'Georgia', 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --font-weight-heading-600: 600;
  --font-weight-heading-700: 700;
  --font-weight-body-400: 400;
  --font-weight-body-500: 500;

  --line-height-body: 1.7;
  --line-height-heading: 1.2;
  --line-height-description: 1.8;

  /* ========================================
     SPACING & LAYOUT
     ======================================== */

  --content-width: 1200px;
  --content-width-narrow: 800px;
  --content-padding: 24px;
  --content-padding-mobile: 20px;
  --section-spacing: 60px;
  --section-spacing-mobile: 40px;
  --element-spacing: 24px;

  /* ========================================
     BORDER RADIUS
     ======================================== */

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 50%;

  /* ========================================
     TRANSITIONS
     ======================================== */

  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.4s ease;

  /* ========================================
     HERO
     ======================================== */

  --hero-headline-size: 56px;
  --hero-headline-size-tablet: 42px;
  --hero-headline-size-mobile: 32px;
  --hero-subheadline-size: 18px;
  --hero-max-width: 700px;

  /* ========================================
     PRODUCT GRID
     ======================================== */

  --product-card-radius: 12px;
  --product-card-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
  --product-card-shadow-hover: 0 12px 30px rgba(0, 0, 0, 0.08);
  --product-title-size: 18px;
  --product-title-weight: 600;
  --product-price-color: #9E2A2B;
  --product-card-hover-translate: -4px;

  /* ========================================
     PRODUCT PAGE
     ======================================== */

  --product-page-title-size: 42px;
  --product-page-title-weight: 700;
  --product-page-price-size: 32px;
  --product-page-atc-height: 56px;

  /* ========================================
     CATEGORY PAGE
     ======================================== */

  --category-banner-height: 500px;
  --category-banner-overlay: rgba(0, 0, 0, 0.25);
  --category-title-size: 48px;

  /* ========================================
     BLOG
     ======================================== */

  --blog-article-width: 800px;
  --blog-title-size: 48px;
  --blog-paragraph-size: 18px;

  /* ========================================
     HEADER
     ======================================== */

  --header-bg: #F8F5F0;
  --header-border: 1px solid #E6E0D6;
  --header-menu-color: #2C2C2C;
  --header-menu-hover: #9E2A2B;

  /* ========================================
     BUTTONS
     ======================================== */

  --btn-primary-bg: #9E2A2B;
  --btn-primary-text: #FFFFFF;
  --btn-primary-hover-bg: #7F1F20;
  --btn-primary-radius: 8px;
  --btn-primary-padding: 16px 32px;

  --btn-secondary-border: 1px solid #9E2A2B;
  --btn-secondary-text: #9E2A2B;
  --btn-secondary-hover-bg: #9E2A2B;
  --btn-secondary-hover-text: #FFFFFF;
}