/**
 * HairColorGPT Unified UI Base
 * Scoped base layer for plugin UI stability across themes.
 */

:where(.hcgpt-scope) {
    font-family: var(--hcgpt-font-sans);
    line-height: var(--hcgpt-lineheight-base);
    color: var(--hcgpt-color-text);
}

:where(.hcgpt-scope) :is(h1, h2, h3, h4, h5, h6) {
    font-family: var(--hcgpt-font-heading);
    font-weight: var(--hcgpt-font-weight-bold);
    line-height: var(--hcgpt-line-height-120);
}

:where(.hcgpt-scope) :is(code, pre, kbd, samp) {
    font-family: var(--hcgpt-font-mono);
}

:where(.hcgpt-scope) :is(.hcgpt-title, .hcgpt-heading, [class*="title"], [class*="heading"]) {
    font-family: var(--hcgpt-font-heading);
}

:where(.hcgpt-scope),
:where(.hcgpt-scope) * {
    box-sizing: border-box;
}

:where(.hcgpt-scope) :is(button, input, select, textarea) {
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
}

/* Theme collision guardrail — REMOVED universal hover reset.
   Every component provides its own :hover rule with class specificity (0,2,0+)
   which naturally beats Themify's bare `button:hover` (0,1,1).
   No universal reset needed — it caused more problems than it solved
   (specificity wars with component hover rules depending on load order). */

:where(#hcgpt-unified-chat-wrapper, .hcgpt-scope) :is(a, button, input, select, textarea, [role="button"], [tabindex]):focus,
:where(#hcgpt-unified-chat-wrapper, .hcgpt-scope) :is(a, button, input, select, textarea, [role="button"], [tabindex]):focus-visible {
    outline: none;
    box-shadow: none;
}