/**
 * Theme Name:     Hello Elementor Child
 * Author:         Elementor Team
 * Template:       hello-elementor
 * Text Domain:    hello-elementor-child
 * Description:    Hello Elementor Child Theme with Creep Cast Custom Shop & Product Cards.
 */

/* Global Colors & Design Tokens */
:root {
  --color-paper: #f7f4ee;
  --color-ink: #17151c;
  --color-muted: #6f6a78;
  --color-line: #e4dfd6;
  --color-violet: #6d3ff2;
  --color-violet-dark: #5730c9;
  --color-violet-soft: #ece6fd;
  --font-sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

body {
  background-color: var(--color-paper) !important;
  color: var(--color-ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .font-display {
  font-family: var(--font-display);
}

/* Global Color Utility Classes */
.bg-paper { background-color: var(--color-paper); }
.bg-ink { background-color: var(--color-ink); }
.bg-muted { background-color: var(--color-muted); }
.bg-line { background-color: var(--color-line); }
.bg-violet { background-color: var(--color-violet); }
.bg-violet-dark { background-color: var(--color-violet-dark); }
.bg-violet-soft { background-color: var(--color-violet-soft); }
.text-paper { color: var(--color-paper); }
.text-ink { color: var(--color-ink); }
.text-muted { color: var(--color-muted); }
.text-line { color: var(--color-line); }
.text-violet { color: var(--color-violet); }
.text-violet-dark { color: var(--color-violet-dark); }

.border-line { border-color: var(--color-line); }
.border-violet { border-color: var(--color-violet); }

/* Elementor Footer Icon Box Layout & Link Color Fix for WooCommerce/Archive Pages */
.elementor-widget-icon-box.elementor-position-inline-start .elementor-icon-box-wrapper {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  text-align: start !important;
  gap: 15px !important;
}

.elementor-widget-icon-box .elementor-icon-box-icon {
  display: inline-block !important;
  flex: 0 0 auto !important;
}

.elementor-widget-icon-box .elementor-icon-box-title,
.elementor-widget-icon-box .elementor-icon-box-title a {
  color: inherit !important;
}