Template:Warning/styles.css

/* Warning notice box - Tailwind-inspired styling */
.warning-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    margin: 1rem 0;
    background-color: #fef3c7; /* amber-100 */
    border: 1px solid #f59e0b; /* amber-500 */
    border-left: 4px solid #d97706; /* amber-600 */
    border-radius: 0.375rem;
}

.warning-notice-icon {
    font-size: 1.25rem;
    line-height: 1;
    flex-shrink: 0;
}

.warning-notice-content {
    font-size: 0.9375rem;
    line-height: 1.5;
    color: #92400e; /* amber-800 */
}

.warning-notice-content strong {
    color: #78350f; /* amber-900 */
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .warning-notice {
        background-color: #451a03; /* amber-950 */
        border-color: #b45309; /* amber-700 */
    }
    
    .warning-notice-content {
        color: #fcd34d; /* amber-300 */
    }
    
    .warning-notice-content strong {
        color: #fde68a; /* amber-200 */
    }
}

/* Site dark mode class support */
.dark-mode .warning-notice,
.night-mode .warning-notice {
    background-color: #451a03;
    border-color: #b45309;
}

.dark-mode .warning-notice-content,
.night-mode .warning-notice-content {
    color: #fcd34d;
}

.dark-mode .warning-notice-content strong,
.night-mode .warning-notice-content strong {
    color: #fde68a;
}