/*
 * AMCU Finance — Visual Alignment R2
 * Central presentation normalization layer.
 * Intentionally loaded after the existing application styles.
 */

:root {
    --amcu-ui-canvas: #f4f1eb;
    --amcu-ui-paper: #fffdf9;
    --amcu-ui-paper-soft: #faf7f1;
    --amcu-ui-navy: #10283f;
    --amcu-ui-navy-hover: #183b5b;
    --amcu-ui-navy-deep: #0c1726;
    --amcu-ui-ink: #162132;
    --amcu-ui-muted: #687587;
    --amcu-ui-line: #ded8ce;
    --amcu-ui-line-soft: #ebe6de;
    --amcu-ui-gold: #c7a56b;
    --amcu-ui-gold-hover: #b78d4e;
    --amcu-ui-gold-soft: #f0e5d4;
    --amcu-ui-danger: #a1494e;
    --amcu-ui-danger-hover: #8f3e43;
    --amcu-ui-danger-bg: #fff0f0;
    --amcu-ui-success: #2f7152;
    --amcu-ui-success-bg: #edf6f0;
    --amcu-ui-warning: #8b6729;
    --amcu-ui-warning-bg: #fff6e6;
    --amcu-ui-focus: rgba(199, 165, 107, .38);
    --amcu-ui-radius-control: 10px;
    --amcu-ui-radius-card: 16px;
    --amcu-ui-radius-large: 20px;
    --amcu-ui-shadow-small: 0 2px 8px rgba(16, 40, 63, .06);
    --amcu-ui-shadow-control: 0 8px 18px rgba(16, 40, 63, .10);
    --amcu-ui-shadow-card: 0 12px 35px rgba(16, 40, 63, .08);

    /* Reconcile existing token families to one palette. */
    --af2-canvas: var(--amcu-ui-canvas);
    --af2-paper: var(--amcu-ui-paper);
    --af2-paper-2: var(--amcu-ui-paper-soft);
    --af2-navy-900: var(--amcu-ui-navy);
    --af2-navy-950: var(--amcu-ui-navy-deep);
    --af2-gold: var(--amcu-ui-gold);
    --af2-gold-soft: var(--amcu-ui-gold-soft);
    --af2-line: var(--amcu-ui-line);
    --af2-line-soft: var(--amcu-ui-line-soft);
    --af2-ink-950: var(--amcu-ui-ink);
    --af2-ink-500: var(--amcu-ui-muted);
    --af2-red: var(--amcu-ui-danger);
    --af2-red-bg: var(--amcu-ui-danger-bg);
    --af2-green: var(--amcu-ui-success);
    --af2-green-bg: var(--amcu-ui-success-bg);
    --af2-amber: var(--amcu-ui-warning);
    --af2-amber-bg: var(--amcu-ui-warning-bg);
    --af2-radius: var(--amcu-ui-radius-card);
    --af2-radius-lg: var(--amcu-ui-radius-large);
    --af2-shadow: var(--amcu-ui-shadow-card);
    --af2-shadow-lg: 0 22px 55px rgba(16, 40, 63, .11);

    --lf-canvas: var(--amcu-ui-canvas);
    --lf-paper: var(--amcu-ui-paper);
    --lf-navy-900: var(--amcu-ui-navy);
    --lf-navy-950: var(--amcu-ui-navy-deep);
    --lf-gold: var(--amcu-ui-gold);
    --lf-gold-strong: var(--amcu-ui-gold-hover);
    --lf-gold-soft: var(--amcu-ui-gold-soft);
    --lf-line: var(--amcu-ui-line);
    --lf-ink: var(--amcu-ui-ink);
    --lf-muted: var(--amcu-ui-muted);

    --amcu-canvas: var(--amcu-ui-canvas);
    --amcu-surface: var(--amcu-ui-paper);
    --amcu-surface-soft: var(--amcu-ui-paper-soft);
    --amcu-navy-900: var(--amcu-ui-navy);
    --amcu-navy-950: var(--amcu-ui-navy-deep);
    --amcu-ink-950: var(--amcu-ui-ink);
    --amcu-ink-500: var(--amcu-ui-muted);
    --amcu-line: var(--amcu-ui-line);
    --amcu-line-soft: var(--amcu-ui-line-soft);
    --amcu-gold-500: var(--amcu-ui-gold);
    --amcu-danger: var(--amcu-ui-danger);
    --amcu-danger-bg: var(--amcu-ui-danger-bg);
    --amcu-success: var(--amcu-ui-success);
    --amcu-success-bg: var(--amcu-ui-success-bg);
    --amcu-warning: var(--amcu-ui-warning);
    --amcu-warning-bg: var(--amcu-ui-warning-bg);
    --amcu-radius-sm: 8px;
    --amcu-radius-md: var(--amcu-ui-radius-control);
    --amcu-radius-lg: var(--amcu-ui-radius-card);
    --amcu-radius-xl: var(--amcu-ui-radius-large);
    --amcu-shadow-sm: var(--amcu-ui-shadow-small);
    --amcu-shadow-md: var(--amcu-ui-shadow-card);

    --finance-surface: var(--amcu-ui-canvas);
    --finance-white: var(--amcu-ui-paper);
    --finance-navy: var(--amcu-ui-navy);
    --finance-navy-deep: var(--amcu-ui-navy-deep);
    --finance-ink: var(--amcu-ui-ink);
    --finance-muted: var(--amcu-ui-muted);
    --finance-line: var(--amcu-ui-line);
    --finance-accent: var(--amcu-ui-gold);
    --finance-accent-soft: var(--amcu-ui-gold-soft);
    --finance-shadow: var(--amcu-ui-shadow-card);
}

