/**
 * El Sartén Visual Authority Layer — semantic edition.
 *
 * Governs visual roles without changing DOM/layout. ECC roots are explicit
 * exclusion zones for generic component styling because ECC consumes --es-*
 * through its own semantic bridge and therefore keeps its precise selectors.
 */

body.elsarten-visual-authority:not(.ecc-app) {
    background-color: var(--es-color-background) !important;
    color: var(--es-color-text) !important;
    font-family: var(--es-font-body) !important;
    font-weight: var(--es-weight-body);
    font-style: var(--es-style-body);
    line-height: var(--es-line-height-body);
    letter-spacing: var(--es-letter-spacing-body);
    text-transform: var(--es-transform-body);
}

/* Semantic typography. H1-H4 are independent roles. */
body.elsarten-visual-authority:not(.ecc-app) :where(h1):not(.ecc-editor h1, .ecc-store h1, .ecc-pos h1) {
    font-family: var(--es-font-h1, var(--es-font-heading, var(--es-font-body)));
    font-weight: var(--es-weight-h1);
    font-style: var(--es-style-h1);
    font-size: var(--es-size-h1);
    line-height: var(--es-line-height-h1);
    letter-spacing: var(--es-letter-spacing-h1);
    text-transform: var(--es-transform-h1);
}
body.elsarten-visual-authority:not(.ecc-app) :where(h2):not(.ecc-editor h2, .ecc-store h2, .ecc-pos h2) {
    font-family: var(--es-font-h2, var(--es-font-body));
    font-weight: var(--es-weight-h2);
    font-style: var(--es-style-h2);
    font-size: var(--es-size-h2);
    line-height: var(--es-line-height-h2);
    letter-spacing: var(--es-letter-spacing-h2);
    text-transform: var(--es-transform-h2);
}
body.elsarten-visual-authority:not(.ecc-app) :where(h3):not(.ecc-editor h3, .ecc-store h3, .ecc-pos h3) {
    font-family: var(--es-font-h3, var(--es-font-body));
    font-weight: var(--es-weight-h3);
    font-style: var(--es-style-h3);
    font-size: var(--es-size-h3);
    line-height: var(--es-line-height-h3);
    letter-spacing: var(--es-letter-spacing-h3);
    text-transform: var(--es-transform-h3);
}
body.elsarten-visual-authority:not(.ecc-app) :where(h4):not(.ecc-editor h4, .ecc-store h4, .ecc-pos h4) {
    font-family: var(--es-font-h4, var(--es-font-body));
    font-weight: var(--es-weight-h4);
    font-style: var(--es-style-h4);
    font-size: var(--es-size-h4);
    line-height: var(--es-line-height-h4);
    letter-spacing: var(--es-letter-spacing-h4);
    text-transform: var(--es-transform-h4);
}

/* Optional identity resources activate only when their imported token exists. */
body.elsarten-visual-authority:not(.ecc-app) .display:not(.ecc-editor .display, .ecc-store .display, .ecc-pos .display) {
    font-family: var(--es-font-display);
    font-weight: var(--es-weight-display);
    text-transform: var(--es-transform-display);
}
body.elsarten-visual-authority:not(.ecc-app) .hollow:not(.ecc-editor .hollow, .ecc-store .hollow, .ecc-pos .hollow) {
    font-family: var(--es-font-hollow);
    font-weight: var(--es-weight-hollow);
    text-transform: var(--es-transform-hollow);
}

/* Global canvas. */
body.elsarten-visual-authority:not(.ecc-app) :where(
    main, [role="main"], .site-main, .page-content, .entry-content,
    .dashboard-main, .dashboard-content, .app-main, .app-content,
    .workspace, .content-area
):not(.ecc-editor, .ecc-store, .ecc-pos):not(.ecc-editor *, .ecc-store *, .ecc-pos *) {
    background-color: var(--es-color-background) !important;
    color: var(--es-color-text) !important;
}

