/* TTC Component Variants System */

/* ═══ BUTTON VARIANTS ═══ */

/* Primary Button */
.ttc-btn-primary {
    background: var(--ttc-primary);
    color: white;
    border: none;
    padding: var(--ttc-space-sm) var(--ttc-space-lg);
    border-radius: var(--ttc-radius-md);
    font-weight: var(--ttc-fw-semibold);
    cursor: pointer;
    transition: var(--ttc-transition-fast);
    font-size: var(--ttc-fs-sm);
}

.ttc-btn-primary:hover {
    background: var(--ttc-primary);
    filter: brightness(1.1);
    box-shadow: 0 8px 16px rgba(99, 102, 241, 0.3);
}

.ttc-btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Secondary Button */
.ttc-btn-secondary {
    background: var(--ttc-border-subtle);
    color: var(--ttc-text-main);
    border: 1px solid var(--ttc-border-light);
    padding: var(--ttc-space-sm) var(--ttc-space-lg);
    border-radius: var(--ttc-radius-md);
    font-weight: var(--ttc-fw-semibold);
    cursor: pointer;
    transition: var(--ttc-transition-fast);
    font-size: var(--ttc-fs-sm);
}

.ttc-btn-secondary:hover {
    background: var(--ttc-border-light);
    border-color: var(--ttc-primary);
}

.ttc-btn-secondary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Success Button */
.ttc-btn-success {
    background: #10b981;
    color: white;
    border: none;
    padding: var(--ttc-space-sm) var(--ttc-space-lg);
    border-radius: var(--ttc-radius-md);
    font-weight: var(--ttc-fw-semibold);
    cursor: pointer;
    transition: var(--ttc-transition-fast);
    font-size: var(--ttc-fs-sm);
}

.ttc-btn-success:hover {
    filter: brightness(1.1);
    box-shadow: 0 8px 16px rgba(16, 185, 129, 0.3);
}

/* Danger Button */
.ttc-btn-danger {
    background: #ef4444;
    color: white;
    border: none;
    padding: var(--ttc-space-sm) var(--ttc-space-lg);
    border-radius: var(--ttc-radius-md);
    font-weight: var(--ttc-fw-semibold);
    cursor: pointer;
    transition: var(--ttc-transition-fast);
    font-size: var(--ttc-fs-sm);
}

.ttc-btn-danger:hover {
    filter: brightness(1.1);
    box-shadow: 0 8px 16px rgba(239, 68, 68, 0.3);
}

/* Warning Button */
.ttc-btn-warning {
    background: #f59e0b;
    color: white;
    border: none;
    padding: var(--ttc-space-sm) var(--ttc-space-lg);
    border-radius: var(--ttc-radius-md);
    font-weight: var(--ttc-fw-semibold);
    cursor: pointer;
    transition: var(--ttc-transition-fast);
    font-size: var(--ttc-fs-sm);
}

.ttc-btn-warning:hover {
    filter: brightness(1.1);
    box-shadow: 0 8px 16px rgba(245, 158, 11, 0.3);
}

/* Outline Button */
.ttc-btn-outline {
    background: transparent;
    color: var(--ttc-primary);
    border: 2px solid var(--ttc-primary);
    padding: calc(var(--ttc-space-sm) - 2px) calc(var(--ttc-space-lg) - 2px);
    border-radius: var(--ttc-radius-md);
    font-weight: var(--ttc-fw-semibold);
    cursor: pointer;
    transition: var(--ttc-transition-fast);
    font-size: var(--ttc-fs-sm);
}

.ttc-btn-outline:hover {
    background: var(--ttc-primary);
    color: white;
}

/* Ghost Button */
.ttc-btn-ghost {
    background: transparent;
    color: var(--ttc-text-main);
    border: none;
    padding: var(--ttc-space-sm) var(--ttc-space-lg);
    border-radius: var(--ttc-radius-md);
    font-weight: var(--ttc-fw-semibold);
    cursor: pointer;
    transition: var(--ttc-transition-fast);
    font-size: var(--ttc-fs-sm);
}

.ttc-btn-ghost:hover {
    background: var(--ttc-border-subtle);
}