html,
body,
body.financeBody {
    background: var(--amcu-ui-canvas) !important;
    color: var(--amcu-ui-ink);
}

/* Square brand marks: use the square AMCU/LEAD icon at a useful visual size. */
.brandLogo,
.af2BrandLogo {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    border: 1px solid var(--amcu-ui-line) !important;
    border-radius: 12px !important;
    background: var(--amcu-ui-paper) !important;
    box-shadow: var(--amcu-ui-shadow-small) !important;
    overflow: hidden;
}

.brandLogo img,
.af2BrandLogo img {
    width: 100% !important;
    height: 100% !important;
    padding: 3px !important;
    object-fit: contain !important;
    opacity: 1 !important;
}

/* Shared control contract. */
:where(
    .primaryButton,
    .secondaryButton,
    .quietButton,
    .dangerButton,
    .financePrimary,
    .financeSecondary,
    .financeDanger,
    .financeActionControl,
    .af-btn,
    .compactButton,
    .companyCardAction,
    .lfLoginButton,
    .lfButton,
    .iconButton,
    .af2IconButton,
    .accountWorkspaceMenuButton,
    .btn
) {
    min-height: 44px !important;
    border-radius: var(--amcu-ui-radius-control) !important;
    font-family: "Instrument Sans", ui-sans-serif, system-ui, sans-serif !important;
    transition:
        background-color .16s ease,
        border-color .16s ease,
        color .16s ease,
        box-shadow .16s ease,
        transform .16s ease,
        opacity .16s ease !important;
}

/* Standard primary action. */
:where(
    .primaryButton,
    .financePrimary,
    .af-btn:not(.af-btn-secondary),
    .btn.btn-primary
) {
    background: var(--amcu-ui-navy) !important;
    border: 1px solid var(--amcu-ui-navy) !important;
    color: #fff !important;
    box-shadow: var(--amcu-ui-shadow-control) !important;
    font-weight: 720 !important;
}

:where(
    .primaryButton,
    .financePrimary,
    .af-btn:not(.af-btn-secondary),
    .btn.btn-primary
):not(:disabled):not([aria-disabled="true"]):hover {
    background: var(--amcu-ui-navy-hover) !important;
    border-color: var(--amcu-ui-navy-hover) !important;
    color: #fff !important;
    box-shadow: 0 10px 24px rgba(16, 40, 63, .16) !important;
    transform: translateY(-1px) !important;
}

/* Standard secondary/quiet action. */
:where(
    .secondaryButton,
    .quietButton,
    .financeSecondary,
    .af-btn-secondary,
    .compactButton,
    .companyCardAction,
    .lfLoginButton,
    .btn:not(.btn-primary):not(.btn-danger)
) {
    background: var(--amcu-ui-paper) !important;
    border: 1px solid var(--amcu-ui-line) !important;
    color: var(--amcu-ui-navy) !important;
    box-shadow: var(--amcu-ui-shadow-small) !important;
    font-weight: 720 !important;
}

:where(
    .secondaryButton,
    .quietButton,
    .financeSecondary,
    .af-btn-secondary,
    .compactButton,
    .companyCardAction,
    .lfLoginButton,
    .btn:not(.btn-primary):not(.btn-danger)
):not(:disabled):not([aria-disabled="true"]):hover {
    background: var(--amcu-ui-gold-soft) !important;
    border-color: var(--amcu-ui-gold) !important;
    color: var(--amcu-ui-navy-deep) !important;
    box-shadow: var(--amcu-ui-shadow-control) !important;
    transform: translateY(-1px) !important;
}

/* Public hero accent action remains gold, but follows the same motion/radius contract. */
.lfButtonPrimary {
    min-height: 48px !important;
    background: var(--amcu-ui-gold) !important;
    border: 1px solid var(--amcu-ui-gold) !important;
    color: var(--amcu-ui-navy-deep) !important;
    box-shadow: 0 10px 24px rgba(16, 40, 63, .13) !important;
}

.lfButtonPrimary:hover {
    background: var(--amcu-ui-gold-hover) !important;
    border-color: var(--amcu-ui-gold-hover) !important;
    color: var(--amcu-ui-navy-deep) !important;
    box-shadow: 0 12px 28px rgba(16, 40, 63, .18) !important;
    transform: translateY(-1px) !important;
}