/* Surfaces. A content <aside> is a surface; it is not navigation by tag alone. */
body.elsarten-visual-authority:not(.ecc-app) :where(
    .card, .dashboard-card, .surface-card, .panel, .modal-content,
    .dialog-content, .box, [data-surface],
    aside:not([role="navigation"]):not(.site-navigation):not(.main-navigation):not(.sidebar-nav):not(.dashboard-nav):not(.app-nav)
):not(.ecc-editor *, .ecc-store *, .ecc-pos *) {
    background-color: var(--es-color-surface) !important;
    color: var(--es-color-surface-text) !important;
    border-color: color-mix(in srgb, var(--es-color-surface-text) 14%, transparent) !important;
}

body.elsarten-visual-authority:not(.ecc-app) :where(
    .card, .dashboard-card, .surface-card, .panel, .modal-content,
    .dialog-content, .box, [data-surface],
    aside:not([role="navigation"]):not(.site-navigation):not(.main-navigation):not(.sidebar-nav):not(.dashboard-nav):not(.app-nav)
):not(.ecc-editor *, .ecc-store *, .ecc-pos *) :where(h1, h2, h3, h4, p, li, label, span, small) {
    color: var(--es-color-surface-text) !important;
}

/* Links: legible on global background, primary on light/content surfaces. */
body.elsarten-visual-authority:not(.ecc-app) a:not(.ecc-editor a, .ecc-store a, .ecc-pos a) {
    color: var(--es-color-text) !important;
}
body.elsarten-visual-authority:not(.ecc-app) :is(
    .card, .dashboard-card, .surface-card, .panel, .modal-content,
    .dialog-content, .box, [data-surface],
    aside:not([role="navigation"]):not(.site-navigation):not(.main-navigation):not(.sidebar-nav):not(.dashboard-nav):not(.app-nav)
):not(.ecc-editor *, .ecc-store *, .ecc-pos *) a {
    color: var(--es-color-primary) !important;
}
body.elsarten-visual-authority:not(.ecc-app) :is(
    .card, .dashboard-card, .surface-card, .panel, .modal-content,
    .dialog-content, .box, [data-surface]
):not(.ecc-editor *, .ecc-store *, .ecc-pos *) a:where(:hover, :focus-visible) {
    color: var(--es-color-surface-text) !important;
    text-decoration: underline;
}

/* Explicit navigation only. */
body.elsarten-visual-authority:not(.ecc-app) :where(
    nav, [role="navigation"], .site-navigation, .main-navigation,
    .sidebar-nav, .dashboard-nav, .app-nav
):not(.ecc-editor *, .ecc-store *, .ecc-pos *) {
    background-color: var(--es-color-primary) !important;
    color: var(--es-color-text) !important;
    border-color: color-mix(in srgb, var(--es-color-text) 18%, transparent) !important;
    font-family: var(--es-font-nav, var(--es-font-body));
    font-weight: var(--es-weight-nav);
}
body.elsarten-visual-authority:not(.ecc-app) :where(
    nav, [role="navigation"], .site-navigation, .main-navigation,
    .sidebar-nav, .dashboard-nav, .app-nav
):not(.ecc-editor *, .ecc-store *, .ecc-pos *) :where(a, button, .brand, .site-title, .custom-logo-link) {
    color: var(--es-color-text) !important;
    font-family: var(--es-font-nav, var(--es-font-body));
}
body.elsarten-visual-authority:not(.ecc-app) :where(
    nav, [role="navigation"], .site-navigation, .main-navigation,
    .sidebar-nav, .dashboard-nav, .app-nav
):not(.ecc-editor *, .ecc-store *, .ecc-pos *) :where(a, button):where(:hover, :focus-visible) {
    color: var(--es-color-text) !important;
    text-decoration: underline;
}

