/**
 * Tiger Elements — Global Utility Classes.
 *
 * Add these classes to widget markup so styling tracks the Global Site
 * Settings panel. The CSS variables they consume are generated into
 * /uploads/tiger-elements/tiger-tokens.css on every settings save.
 *
 * Heading classes:   .tiger-h1 ... .tiger-h6
 * Typography roles:  .tiger-text, .tiger-primary-text, .tiger-secondary-text, .tiger-accent-text
 * Button:            .tiger-btn (anchor or button element)
 * Image wrapper:     .tiger-image
 * Brand color helpers:
 *   color:           .tiger-c-primary, .tiger-c-secondary, .tiger-c-text, .tiger-c-accent
 *   background:      .tiger-bg-primary, .tiger-bg-secondary, .tiger-bg-text, .tiger-bg-accent
 */

/* ---------- Headings ---------- */
.tiger-h1, .tiger-h2, .tiger-h3, .tiger-h4, .tiger-h5, .tiger-h6 {
    margin: 0 0 .5em;
}

.tiger-h1 {
    font-family: var(--tiger-h1-family);
    font-weight: var(--tiger-h1-weight);
    font-size:   var(--tiger-h1-size);
    color:       var(--tiger-h1-color);
}
.tiger-h2 {
    font-family: var(--tiger-h2-family);
    font-weight: var(--tiger-h2-weight);
    font-size:   var(--tiger-h2-size);
    color:       var(--tiger-h2-color);
}
.tiger-h3 {
    font-family: var(--tiger-h3-family);
    font-weight: var(--tiger-h3-weight);
    font-size:   var(--tiger-h3-size);
    color:       var(--tiger-h3-color);
}
.tiger-h4 {
    font-family: var(--tiger-h4-family);
    font-weight: var(--tiger-h4-weight);
    font-size:   var(--tiger-h4-size);
    color:       var(--tiger-h4-color);
}
.tiger-h5 {
    font-family: var(--tiger-h5-family);
    font-weight: var(--tiger-h5-weight);
    font-size:   var(--tiger-h5-size);
    color:       var(--tiger-h5-color);
}
.tiger-h6 {
    font-family: var(--tiger-h6-family);
    font-weight: var(--tiger-h6-weight);
    font-size:   var(--tiger-h6-size);
    color:       var(--tiger-h6-color);
}

/* ---------- Typography roles ---------- */
/* 3-step var() cascade for the 4 brand roles:
   Elementor global  →  Tiger token  →  hardcoded.
   Elementor exposes these as --e-global-* vars in the kit wrapper, so they
   take precedence when the user has set kit Global Colors / Global Fonts.
   Tiger tokens fill in when the kit is empty; hex/font hardcode is last. */
