/* ============================================================
   ROOTS — Design Tokens & Global Utility Classes
   Susie Rugs | site_template
   ============================================================ */

:root {
  /* Brand Colors */
  --primary:        #1a1a1a;
  --primary-dark:   #1a1a1a;
  --primary-light:  #1a1a1a;
  --secondary:      #c9a87c;
  --accent:         #8b6914;

  /* Neutrals */
  --text-dark:      #1a1a1a;
  --text-medium:    #555555;
  --text-light:     #888888;
  --bg-light:       #f8f5f0;
  --bg-cream:       #f2ebe0;
  --bg-dark-teal:   #1a1a1a;
  --bg-charcoal:    #1a1a1a;
  --border-color:   #e0ddd8;
  --border-light:   #f0ede8;
  --white:          #ffffff;
  --black:          #000000;

  /* Stars / Rating */
  --star-color:     #d4a017;

  /* Typography */
  --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Lato', 'Helvetica Neue', Arial, sans-serif;

  /* Transitions */
  --transition:       all 0.3s ease;
  --transition-fast:  all 0.2s ease;
  --transition-slow:  all 0.5s ease;

  /* Shadows */
  --shadow-xs:  0 1px 4px rgba(0,0,0,0.06);
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.08);
  --shadow-md:  0 4px 20px rgba(0,0,0,0.12);
  --shadow-lg:  0 8px 40px rgba(0,0,0,0.16);

  /* Border Radius */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  16px;

  /* Z-indexes */
  --z-base:       1;
  --z-above:      10;
  --z-sticky:     100;
  --z-header:     1000;
  --z-mega-menu:  999;
  --z-overlay:    998;
}

/* ============================================================
   Color Utilities
   ============================================================ */
.color-primary   { color: var(--primary); }
.color-secondary { color: var(--secondary); }
.color-dark      { color: var(--text-dark); }
.color-medium    { color: var(--text-medium); }
.color-light-txt { color: var(--text-light); }
.color-white     { color: var(--white); }

.bg-primary       { background-color: var(--primary); }
.bg-primary-dark  { background-color: var(--primary-dark); }
.bg-dark-teal     { background-color: var(--bg-dark-teal); }
.bg-charcoal      { background-color: var(--bg-charcoal); }
.bg-cream         { background-color: var(--bg-cream); }
.bg-light-warm    { background-color: var(--bg-light); }

/* ============================================================
   Font Size Utilities (10–48)
   ============================================================ */
.font-size-10 { font-size: 10px; }
.font-size-11 { font-size: 11px; }
.font-size-12 { font-size: 12px; }
.font-size-13 { font-size: 13px; }
.font-size-14 { font-size: 14px; }
.font-size-15 { font-size: 15px; }
.font-size-16 { font-size: 16px; }
.font-size-18 { font-size: 18px; }
.font-size-20 { font-size: 20px; }
.font-size-22 { font-size: 22px; }
.font-size-24 { font-size: 24px; }
.font-size-28 { font-size: 28px; }
.font-size-32 { font-size: 32px; }
.font-size-36 { font-size: 36px; }
.font-size-42 { font-size: 42px; }
.font-size-48 { font-size: 48px; }

/* ============================================================
   Font Family Utilities
   ============================================================ */
.font-heading { font-family: var(--font-heading); }
.font-body    { font-family: var(--font-body); }

/* Font weight */
.fw-light    { font-weight: 300; }
.fw-regular  { font-weight: 400; }
.fw-medium   { font-weight: 500; }
.fw-semibold { font-weight: 600; }
.fw-bold     { font-weight: 700; }