/* Small Button */
.ttc-btn-small {
    padding: var(--ttc-space-2xs) var(--ttc-space-sm);
    font-size: var(--ttc-fs-xs);
}

/* Large Button */
.ttc-btn-large {
    padding: var(--ttc-space-md) var(--ttc-space-2xl);
    font-size: var(--ttc-fs-md);
    height: 48px;
}

/* Full Width Button */
.ttc-btn-block {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ═══ CARD VARIANTS ═══ */

/* Elevated Card */
.ttc-card-elevated {
    background: var(--ttc-bg-card);
    border: none;
    border-radius: var(--ttc-radius-lg);
    padding: var(--ttc-space-lg);
    box-shadow: var(--ttc-shadow-lg);
}

/* Flat Card */
.ttc-card-flat {
    background: var(--ttc-bg-card);
    border: none;
    border-radius: var(--ttc-radius-lg);
    padding: var(--ttc-space-lg);
    box-shadow: none;
}

/* Filled Card */
.ttc-card-filled {
    background: var(--ttc-border-subtle);
    border: none;
    border-radius: var(--ttc-radius-lg);
    padding: var(--ttc-space-lg);
    box-shadow: none;
}

/* Outlined Card */
.ttc-card-outlined {
    background: transparent;
    border: 1px solid var(--ttc-border-light);
    border-radius: var(--ttc-radius-lg);
    padding: var(--ttc-space-lg);
    box-shadow: none;
}

/* ═══ BADGE VARIANTS ═══ */

/* Solid Badge */
.ttc-badge-solid {
    display: inline-block;
    padding: var(--ttc-space-2xs) var(--ttc-space-sm);
    border-radius: var(--ttc-radius-pill);
    font-weight: var(--ttc-fw-semibold);
    font-size: var(--ttc-fs-xs);
}

.ttc-badge-solid.primary {
    background: var(--ttc-primary);
    color: white;
}

.ttc-badge-solid.success {
    background: #10b981;
    color: white;
}

.ttc-badge-solid.danger {
    background: #ef4444;
    color: white;
}

.ttc-badge-solid.warning {
    background: #f59e0b;
    color: white;
}

.ttc-badge-solid.info {
    background: #3b82f6;
    color: white;
}

/* Outline Badge */
.ttc-badge-outline {
    display: inline-block;
    padding: var(--ttc-space-2xs) var(--ttc-space-sm);
    border-radius: var(--ttc-radius-pill);
    font-weight: var(--ttc-fw-semibold);
    font-size: var(--ttc-fs-xs);
    border: 1px solid;
}

.ttc-badge-outline.primary {
    border-color: var(--ttc-primary);
    color: var(--ttc-primary);
}

.ttc-badge-outline.success {
    border-color: #10b981;
    color: #10b981;
}

.ttc-badge-outline.danger {
    border-color: #ef4444;
    color: #ef4444;
}

.ttc-badge-outline.warning {
    border-color: #f59e0b;
    color: #f59e0b;
}

/* Dot Badge */
.ttc-badge-dot {
    display: inline-flex;
    align-items: center;
    gap: var(--ttc-space-xs);
    padding: var(--ttc-space-2xs) var(--ttc-space-sm);
    border-radius: var(--ttc-radius-pill);
    font-size: var(--ttc-fs-xs);
}

.ttc-badge-dot::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

/* ═══ STATUS INDICATORS ═══ */

.ttc-status-indicator {
    display: inline-flex;
    align-items: center;
    gap: var(--ttc-space-xs);
    padding: var(--ttc-space-2xs) var(--ttc-space-sm);
    border-radius: var(--ttc-radius-pill);
    font-size: var(--ttc-fs-xs);
    font-weight: var(--ttc-fw-semibold);
}

.ttc-status-indicator::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

.ttc-status-indicator.active::before {
    background: #10b981;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.5);
}

.ttc-status-indicator.inactive::before {
    background: #6b7280;
}

.ttc-status-indicator.pending::before {
    background: #f59e0b;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.5);
}

.ttc-status-indicator.error::before {
    background: #ef4444;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
}