/* Buttons and form interface roles. */
body.elsarten-visual-authority:not(.ecc-app) :where(
    button, .button, .btn, [role="button"], input[type="button"],
    input[type="submit"], input[type="reset"], .elementor-button
):not(.ecc-editor *, .ecc-store *, .ecc-pos *) {
    background-color: var(--es-color-primary) !important;
    border-color: var(--es-color-primary) !important;
    color: var(--es-color-text) !important;
    font-family: var(--es-font-button, var(--es-font-body));
    font-weight: var(--es-weight-button);
    font-style: var(--es-style-button);
    letter-spacing: var(--es-letter-spacing-button);
    text-transform: var(--es-transform-button);
}
body.elsarten-visual-authority:not(.ecc-app) :where(
    button, .button, .btn, [role="button"], input[type="button"],
    input[type="submit"], input[type="reset"], .elementor-button
):not(.ecc-editor *, .ecc-store *, .ecc-pos *):where(:hover, :focus-visible) {
    background-color: var(--es-color-accent) !important;
    border-color: var(--es-color-accent) !important;
}
body.elsarten-visual-authority:not(.ecc-app) label:not(.ecc-editor label, .ecc-store label, .ecc-pos label) {
    color: inherit;
    font-family: var(--es-font-label, var(--es-font-body));
    font-weight: var(--es-weight-label);
}
body.elsarten-visual-authority:not(.ecc-app) :where(
    input:not([type="button"]):not([type="submit"]):not([type="reset"]), select, textarea
):not(.ecc-editor *, .ecc-store *, .ecc-pos *) {
    background-color: var(--es-color-surface) !important;
    color: var(--es-color-surface-text) !important;
    border-color: color-mix(in srgb, var(--es-color-surface-text) 24%, transparent) !important;
    font-family: var(--es-font-body);
}
body.elsarten-visual-authority:not(.ecc-app) :where(input, select, textarea):not(.ecc-editor *, .ecc-store *, .ecc-pos *)::placeholder {
    color: color-mix(in srgb, var(--es-color-surface-text) 60%, transparent) !important;
}

/* Tables. */
body.elsarten-visual-authority:not(.ecc-app) table:not(.ecc-editor table, .ecc-store table, .ecc-pos table) {
    background-color: var(--es-color-surface) !important;
    color: var(--es-color-surface-text) !important;
    font-family: var(--es-font-table, var(--es-font-body));
    font-weight: var(--es-weight-table);
}
body.elsarten-visual-authority:not(.ecc-app) :where(th, thead td):not(.ecc-editor *, .ecc-store *, .ecc-pos *) {
    background-color: var(--es-color-primary) !important;
    color: var(--es-color-text) !important;
    border-color: color-mix(in srgb, var(--es-color-text) 18%, transparent) !important;
}
body.elsarten-visual-authority:not(.ecc-app) :where(td, tbody th):not(.ecc-editor *, .ecc-store *, .ecc-pos *) {
    background-color: var(--es-color-surface) !important;
    color: var(--es-color-surface-text) !important;
    border-color: color-mix(in srgb, var(--es-color-surface-text) 14%, transparent) !important;
}

body.elsarten-visual-authority:not(.ecc-app) hr:not(.ecc-editor hr, .ecc-store hr, .ecc-pos hr) {
    border-color: color-mix(in srgb, var(--es-color-text) 20%, transparent) !important;
}
body.elsarten-visual-authority:not(.ecc-app) :focus-visible:not(.ecc-editor *, .ecc-store *, .ecc-pos *) {
    outline-color: var(--es-color-accent) !important;
}

/* ECC semantic gap bridge: only properties ECC does not currently normalise. */
:is(.ecc-editor, .ecc-store, .ecc-pos) h1 { text-transform: var(--es-transform-h1); }
:is(.ecc-editor, .ecc-store, .ecc-pos) h2 { text-transform: var(--es-transform-h2); }
:is(.ecc-editor, .ecc-store, .ecc-pos) h3 { text-transform: var(--es-transform-h3); }
:is(.ecc-editor, .ecc-store, .ecc-pos) h4 { text-transform: var(--es-transform-h4); }
:is(.ecc-editor, .ecc-store, .ecc-pos) :where(button, .button, .btn, [role="button"]) { text-transform: var(--es-transform-button); }