/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
Template: hello-elementor
Author: Elementor Team
Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
Description: Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 3.4.7.1779452448
Updated: 2026-05-22 12:20:48

*/

/*

1. The Raw Color Variables
Elementor maps your Site Settings > Global Colors directly to these names. You can drop them into any color property:

var(--e-global-color-primary) → Main Heading Color
var(--e-global-color-secondary) → Subheadings / Secondary Accent
var(--e-global-color-text) → Body Copy & Form Label Color
var(--e-global-color-accent) → Active Buttons, Links, & Hover States


The Raw Typography Variables
Elementor splits font styles into distinct property types. Here is how to call your global font rules individually:

Font Families: 

var(--e-global-typography-primary-font-family)
var(--e-global-typography-secondary-font-family)
var(--e-global-typography-text-font-family)
var(--e-global-typography-accent-font-family)

Font Weights

var(--e-global-typography-primary-font-weight)
var(--e-global-typography-secondary-font-weight)
var(--e-global-typography-text-font-weight)
var(--e-global-typography-accent-font-weight)


3. The Raw Layout Spacers

var(--widgets-spacing) → Current global gap size between elements/widgets.
var(--container-widget-width) → Max-width container boundary constraint.


How to use them raw in your code:

/* Styling an element using pure, un-mapped Elementor tokens 

.custom-quote-form-container {
    /* Uses your Elementor Container Content Width 
    max-width: var(--container-widget-width); 
    
    /* Uses your Elementor Elements Gap setting for padding 
    padding: var(--widgets-spacing); 
    
    /* Outlines the container with your primary global color 
    border: 2px solid var(--e-global-color-primary); 
}

.form-field-group .quote-label {
    /* Pulls your global body text font stack and color 
    font-family: var(--e-global-typography-text-font-family), sans-serif;
    font-weight: var(--e-global-typography-text-font-weight);
    color: var(--e-global-color-text);
}

.custom-quote-form-container input[type="submit"] {
    /* Pins button directly to your active accent color (e.g. your brand blue) 
    background-color: var(--e-global-color-accent);
    
    /* Formats button text using your site's main heading typography font family 
    
    font-family: var(--e-global-typography-primary-font-family), sans-serif;
    font-weight: var(--e-global-typography-primary-font-weight);
    color: #ffffff;
}

*/