/**
 * Syncfusion theme — recolours the `tailwind3` Syncfusion theme
 * (css/vendor/syncfusion-ej2-*-tailwind3.css) with the project palette from
 * shared/css/base.css, the same way portal/apps/css/syncfusion-theme.css does.
 *
 * Rules:
 *   - Prefer overriding a `--color-sf-*` variable over writing an `.e-*` rule.
 *   - Imported after app-core/css/index.css (see app/scripts/setup.html.ts)
 *     so it wins by cascade order over the prebuilt tailwind3 defaults.
 *   - Keep this in sync with portal/apps/css/syncfusion-theme.css — both apps
 *     share the same brand palette.
 */

:root {
    /* ---- Primary (brand purple) -------------------------------------------
     * Drives: solid/primary buttons, focus ring.
     */
    --color-sf-primary: var(--color-purple-500);
    --color-sf-primary-bg-color: var(--color-purple-500);
    --color-sf-primary-bg-color-hover: var(--color-purple-600);
    --color-sf-primary-bg-color-pressed: var(--color-purple-700);
    --color-sf-primary-bg-color-focus: var(--color-purple-600);
    --color-sf-primary-bg-color-disabled: var(--color-purple-100);

    --color-sf-primary-border-color: var(--color-purple-500);
    --color-sf-primary-border-color-hover: var(--color-purple-600);
    --color-sf-primary-border-color-pressed: var(--color-purple-700);
    --color-sf-primary-border-color-focus: var(--color-purple-600);
    --color-sf-primary-border-color-disabled: var(--color-purple-100);

    --color-sf-primary-text-color: var(--color-white);
    --color-sf-primary-text: var(--color-white);
    --color-sf-primary-text-hover: var(--color-white);
    --color-sf-primary-text-pressed: var(--color-white);
    --color-sf-primary-text-focus: var(--color-white);

    /* ---- Danger (red) ------------------------------------------------------ */
    --color-sf-danger: var(--color-danger);
    --color-sf-danger-bg-color: var(--color-danger);
    --color-sf-danger-bg-color-hover: var(--color-red-600);
    --color-sf-danger-bg-color-pressed: var(--color-red-600);
    --color-sf-danger-bg-color-focus: var(--color-red-600);
    --color-sf-danger-border-color: var(--color-danger);
    --color-sf-danger-border-color-hover: var(--color-red-600);
    --color-sf-danger-border-color-pressed: var(--color-red-600);
    --color-sf-danger-border-color-focus: var(--color-red-600);

    /* ---- Success (green) --------------------------------------------------- */
    --color-sf-success: var(--color-success);
    --color-sf-success-bg-color: var(--color-success);
    --color-sf-success-bg-color-hover: var(--color-green-700);
    --color-sf-success-bg-color-pressed: var(--color-green-700);
    --color-sf-success-bg-color-focus: var(--color-green-700);
    --color-sf-success-border-color: var(--color-success);
    --color-sf-success-border-color-hover: var(--color-green-700);
    --color-sf-success-border-color-pressed: var(--color-green-700);

    /* ---- Warning (orange) -------------------------------------------------- */
    --color-sf-warning: var(--color-warning);
    --color-sf-warning-bg-color: var(--color-warning);
    --color-sf-warning-bg-color-hover: var(--color-orange-700);
    --color-sf-warning-bg-color-pressed: var(--color-orange-700);
    --color-sf-warning-bg-color-focus: var(--color-orange-700);
    --color-sf-warning-border-color: var(--color-warning);
    --color-sf-warning-border-color-hover: var(--color-orange-700);
    --color-sf-warning-border-color-pressed: var(--color-orange-700);

    /* ---- Info (cyan) ------------------------------------------------------- */
    --color-sf-info: var(--color-info);
    --color-sf-info-bg-color: var(--color-info);
    --color-sf-info-bg-color-hover: var(--color-cyan-700);
    --color-sf-info-bg-color-pressed: var(--color-cyan-700);
    --color-sf-info-bg-color-focus: var(--color-cyan-700);
    --color-sf-info-border-color: var(--color-info);
    --color-sf-info-border-color-hover: var(--color-cyan-700);
    --color-sf-info-border-color-pressed: var(--color-cyan-700);
}