/* ============================================================
   Vizuni Button System
   Stripe-inspired, Vizuni brand colors.
   Three categories: Solid, Outlined, OAuth.
   Three sizes: sm, md (default), lg.
   ============================================================ */

/* ----- Custom Properties ----- */
:root {
    --btn-radius: 4px;
    --btn-radius-oauth: 8px;
    --btn-font-weight: 500;
    --btn-font-weight-oauth: 500;
    --btn-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --btn-transition-oauth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --btn-disabled-opacity: 0.55;
    --btn-focus-outline: 2px solid var(--color-primary-500);
    --btn-focus-offset: 2px;

    /* Sizes — sm */
    --btn-padding-sm: 0.4rem 0.85rem;
    --btn-font-size-sm: 0.8125rem;

    /* Sizes — md (default) */
    --btn-padding-md: 0.7rem 1.35rem;
    --btn-font-size-md: 0.9375rem;

    /* Sizes — lg */
    --btn-padding-lg: 0.85rem 1.75rem;
    --btn-font-size-lg: 1.0625rem;

    /* Outlined border */
    --btn-border-width: 1.5px;
}

/* =============================================================
   BASE — shared across all button types
   ============================================================= */
.btn-solid,
.btn-outlined,
.btn-oauth {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--font-family);
    line-height: 1;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    text-decoration: none;
}

.btn-solid:focus-visible,
.btn-outlined:focus-visible,
.btn-oauth:focus-visible {
    outline: var(--btn-focus-outline);
    outline-offset: var(--btn-focus-offset);
}

.btn-solid:disabled,
.btn-outlined:disabled,
.btn-oauth:disabled {
    opacity: var(--btn-disabled-opacity);
    cursor: not-allowed;
    pointer-events: none;
}

/* =============================================================
   SOLID BUTTONS — filled background, no border
   Default size: md
   ============================================================= */
.btn-solid {
    border: none;
    border-radius: var(--btn-radius);
    font-weight: var(--btn-font-weight);
    padding: var(--btn-padding-md);
    font-size: var(--btn-font-size-md);
    transition: var(--btn-transition);
}

/* --- Solid Semantic Variants --- */
.btn-solid.primary {
    background-color: var(--color-primary-500);
    color: var(--color-white);
}
.btn-solid.primary:not(:disabled):hover {
    background-color: var(--color-primary-700);
}

.btn-solid.secondary {
    background-color: var(--color-gray-700);
    color: var(--color-white);
}
.btn-solid.secondary:not(:disabled):hover {
    background-color: #616161;
}

.btn-solid.danger {
    background-color: var(--color-error);
    color: var(--color-white);
}
.btn-solid.danger:not(:disabled):hover {
    background-color: #D32F2F;
}

.btn-solid.warning {
    background-color: var(--color-warning);
    color: var(--color-white);
}
.btn-solid.warning:not(:disabled):hover {
    background-color: #F57C00;
}

.btn-solid.success {
    background-color: var(--color-success);
    color: var(--color-white);
}
.btn-solid.success:not(:disabled):hover {
    background-color: #388E3C;
}

.btn-solid.info {
    background-color: var(--color-primary-300);
    color: var(--color-white);
}
.btn-solid.info:not(:disabled):hover {
    background-color: var(--color-primary-500);
}

/* =============================================================
   OUTLINED BUTTONS — transparent bg, colored border
   Default size: md
   ============================================================= */
.btn-outlined {
    background: transparent;
    border: var(--btn-border-width) solid;
    border-radius: var(--btn-radius);
    font-weight: var(--btn-font-weight);
    padding: var(--btn-padding-md);
    font-size: var(--btn-font-size-md);
    transition: var(--btn-transition);
}

/* --- Outlined Semantic Variants --- */
.btn-outlined.primary {
    color: var(--color-primary-500);
    border-color: var(--color-primary-100);
}
.btn-outlined.primary:not(:disabled):hover {
    background-color: var(--color-primary-50);
    border-color: var(--color-primary-500);
}

.btn-outlined.secondary {
    color: var(--color-gray-700);
    border-color: var(--color-gray-400);
}
.btn-outlined.secondary:not(:disabled):hover {
    background-color: var(--color-gray-100);
    border-color: var(--color-gray-700);
}

.btn-outlined.danger {
    color: var(--color-error);
    border-color: #FFCDD2;
}
.btn-outlined.danger:not(:disabled):hover {
    background-color: #FFEBEE;
    border-color: var(--color-error);
}

.btn-outlined.warning {
    color: var(--color-warning);
    border-color: #FFE0B2;
}
.btn-outlined.warning:not(:disabled):hover {
    background-color: #FFF3E0;
    border-color: var(--color-warning);
}

.btn-outlined.success {
    color: var(--color-success);
    border-color: #C8E6C9;
}
.btn-outlined.success:not(:disabled):hover {
    background-color: #E8F5E9;
    border-color: var(--color-success);
}

.btn-outlined.info {
    color: var(--color-primary-300);
    border-color: var(--color-primary-100);
}
.btn-outlined.info:not(:disabled):hover {
    background-color: var(--color-primary-50);
    border-color: var(--color-primary-300);
}

/* =============================================================
   SIZE MODIFIERS — apply to both .btn-solid and .btn-outlined
   ============================================================= */
.btn-solid.sm,
.btn-outlined.sm {
    padding: var(--btn-padding-sm);
    font-size: var(--btn-font-size-sm);
}

.btn-solid.lg,
.btn-outlined.lg {
    padding: var(--btn-padding-lg);
    font-size: var(--btn-font-size-lg);
}

