@import url("theme.tokens.css");

/* ================================================================
   Shared button styles for NewContent elements.
   Uses theme tokens. Hover = slight darken/lighten, never white/black.
   ================================================================ */

/* ----------------------------------------------------------------
   Base
   ---------------------------------------------------------------- */
.nc-button {
    --nc-button-bg: var(--color-primary);
    --nc-button-bg-hover: var(--color-primary-hover);
    --nc-button-border: var(--color-primary);
    --nc-button-border-hover: var(--color-primary-hover);
    --nc-button-color: var(--color-white);
    --nc-button-outline-bg: rgba(0, 167, 224, 0.08);
    --nc-button-outline-bg-hover: rgba(0, 167, 224, 0.14);

    position: relative;
    z-index: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.85rem 1.75rem;
    border: 2px solid var(--nc-button-border);
    border-radius: 999px;
    background: var(--nc-button-bg);
    color: var(--nc-button-color) !important;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    overflow: visible;
    cursor: pointer;
    transition:
        background var(--ss-transition-fast),
        border-color var(--ss-transition-fast),
        color var(--ss-transition-fast),
        transform var(--ss-transition-fast),
        box-shadow var(--ss-transition-fast);
}

/* Border animation pseudo-element */
.nc-button::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 999px;
    border: 2px solid var(--nc-button-border);
    opacity: 0;
    transform: scale(0.96);
    pointer-events: none;
    transition:
        opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover / Focus — darken bg slightly, show outer border */
.nc-button:hover,
.nc-button:focus-visible {
    background: var(--nc-button-bg-hover);
    border-color: var(--nc-button-border-hover);
    color: var(--nc-button-color) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    text-decoration: none;
}

.nc-button:hover::after,
.nc-button:focus-visible::after {
    opacity: 0.6;
    transform: scale(1);
    border-color: var(--nc-button-border-hover);
}

.nc-button:active {
    transform: translateY(0);
    box-shadow: none;
}

/* ----------------------------------------------------------------
   Tone: Primary (brand blue)
   ---------------------------------------------------------------- */
.nc-button--tone-primary {
    --nc-button-bg: var(--color-primary);
    --nc-button-bg-hover: var(--color-primary-hover);
    --nc-button-border: var(--color-primary);
    --nc-button-border-hover: var(--color-primary-hover);
    --nc-button-color: var(--color-white);
    --nc-button-outline-bg: rgba(0, 167, 224, 0.08);
    --nc-button-outline-bg-hover: rgba(0, 167, 224, 0.14);
}

/* ----------------------------------------------------------------
   Tone: Secondary (dark blue brand)
   ---------------------------------------------------------------- */
.nc-button--tone-secondary {
    --nc-button-bg: var(--color-secondary);
    --nc-button-bg-hover: var(--color-secondary-hover);
    --nc-button-border: var(--color-secondary);
    --nc-button-border-hover: var(--color-secondary-hover);
    --nc-button-color: var(--color-white);
    --nc-button-outline-bg: rgba(0, 53, 71, 0.08);
    --nc-button-outline-bg-hover: rgba(0, 53, 71, 0.14);
}

/* ----------------------------------------------------------------
   Tone: Dark (near-black)
   ---------------------------------------------------------------- */
.nc-button--tone-dark {
    --nc-button-bg: var(--color-dark);
    --nc-button-bg-hover: var(--color-dark-hover);
    --nc-button-border: var(--color-dark);
    --nc-button-border-hover: var(--color-dark-hover);
    --nc-button-color: var(--color-white);
    --nc-button-outline-bg: rgba(29, 29, 29, 0.1);
    --nc-button-outline-bg-hover: rgba(29, 29, 29, 0.16);
}

/* ----------------------------------------------------------------
   Tone: Light (white surface, dark text)
   ---------------------------------------------------------------- */
.nc-button--tone-light {
    --nc-button-bg: var(--color-white);
    --nc-button-bg-hover: var(--color-surface-alt);
    --nc-button-border: var(--color-border-default);
    --nc-button-border-hover: var(--color-border-strong);
    --nc-button-color: var(--color-dark);
    --nc-button-outline-bg: rgba(0, 53, 71, 0.04);
    --nc-button-outline-bg-hover: rgba(0, 53, 71, 0.08);
}

