/* ============================================================================
   HANKO ELEMENTS THEME — MonkeeVerse Purple-to-Blue Palette
   ============================================================================
   Aligns Hanko authentication UI with the MonkeeVerse MudBlazor theme.
   Uses CSS custom properties supported by Hanko's shadow DOM components.
   ============================================================================ */

hanko-auth,
hanko-login,
hanko-registration,
hanko-profile {
    /* Color Scheme — MonkeeVerse purple-to-blue gradient identity */
    --color: #1A1530;
    --color-shade-1: #9590A8;
    --color-shade-2: #E5E1F0;

    --brand-color: #6D4AE8;
    --brand-color-shade-1: #8A6DEF;
    --brand-contrast-color: #ffffff;

    --background-color: #ffffff;
    --error-color: #EF4444;
    --link-color: #4A80D4;

    /* Font Styles — match Poppins from MudBlazor theme */
    --font-weight: 400;
    --font-size: 14px;
    --font-family: "Poppins", "Inter", "Nunito", sans-serif;

    /* Border Styles */
    --border-radius: 8px;
    --border-style: solid;
    --border-width: 1px;

    /* Item Styles */
    --item-height: 40px;
    --item-margin: 0.5rem 0;

    /* Container Styles */
    --container-padding: 0;
    --container-max-width: 100%;

    /* Headline Styles */
    --headline1-font-size: 20px;
    --headline1-font-weight: 600;
    --headline1-margin: 0 0 0.75rem;

    --headline2-font-size: 14px;
    --headline2-font-weight: 500;
    --headline2-margin: 0.75rem 0 0.5rem;

    /* Divider Styles */
    --divider-padding: 0 42px;
    --divider-visibility: visible;

    /* Link Styles */
    --link-text-decoration: none;
    --link-text-decoration-hover: underline;

    /* Input Styles */
    --input-min-width: 14em;

    /* Button Styles */
    --button-min-width: max-content;
}

/* Shadow part overrides for finer control */
hanko-auth::part(primary-button),
hanko-login::part(primary-button),
hanko-registration::part(primary-button),
hanko-profile::part(primary-button) {
    background-color: #6D4AE8;
    border-color: #6D4AE8;
    border-radius: 8px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

hanko-auth::part(primary-button):hover,
hanko-login::part(primary-button):hover,
hanko-registration::part(primary-button):hover,
hanko-profile::part(primary-button):hover {
    background-color: #5C3ED0;
    border-color: #6D4AE8;
}

hanko-auth::part(secondary-button),
hanko-login::part(secondary-button),
hanko-registration::part(secondary-button),
hanko-profile::part(secondary-button) {
    color: #1A1530;
    border-color: #E5E1F0;
    border-radius: 8px;
}

hanko-auth::part(secondary-button):hover,
hanko-login::part(secondary-button):hover,
hanko-registration::part(secondary-button):hover,
hanko-profile::part(secondary-button):hover {
    background-color: #F1EFF8;
}

hanko-auth::part(input),
hanko-login::part(input),
hanko-registration::part(input),
hanko-profile::part(input) {
    border-color: #E5E1F0;
    border-radius: 8px;
}

hanko-auth::part(input):focus,
hanko-login::part(input):focus,
hanko-registration::part(input):focus,
hanko-profile::part(input):focus {
    border-color: #6D4AE8;
}

hanko-auth::part(headline1),
hanko-login::part(headline1),
hanko-registration::part(headline1),
hanko-profile::part(headline1) {
    color: #1A1530;
    font-family: "Poppins", "Inter", "Nunito", sans-serif;
}

hanko-auth::part(link),
hanko-login::part(link),
hanko-registration::part(link),
hanko-profile::part(link) {
    color: #4A80D4;
}

hanko-auth::part(divider-text),
hanko-login::part(divider-text),
hanko-registration::part(divider-text) {
    color: #9590A8;
}

hanko-auth::part(divider-line),
hanko-login::part(divider-line),
hanko-registration::part(divider-line) {
    border-color: #E5E1F0;
}

hanko-auth::part(error),
hanko-login::part(error),
hanko-registration::part(error),
hanko-profile::part(error) {
    color: #EF4444;
}