/* =============================================================
    OAUTH BUTTONS — Login page style, 8px radius, subtle elevation
    ============================================================= */
.btn-oauth {
    padding: 1rem 1.5rem;
     border: 1.5px solid transparent;
    background: var(--color-white);
    color: var(--color-gray-900);
    border-radius: var(--btn-radius-oauth);
    font-size: 1rem;
    font-weight: var(--btn-font-weight-oauth);
    transition: var(--btn-transition-oauth);
    position: relative;
    overflow: hidden;
}

.btn-oauth::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s;
}

.btn-oauth:hover::before {
    left: 100%;
}

.btn-oauth:not(:disabled):hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.btn-oauth:not(:disabled):active {
    transform: translateY(0);
}

/* OAuth provider variant — Google (brand-aligned) */
.btn-oauth.google,
.btn-oauth.btn-google {
    border-color: var(--color-primary-500);
    box-shadow: 0 2px 8px rgba(91, 121, 186, 0.2);
}

.btn-oauth.google:not(:disabled):hover,
.btn-oauth.btn-google:not(:disabled):hover {
    background: var(--color-primary-50);
    border-color: var(--color-primary-700);
    box-shadow: 0 8px 20px rgba(91, 121, 186, 0.3);
}

/* OAuth provider variant — Microsoft */
.btn-oauth.microsoft,
.btn-oauth.btn-microsoft {
    border-color: var(--color-primary-300);
    box-shadow: 0 2px 8px rgba(121, 134, 203, 0.2);
}

.btn-oauth.microsoft:not(:disabled):hover,
.btn-oauth.btn-microsoft:not(:disabled):hover {
    background: var(--color-primary-50);
    border-color: var(--color-primary-500);
    box-shadow: 0 8px 20px rgba(121, 134, 203, 0.3);
}

/* =============================================================
   DARK MODE
   ============================================================= */
body.dark .btn-solid.primary {
    background-color: var(--color-primary-300);
    color: var(--color-white);
}
body.dark .btn-solid.primary:not(:disabled):hover {
    background-color: var(--color-primary-500);
}

body.dark .btn-solid.secondary {
    background-color: #9E9E9E;
    color: var(--color-white);
}
body.dark .btn-solid.secondary:not(:disabled):hover {
    background-color: var(--color-gray-400);
}

body.dark .btn-solid.danger {
    background-color: #EF5350;
}
body.dark .btn-solid.danger:not(:disabled):hover {
    background-color: var(--color-error);
}

body.dark .btn-solid.warning {
    background-color: #FFB74D;
    color: var(--color-white);
}
body.dark .btn-solid.warning:not(:disabled):hover {
    background-color: var(--color-warning);
}

body.dark .btn-solid.success {
    background-color: #66BB6A;
}
body.dark .btn-solid.success:not(:disabled):hover {
    background-color: var(--color-success);
}

body.dark .btn-solid.info {
    background-color: var(--color-primary-100);
    color: var(--color-white);
}
body.dark .btn-solid.info:not(:disabled):hover {
    background-color: var(--color-primary-300);
}

/* -- Dark: Outlined -- */
body.dark .btn-outlined.primary {
    color: var(--color-primary-300);
    border-color: var(--color-primary-300);
}
body.dark .btn-outlined.primary:not(:disabled):hover {
    background-color: rgba(121, 134, 203, 0.15);
    border-color: var(--color-primary-100);
}

body.dark .btn-outlined.secondary {
    color: var(--color-gray-400);
    border-color: #616161;
}
body.dark .btn-outlined.secondary:not(:disabled):hover {
    background-color: rgba(158, 158, 158, 0.15);
    border-color: var(--color-gray-400);
}

body.dark .btn-outlined.danger {
    color: #EF5350;
    border-color: #EF5350;
}
body.dark .btn-outlined.danger:not(:disabled):hover {
    background-color: rgba(239, 83, 80, 0.15);
    border-color: #FFCDD2;
}

body.dark .btn-outlined.warning {
    color: #FFB74D;
    border-color: #FFB74D;
}
body.dark .btn-outlined.warning:not(:disabled):hover {
    background-color: rgba(255, 183, 77, 0.15);
    border-color: #FFE0B2;
}

body.dark .btn-outlined.success {
    color: #66BB6A;
    border-color: #66BB6A;
}
body.dark .btn-outlined.success:not(:disabled):hover {
    background-color: rgba(102, 187, 106, 0.15);
    border-color: #C8E6C9;
}

body.dark .btn-outlined.info {
    color: #B39DDB;
    border-color: #4527A0;
}
body.dark .btn-outlined.info:not(:disabled):hover {
    background-color: rgba(121, 134, 203, 0.12);
    border-color: #9FA8DA;
}

/* -- Dark: OAuth -- */
body.dark .btn-oauth {
    background: var(--color-gray-700);
    border-color: var(--color-gray-400);
    color: var(--color-gray-400);
}

body.dark .btn-oauth.google,
body.dark .btn-oauth.btn-google {
    border-color: var(--color-primary-300);
}
body.dark .btn-oauth.google:not(:disabled):hover,
body.dark .btn-oauth.btn-google:not(:disabled):hover {
    background: rgba(121, 134, 203, 0.2);
    border-color: var(--color-primary-100);
}

body.dark .btn-oauth.microsoft,
body.dark .btn-oauth.btn-microsoft {
    border-color: var(--color-primary-100);
}

body.dark .btn-oauth.microsoft:not(:disabled):hover,
body.dark .btn-oauth.btn-microsoft:not(:disabled):hover {
    background: rgba(121, 134, 203, 0.2);
    border-color: var(--color-primary-300);
}