/* ----------------------------------------------------------------
   Tone: Accent (vivid violet)
   ---------------------------------------------------------------- */
.nc-button--tone-accent {
    --nc-button-bg: var(--color-accent);
    --nc-button-bg-hover: var(--color-accent-hover);
    --nc-button-border: var(--color-accent);
    --nc-button-border-hover: var(--color-accent-hover);
    --nc-button-color: var(--color-white);
    --nc-button-outline-bg: rgba(109, 61, 242, 0.08);
    --nc-button-outline-bg-hover: rgba(109, 61, 242, 0.16);
}

/* ----------------------------------------------------------------
   Tone: Red (strong action)
   ---------------------------------------------------------------- */
.nc-button--tone-red {
    --nc-button-bg: var(--color-red);
    --nc-button-bg-hover: var(--color-red-hover);
    --nc-button-border: var(--color-red);
    --nc-button-border-hover: var(--color-red-hover);
    --nc-button-color: var(--color-white);
    --nc-button-outline-bg: rgba(217, 45, 32, 0.08);
    --nc-button-outline-bg-hover: rgba(217, 45, 32, 0.14);
}

/* ----------------------------------------------------------------
   Tone: Yellow (highlight)
   ---------------------------------------------------------------- */
.nc-button--tone-yellow {
    --nc-button-bg: var(--color-yellow);
    --nc-button-bg-hover: var(--color-yellow-hover);
    --nc-button-border: var(--color-yellow);
    --nc-button-border-hover: var(--color-yellow-hover);
    --nc-button-color: var(--color-dark);
    --nc-button-outline-bg: rgba(244, 180, 0, 0.1);
    --nc-button-outline-bg-hover: rgba(244, 180, 0, 0.18);
}

/* ----------------------------------------------------------------
   Fill Style: Solid (default)
   ---------------------------------------------------------------- */
.nc-button--style-solid {
    background: var(--nc-button-bg);
    border-color: var(--nc-button-border);
    color: var(--nc-button-color) !important;
}

/* ----------------------------------------------------------------
   Fill Style: Outline
   Background transparent, text = border color, hover = subtle tint.
   ---------------------------------------------------------------- */
.nc-button--style-outline {
    background: transparent !important;
    color: var(--nc-button-border) !important;
}

.nc-button--style-outline:hover,
.nc-button--style-outline:focus-visible {
    background: var(--nc-button-outline-bg-hover) !important;
    border-color: var(--nc-button-border-hover);
    color: var(--nc-button-border-hover) !important;
}

.nc-button--style-outline::after {
    opacity: 0;
}

.nc-button--style-outline:hover::after,
.nc-button--style-outline:focus-visible::after {
    opacity: 0.5;
    border-color: var(--nc-button-border-hover);
}

/* ----------------------------------------------------------------
   Legacy aliases (backward compat)
   ---------------------------------------------------------------- */
.nc-button--primary:not([class*="nc-button--tone-"]) {
    --nc-button-bg: var(--color-primary);
    --nc-button-bg-hover: var(--color-primary-hover);
    --nc-button-border: var(--color-primary);
    --nc-button-border-hover: var(--color-primary-hover);
    --nc-button-color: var(--color-white);
    --nc-button-outline-bg: rgba(0, 167, 224, 0.08);
    --nc-button-outline-bg-hover: rgba(0, 167, 224, 0.14);
}

.nc-button--light:not([class*="nc-button--tone-"]) {
    --nc-button-bg: var(--color-white);
    --nc-button-bg-hover: var(--color-surface-alt);
    --nc-button-border: var(--color-border-default);
    --nc-button-border-hover: var(--color-border-strong);
    --nc-button-color: var(--color-dark);
    --nc-button-outline-bg: rgba(0, 53, 71, 0.04);
    --nc-button-outline-bg-hover: rgba(0, 53, 71, 0.08);
}

/* ----------------------------------------------------------------
   Responsive
   ---------------------------------------------------------------- */
@media (max-width: 767px) {
    .nc-button {
        width: 100%;
        max-width: 26rem;
    }
}