/* ============================================================
   Syncfusion button — host-agnostic brand override.

   Why this file exists:
   Plain <button class="e-btn e-primary"> markup emitted by the
   <app-form-buttons> tag helper has been migrated to c-button,
   but any direct <ejs-button> usage anywhere in the platform
   still inherits .e-btn / .e-primary / .e-normal styling from
   Syncfusion's fluent.css. These rules pin those buttons to
   whatever the host has bound to --color-accent / --color-line
   / --color-ink / --color-on-dark / --color-surface-alt — so
   the visual matches the c-button system regardless of which
   element type is rendered, and regardless of the host's brand
   palette.

   Layer:
   Rules live in @layer brand. The cascade order declared in
   tokens/app-layers.css (legacy, reset, tokens, base, layouts,
   components, vendor, utilities, brand, syncfusion) puts brand
   AFTER vendor, so these reliably override fluent.css without
   needing !important.

   Host-agnostic:
   Every value is a semantic token. Hosts rebind the semantic
   tokens in their own brand layer; this file inherits whatever
   --color-accent etc resolve to and never has to know.
   ============================================================ */
@layer brand {

    /* Primary — matches c-button--solid */
    .e-btn.e-primary,
    .e-css.e-btn.e-primary {
        background-color: var(--color-accent);
        border-color: var(--color-accent);
        color: var(--color-on-dark);
    }

    .e-btn.e-primary:hover,
    .e-btn.e-primary:focus,
    .e-css.e-btn.e-primary:hover,
    .e-css.e-btn.e-primary:focus {
        background-color: var(--color-accent-deep);
        border-color: var(--color-accent-deep);
        color: var(--color-on-dark);
    }

    .e-btn.e-primary:active,
    .e-css.e-btn.e-primary:active {
        background-color: var(--color-accent-deep);
        border-color: var(--color-accent-deep);
    }

    .e-btn.e-primary:disabled,
    .e-css.e-btn.e-primary:disabled {
        opacity: 0.5;
    }

    /* Neutral / secondary — matches c-button--ghost (outlined ink) */
    .e-btn.e-normal,
    .e-css.e-btn.e-normal {
        background-color: transparent;
        border-color: var(--color-line);
        color: var(--color-ink);
    }

    .e-btn.e-normal:hover,
    .e-css.e-btn.e-normal:hover {
        background-color: var(--color-surface-alt);
        border-color: var(--color-ink);
        color: var(--color-ink);
    }
}