.tiger-text {
    font-family: var(--e-global-typography-text-font-family, var(--tiger-font-text-family, sans-serif));
    font-weight: var(--e-global-typography-text-font-weight, var(--tiger-font-text-weight, 400));
    font-size:   var(--e-global-typography-text-font-size,   var(--tiger-font-text-size,   16px));
    line-height: var(--e-global-typography-text-line-height, var(--tiger-font-text-lh,     1.7));
    color:       var(--e-global-color-text,                  var(--tiger-color-text,       #7a7a7a));
}
.tiger-primary-text {
    font-family: var(--e-global-typography-primary-font-family, var(--tiger-font-primary-family, sans-serif));
    font-weight: var(--e-global-typography-primary-font-weight, var(--tiger-font-primary-weight, 600));
    font-size:   var(--e-global-typography-primary-font-size,   var(--tiger-font-primary-size,   32px));
    line-height: var(--e-global-typography-primary-line-height, var(--tiger-font-primary-lh,     1.4));
    color:       var(--e-global-color-primary,                  var(--tiger-color-primary,       #6c5ce7));
}
.tiger-secondary-text {
    font-family: var(--e-global-typography-secondary-font-family, var(--tiger-font-secondary-family, sans-serif));
    font-weight: var(--e-global-typography-secondary-font-weight, var(--tiger-font-secondary-weight, 400));
    font-size:   var(--e-global-typography-secondary-font-size,   var(--tiger-font-secondary-size,   16px));
    line-height: var(--e-global-typography-secondary-line-height, var(--tiger-font-secondary-lh,     1.5));
    color:       var(--e-global-color-secondary,                  var(--tiger-color-secondary,       #54595f));
}
.tiger-accent-text {
    font-family: var(--e-global-typography-accent-font-family, var(--tiger-font-accent-family, sans-serif));
    font-weight: var(--e-global-typography-accent-font-weight, var(--tiger-font-accent-weight, 500));
    font-size:   var(--e-global-typography-accent-font-size,   var(--tiger-font-accent-size,   16px));
    line-height: var(--e-global-typography-accent-line-height, var(--tiger-font-accent-lh,     1.4));
    color:       var(--e-global-color-accent,                  var(--tiger-color-accent,       #61ce70));
}

/* ---------- Button ---------- */
.tiger-btn {
    display: inline-block;
    font-family:   var(--tiger-btn-family);
    font-weight:   var(--tiger-btn-weight);
    font-size:     var(--tiger-btn-size);
    color:         var(--tiger-btn-text);
    background:    var(--tiger-btn-bg);
    padding: var(--tiger-btn-pad-t) var(--tiger-btn-pad-r) var(--tiger-btn-pad-b) var(--tiger-btn-pad-l);
    border-radius: var(--tiger-btn-radius);
    border-style:  var(--tiger-btn-border-style);
    border-width:  var(--tiger-btn-border-width);
    border-color:  var(--tiger-btn-border-color);
    text-decoration: none;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.tiger-btn:hover,
.tiger-btn:focus {
    color:        var(--tiger-btn-hover-text);
    background:   var(--tiger-btn-hover-bg);
    border-color: var(--tiger-btn-hover-border);
}

/* ---------- Secondary button (.tg-btn-sec) ----------
   Use on the second action button of any widget that ships a pair. Reads
   the `--tiger-btn2-*` tokens, which are stored in `tiger_site_settings`
   under `button_secondary` and only live in the generated tokens CSS file
   — they are NOT pushed into the Elementor kit. */
.tg-btn-sec {
    display: inline-block;
    font-family:   var(--tiger-btn2-family);
    font-weight:   var(--tiger-btn2-weight);
    font-size:     var(--tiger-btn2-size);
    color:         var(--tiger-btn2-text);
    background:    var(--tiger-btn2-bg);
    padding: var(--tiger-btn2-pad-t) var(--tiger-btn2-pad-r) var(--tiger-btn2-pad-b) var(--tiger-btn2-pad-l);
    border-radius: var(--tiger-btn2-radius);
    border-style:  var(--tiger-btn2-border-style);
    border-width:  var(--tiger-btn2-border-width);
    border-color:  var(--tiger-btn2-border-color);
    text-decoration: none;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.tg-btn-sec:hover,
.tg-btn-sec:focus {
    color:        var(--tiger-btn2-hover-text);
    background:   var(--tiger-btn2-hover-bg);
    border-color: var(--tiger-btn2-hover-border);
}

/* ---------- Image ---------- */
.tiger-image,
.tiger-image img {
    border-radius: var(--tiger-image-radius);
}
.tiger-image img {
    box-shadow: var(--tiger-image-shadow);
    display: block;
    max-width: 100%;
    height: auto;
}

/* ---------- Color helpers (3-step cascade) ---------- */
.tiger-c-primary   { color: var(--e-global-color-primary,   var(--tiger-color-primary,   #6c5ce7)); }
.tiger-c-secondary { color: var(--e-global-color-secondary, var(--tiger-color-secondary, #54595f)); }
.tiger-c-text      { color: var(--e-global-color-text,      var(--tiger-color-text,      #7a7a7a)); }
.tiger-c-accent    { color: var(--e-global-color-accent,    var(--tiger-color-accent,    #61ce70)); }

.tiger-bg-primary   { background-color: var(--e-global-color-primary,   var(--tiger-color-primary,   #6c5ce7)); }
.tiger-bg-secondary { background-color: var(--e-global-color-secondary, var(--tiger-color-secondary, #54595f)); }
.tiger-bg-text      { background-color: var(--e-global-color-text,      var(--tiger-color-text,      #7a7a7a)); }
.tiger-bg-accent    { background-color: var(--e-global-color-accent,    var(--tiger-color-accent,    #61ce70)); }