/* TNT Suite — Component Library styles. Consumes design-system tokens via CSS variables. */

/* ----- Button ----- */
.tnts-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    font: inherit;
    font-weight: var(--tnts-typography-weight-semibold, 600);
    line-height: 1.2;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    background: var(--tnts-color-primary-500, #3b82f6);
    color: #fff;
    transition: filter 120ms ease, transform 120ms ease;
}
.tnts-btn:hover { filter: brightness(1.08); }
.tnts-btn:active { transform: translateY(1px); }
.tnts-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.tnts-btn-secondary {
    background: transparent;
    color: var(--tnts-color-primary-700, #1d4ed8);
    border-color: var(--tnts-color-primary-500, #3b82f6);
}
.tnts-btn-danger { background: var(--tnts-color-danger-500, #ef4444); }
.tnts-btn-success { background: var(--tnts-color-success-500, #10b981); }

/* ----- Toast ----- */
.tnts-toast {
    display: none;
    position: relative;
    align-items: center;
    gap: 12px;
    padding: 12px 14px 12px 16px;
    background: var(--tnts-color-info-500, #0ea5e9);
    color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    max-width: 480px;
    margin: 8px 0;
    cursor: pointer;
}
.tnts-toast[data-tnts-state="open"] { display: inline-flex; }
.tnts-toast-success { background: var(--tnts-color-success-500, #10b981); }
.tnts-toast-warning { background: var(--tnts-color-warning-500, #f59e0b); color: #1f2937; }
.tnts-toast-danger  { background: var(--tnts-color-danger-500, #ef4444); }
.tnts-toast-close {
    background: transparent;
    border: 0;
    color: inherit;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    margin-left: auto;
    padding: 0 4px;
}

/* ----- Popup ----- */
.tnts-popup {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9000;
    align-items: center;
    justify-content: center;
}
.tnts-popup[data-tnts-state="open"] { display: flex; }
.tnts-popup-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
}
.tnts-popup-dialog {
    position: relative;
    background: #fff;
    color: #0f172a;
    max-width: 480px;
    width: calc(100% - 32px);
    padding: 18px 22px;
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.35);
    z-index: 1;
}
:root[data-tnts-mode="dark"] .tnts-popup-dialog,
@media (prefers-color-scheme: dark) {
    :root:not([data-tnts-mode="light"]) .tnts-popup-dialog {
        background: var(--tnts-color-neutral-900, #0f172a);
        color: var(--tnts-color-neutral-50, #f8fafc);
    }
}
.tnts-popup-dialog header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}
.tnts-popup-title { margin: 0; font-size: 1.25rem; }
.tnts-popup-close {
    background: transparent; border: 0; font-size: 22px; line-height: 1; cursor: pointer; color: inherit;
}
.tnts-popup-body { line-height: 1.5; }

/* ----- Focus-visible discipline (WCAG AA) ----- */
.tnts-btn:focus-visible,
.tnts-toast:focus-visible,
.tnts-popup-close:focus-visible,
.tnts-toast-close:focus-visible {
    outline: 2px solid #2271b1;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .tnts-btn, .tnts-toast, .tnts-popup * { transition: none !important; animation: none !important; }
}

/* ----- Demo stage ----- */
.tnts-demo-stage { padding: 24px 0; }
.tnts-demo-fixtures { display: flex; flex-direction: column; gap: 8px; }