/* Secondary action placed on a dark hero. */
.lfButtonSecondary {
    min-height: 48px !important;
    background: rgba(255, 255, 255, .06) !important;
    border: 1px solid rgba(255, 255, 255, .28) !important;
    color: #fff !important;
    box-shadow: none !important;
}

.lfButtonSecondary:hover {
    background: rgba(255, 255, 255, .14) !important;
    border-color: rgba(255, 255, 255, .50) !important;
    color: #fff !important;
    transform: translateY(-1px) !important;
}

/* Light CTA used on dark panels. */
.lfButtonLight {
    min-height: 48px !important;
    background: var(--amcu-ui-paper) !important;
    border: 1px solid var(--amcu-ui-paper) !important;
    color: var(--amcu-ui-navy-deep) !important;
    box-shadow: var(--amcu-ui-shadow-control) !important;
}

.lfButtonLight:hover {
    background: var(--amcu-ui-gold-soft) !important;
    border-color: var(--amcu-ui-gold) !important;
    color: var(--amcu-ui-navy-deep) !important;
    transform: translateY(-1px) !important;
}

/* Destructive actions. */
:where(.dangerButton, .financeDanger, .btn-danger, .danger) {
    background: var(--amcu-ui-danger-bg) !important;
    border: 1px solid rgba(161, 73, 78, .34) !important;
    color: var(--amcu-ui-danger) !important;
    box-shadow: none !important;
}

:where(.dangerButton, .financeDanger, .btn-danger, .danger):not(:disabled):hover {
    background: var(--amcu-ui-danger) !important;
    border-color: var(--amcu-ui-danger) !important;
    color: #fff !important;
    transform: translateY(-1px) !important;
}

/* Icon-only controls use one target size and one interaction language. */
:where(.iconButton, .af2IconButton, .accountWorkspaceMenuButton) {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    display: inline-grid !important;
    place-items: center !important;
    background: var(--amcu-ui-paper) !important;
    border: 1px solid var(--amcu-ui-line) !important;
    color: var(--amcu-ui-navy) !important;
    box-shadow: var(--amcu-ui-shadow-small) !important;
}

:where(.iconButton, .af2IconButton, .accountWorkspaceMenuButton):hover {
    background: var(--amcu-ui-gold-soft) !important;
    border-color: var(--amcu-ui-gold) !important;
    color: var(--amcu-ui-navy-deep) !important;
}

/* Keyboard focus is consistent and visible across action families. */
:where(
    a,
    button,
    input,
    select,
    textarea,
    summary,
    [role="button"]
):focus-visible {
    outline: 3px solid var(--amcu-ui-focus) !important;
    outline-offset: 3px !important;
}

/* Disabled action language. */
:where(button, input[type="submit"], input[type="button"], [role="button"]):disabled,
:where(a, button, [role="button"])[aria-disabled="true"] {
    opacity: .52 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Form controls use the same paper/line/radius/focus language. */
:where(
    .financeBody,
    .authPage,
    .lfPage,
    .af2App
) :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    select,
    textarea
) {
    background: var(--amcu-ui-paper) !important;
    border-color: var(--amcu-ui-line) !important;
    border-radius: var(--amcu-ui-radius-control) !important;
    color: var(--amcu-ui-ink) !important;
    min-height: 44px;
}

:where(
    .financeBody,
    .authPage,
    .lfPage,
    .af2App
) :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    select,
    textarea
):focus {
    border-color: var(--amcu-ui-gold) !important;
    box-shadow: 0 0 0 3px var(--amcu-ui-focus) !important;
}

/* Common card/panel language: paper surface, restrained border and shadow. */
:where(
    .authCard,
    .companyCard,
    .financePanel,
    .accountQuickCard,
    .af2Panel
) {
    background: var(--amcu-ui-paper) !important;
    border-color: var(--amcu-ui-line) !important;
    border-radius: var(--amcu-ui-radius-card) !important;
    box-shadow: var(--amcu-ui-shadow-card) !important;
}

/* Status colors remain semantic but use the same palette family. */
:where(.financeNotice--danger, .amcuDangerZone) {
    background: var(--amcu-ui-danger-bg) !important;
    color: var(--amcu-ui-danger) !important;
}

@media (max-width: 640px) {
    .lfLoginButton {
        min-height: 44px !important;
        height: 44px !important;
        padding-inline: 14px !important;
        font-size: 10px !important;
    }

    :where(
        .primaryButton,
        .secondaryButton,
        .quietButton,
        .dangerButton,
        .financePrimary,
        .financeSecondary,
        .financeDanger,
        .financeActionControl,
        .af-btn,
        .compactButton,
        .companyCardAction,
        .lfButton,
        .btn
    ) {
        min-height: 44px !important;
    }
}