/* ==========================================================================
   ALOP shared design tokens
   Semantic tokens for the ALOP module (document manager, DF editor, payment
   orders, SuperAdmin destructive-operations panels). Derived from the app-wide
   --tdl-* tokens so light/dark theming and contrast stay consistent; ALOP
   components should prefer these over ad-hoc colors or unrelated frameworks
   (e.g. Bootstrap's --bs-primary-rgb).
   ========================================================================== */

:root {
    --alop-text: var(--tdl-text-primary);
    --alop-text-muted: var(--tdl-text-muted);
    --alop-surface: var(--tdl-surface);
    --alop-surface-soft: var(--tdl-surface-soft);
    --alop-border: var(--tdl-border);
    --alop-border-strong: var(--tdl-border-strong);

    --alop-selected-row-bg: var(--tdl-primary-soft);
    --alop-selected-row-border: var(--tdl-primary-soft-border);

    --alop-focus-ring: var(--tdl-primary-active);
    --alop-focus-ring-offset: 2px;

    --alop-success: var(--tdl-success);
    --alop-success-soft: var(--tdl-success-soft);
    --alop-success-soft-border: var(--tdl-success-soft-border);

    --alop-warning: var(--tdl-warning);
    --alop-warning-soft: var(--tdl-warning-soft);
    --alop-warning-soft-border: var(--tdl-warning-soft-border);

    --alop-error: var(--tdl-danger);
    --alop-error-soft: var(--tdl-danger-soft);
    --alop-error-soft-border: var(--tdl-danger-soft-border);

    --alop-disabled-bg: var(--tdl-surface-muted);
    --alop-disabled-text: var(--tdl-text-subtle);
}

/* Visible keyboard focus for every ALOP interactive element, regardless of
   which component/page it lives in - satisfies the "visible keyboard focus"
   accessibility requirement without needing a per-component pass. */
[class*="alop-"]:focus-visible {
    outline: 2px solid var(--alop-focus-ring);
    outline-offset: var(--alop-focus-ring-offset);
}