/**
 * Button Component (Figma node 2041:590)
 *
 * Variants:
 * - filled: solid background
 * - outlined: transparent background with border
 * - text: no background, no border
 *
 * Colors:
 * - accent (magenta)
 * - subaccent (green)
 * - solid-light (white)
 * - solid-dark (black)
 * - content (white)
 */

.buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: center;
    margin-bottom: 24px; /* spacing between rows */
}

.button {
    font-family: var(--font-body);
    font-size: 16px; /* legacy default */
    font-weight: 400;
    line-height: var(--line-height-body-3-desktop); /* 120% */
    letter-spacing: 0;
    padding: 12px 24px;
    border-radius: 1000px; /* pill-shaped */
    border: none;
    cursor: pointer;
    transition: all 0.5s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.button--small {
    font-size: var(--font-size-body-2-desktop); /* 24px */
    font-weight: 300;
    line-height: var(--line-height-body-2-desktop); /* 130% */
    letter-spacing: 0;
    padding: 8px 20px;
}

.button--big {
    font-size: var(--font-size-body-1-desktop); /* 36px */
    font-weight: 300;
    line-height: var(--line-height-body-1-desktop); /* 100% */
    letter-spacing: -0.02em;
    padding: 20px 32px;
}

/* Hover: мгновенный вход, плавный выход */
.button:hover {
    transition: all 0s ease;
}

/* Filled variant */
.button--filled {
    background-color: var(--color-accent);
    color: var(--color-solid-light);
}

.button--filled.button--accent {
    background-color: var(--color-accent);
    color: var(--color-solid-light);
}

.button--filled.button--subaccent {
    background-color: var(--color-subaccent);
}

.button--filled.button--solid-light {
    background-color: var(--color-content);
    color: var(--color-background);
}

/* Filled subaccent with dark text */
.button--filled.button--subaccent.button--text-dark {
    background-color: var(--color-subaccent);
    color: var(--color-solid-dark);
}

/* Filled subaccent with light text */
.button--filled.button--subaccent.button--text-light {
    background-color: var(--color-subaccent);
    color: var(--color-solid-light);
}

/* Outlined variant */
.button--outlined {
    background-color: transparent;
    border: 2px solid;
}

.button--outlined.button--accent {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.button--outlined.button--subaccent {
    border-color: var(--color-subaccent);
    color: var(--color-subaccent);
}

.button--outlined.button--solid-light {
    border-color: var(--color-content);
    color: var(--color-content);
}

.button--outlined.button--subaccent.button--text-light {
    border-color: var(--color-subaccent);
    color: var(--color-solid-light);
}

/* Text-only variant */
.button--text {
    background-color: transparent;
    border: none;
}

.button--text.button--accent {
    color: var(--color-accent);
}

.button--text.button--subaccent {
    color: var(--color-subaccent);
}

.button--text.button--solid-dark {
    color: var(--color-content);
}

.button--text.button--content {
    color: var(--color-content);
}

/* Hover: outline 4px subaccent-a30 (filled и outlined) */
.button--filled:hover,
.button--outlined:hover {
    outline: 4px solid var(--color-subaccent-a30);
    outline-offset: 0;
}

/* Active (клик): outline accent-a30 */
.button--filled:active,
.button--outlined:active {
    outline: 4px solid var(--color-accent-a30);
    outline-offset: 0;
}

/* Hover: смена цвета/фона/бордера на subaccent */
.button--filled.button--accent:hover,
.button--filled.button--accent.button--demo-hover {
    background-color: var(--color-subaccent);
    color: var(--color-invert);
}

.button--filled.button--subaccent:hover {
    background-color: var(--color-accent);
}

.button--filled.button--solid-light:hover,
.button--filled.button--solid-light.button--demo-hover {
    background-color: var(--color-subaccent);
    color: var(--color-background);
}

.button--outlined.button--accent:hover,
.button--outlined.button--accent.button--demo-hover {
    border-color: var(--color-subaccent);
    color: var(--color-subaccent);
    background-color: transparent;
}

.button--outlined.button--subaccent:hover {
    background-color: var(--color-subaccent);
    color: var(--color-solid-dark);
}

.button--outlined.button--solid-light:hover,
.button--outlined.button--solid-light.button--demo-hover {
    border-color: var(--color-subaccent);
    color: var(--color-subaccent);
    background-color: transparent;
}

.button--outlined.button--subaccent.button--text-light:hover {
    background-color: var(--color-subaccent);
    color: var(--color-solid-light);
}

.button--text.button--accent:hover,
.button--text.button--accent.button--demo-hover {
    color: var(--color-subaccent);
}

.button--text.button--subaccent:hover {
    color: var(--color-accent);
}

.button--text.button--solid-dark:hover,
.button--text.button--solid-dark.button--demo-hover {
    color: var(--color-subaccent);
}

.button--text.button--content:hover {
    color: var(--color-subaccent);
}

/* Active (клик): accent везде, где на hover был subaccent */
.button--filled.button--accent:active {
    background-color: var(--color-accent);
    color: var(--color-solid-light);
}

.button--filled.button--solid-light:active {
    background-color: var(--color-accent);
    color: var(--color-solid-light);
}

.button--outlined.button--accent:active {
    border-color: var(--color-accent);
    color: var(--color-accent);
    background-color: transparent;
}

.button--outlined.button--subaccent:active {
    border-color: var(--color-accent);
    color: var(--color-accent);
    background-color: transparent;
}

.button--outlined.button--solid-light:active {
    border-color: var(--color-accent);
    color: var(--color-accent);
    background-color: transparent;
}

.button--outlined.button--subaccent.button--text-light:active {
    border-color: var(--color-accent);
    color: var(--color-accent);
    background-color: transparent;
}

.button--text.button--accent:active,
.button--text.button--solid-dark:active,
.button--text.button--content:active {
    color: var(--color-accent);
}

/* Active: лёгкое нажатие */
.button:active {
    transform: scale(0.98);
}

/* Disabled state */
.button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}