/* Linkweave — Frontend Styles (CSS-variable driven) */

:root {
    --lw-btn-bg:               #1a1a2e;
    --lw-btn-color:            #ffffff;
    --lw-btn-hover-bg:         #e94560;
    --lw-btn-hover-color:      #ffffff;
    --lw-btn-radius:           50px;
    --lw-btn-padding:          0.85rem 1.5rem;
    --lw-wrapper-bg:           #fafafa;
    --lw-wrapper-border-top:   1px solid #e2e8f0;
    --lw-wrapper-border-right: none;
    --lw-wrapper-border-bottom:none;
    --lw-wrapper-border-left:  none;
    --lw-wrapper-radius:       4px;
    --lw-wrapper-padding:      28px 20px;
    --lw-wrapper-shadow:       none;
    --lw-intro-color:          #999;
    --lw-intro-size:           11px;
    --lw-intro-weight:         700;
    --lw-intro-transform:      uppercase;
    --lw-intro-spacing:        0.12em;
}

.lw-wrapper {
    margin: 3rem 0 1.5rem;
    padding: var(--lw-wrapper-padding);
    background: var(--lw-wrapper-bg);
    border-top:    var(--lw-wrapper-border-top);
    border-right:  var(--lw-wrapper-border-right);
    border-bottom: var(--lw-wrapper-border-bottom);
    border-left:   var(--lw-wrapper-border-left);
    border-radius: var(--lw-wrapper-radius);
    box-shadow:    var(--lw-wrapper-shadow);
}

.lw-intro {
    font-size:      var(--lw-intro-size);
    font-weight:    var(--lw-intro-weight);
    letter-spacing: var(--lw-intro-spacing);
    text-transform: var(--lw-intro-transform);
    color:          var(--lw-intro-color);
    margin: 0 0 1rem;
    padding: 0;
}

.lw-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
}

.lw-btn {
    display: inline-block;
    padding: var(--lw-btn-padding);
    background: var(--lw-btn-bg);
    color: var(--lw-btn-color) !important;
    border-radius: var(--lw-btn-radius);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none !important;
    white-space: nowrap;
    border: none;
    cursor: pointer;
    transition: background 0.22s ease, color 0.22s ease, transform 0.15s ease, box-shadow 0.22s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    line-height: 1;
}

.lw-btn:hover,
.lw-btn:focus {
    background: var(--lw-btn-hover-bg) !important;
    color: var(--lw-btn-hover-color) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.14);
    outline: none;
    text-decoration: none !important;
}

.lw-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

@media (max-width: 600px) {
    .lw-buttons { gap: 0.5rem; }
    .lw-btn { font-size: 0.78rem; }
}